Getting started with Horizon and facing issues using the Swell storefront editor.

[holden]

Hi, we've been facing issues trying to use the Horizon them and the new updates to the Swell storefront editor. Basically, the editor doesn't seem to maintain the changes we make when using it. If we add a menu to the header using the editor it works for a time, until we add a footer, then the header menu will mysteriously disappear. Or sometimes the changes don't work at all, there's not a clear pattern I can find, there's also no clear errors in the console. Basically any changes we made using the editor seem transitory and something doesn't seem to work right.

We followed all the documentation, deployed to vercel, set NEXT_PUBLIC_SWELL_EDITOR=true etc.

It appears to work within the swell editor, changes get reflected for some time, then they get reverted as we make other changes.

Is there something here we're missing?

Any pointers would greatly appreciated.

I also made a video in the issue here: swellstores/horizon#48

[sags95]

Thank you for bringing this to our attention @holden, I've passed this on to the team so we can investigate. It's possible that there is some issue here rather than an misconfiguration.

[holden]

Awesome, thanks. I set it up here on vercel: beta.cirqus.co with the store_id: cirqus-marketplace if that helps.

I noticed a couple of other things as well:

• it's hitting quite a few 403 json errors, (see the image below) and as a result it loads the data quite slowly between requests, i'm pretty sure this isn't anything I did as it appeared to do the same even when I created a new instance from scratch.
• also when you change the currency from the default of USD (eg to EUR or GBP), it permanently removes USD from being an option so you can't go back to it again later

Thanks again

[logeshswell]

• 403 error is being thrown since the fetchCart returns null here
• The following error 'Invalid payload' also correspond to the same line as JSON.parse(string) throws an error and is being logged here

So, these can be modified as per your need.

[logeshswell]

@holden Currency dropdown issue is fixed in your storefront now. Please check and confirm.

[holden]

Awesome, thanks. Yes it works fine now. How was this fixed? Was it just a simple setting I missed somewhere?

Regarding the 403s, so you're saying this is expected behavior? As I was only noticing it because I was having the error with the navigation.

[logeshswell]

Was it just a simple setting I missed somewhere?

No, the currency data were corrupted in the backend of your storefront. I just have to refresh it.

so you're saying this is expected behavior?

As per the codebase, yes it is expected and you can update it to return 404 or 200 status code as per your wish.

[holden]

Hi @sags95 can I get an update on this? It still appears to be not working properly. Thanks

[Strongeyed]

@holden Maybe this temporary fix for the issue described (pushed recently to the Swell repo) by applying the following in the sync script -s defaults:

[holden]

No, I checked this was already line appeared to be already added in the version of horizon I'm using. Thanks though, I'm not sure what would cause adding a footer to remove a header and vice versa. ;-(

[logeshswell]

@holden I noticed 2 issues in your storefront navigation.

1. There shouldn't be more than 1 record of the same Theme area (Header/Footer menu)
2. Menu Alias should be header and footer for Theme area (Header and Footer menu respectively).

Secondly, there is a bug found in the storefront editor while updating the header and footer. As an immediate workaround, I fixed it by running npm install inside the horizon theme for your storefront and you could see both the header and footer being displayed in your storefront now. Please check and confirm.

[holden]

Nope, this still doesn't work for me. I made some very minor changes and immediately the footer and header disappeared.

The repo I deployed to vercel is here, you can see there haven't been any real changes.

https://github.com/razrfly/cirqus-horizon/

[logeshswell]

@holden As I mentioned above, there is a UI bug found in the storefront editor while updating the header or footer.
It updates header or footer at once but not both. I will file a bug ticket for faster resolution.

When you encounter the same issue, running npm install will fix this issue as temporary workaround.

[holden]

Please do, thanks for that. Running npm install does return both the menus, it also seems put everything else back to default too, like the logo, etc. But I can work with that for now. Thanks

[logeshswell]

To avoid restoring with the default settings, please pass -s defaults flag in the sync script for editor and defaults commands as @Strongeyed mentioned in this comment.

[holden]

One other problem I've noticed is on the category details page, whenever I try to make small changes there. It shows them auto-update, however it doesn't persist them

I was trying to change it to a 5 instead of 4 products per row and add several featured categories to be above the products, but none of the changes updated anything.

CleanShot.2023-06-29.at.15.25.46.mp4

[logeshswell]

It shouldn't be a problem anymore, as I can see that you switched your frontend from static-mode to server-side rendering.
It helps to render the content immediately when the page is reloaded without the need to build the project.