We have implemented multisite configuration recently, but facing an issue after it.
When we have it configured (in both mode - Static/Dynamic configuration), we are getting error in cart API when refreshing the page. After analyzing it we found that it is happening due to wrong site context parameter(currency code) and it is happening only in case of non SSR build, when we use SSR it works fine. In case of normal build, it is adding “USD” as currency code in API call with dynamic site binding and if we are using static binding then it is picking the first currency code even if we are on secondary website. Spartacus framework is picking it from default list of currency codes when hitting cart API on page refresh.
Spartacus version:2.0
Screenshot
Error message
Please share a solution on this.
You can add currency in static configuration (e.g. adding currency: ['JPY'], inside context, currency will be JPY).
If your multiple sites using different "currency" (e.g. one site uses "USD" and the other one uses "JPY"), then you cannot use static configuration. Dynamic configuration loads all base sites data, and get the default currency from each site (the value is: the defaultCurrency of the first store in the site). So, you need make sure the site data is set correctly in backend.
Related
I'm having trouble with the basesite service. We currently have three websites: global, cn (China), and tw (Taiwan) (Taiwan)
To pick the region, we have a drop-down menu on the global site. Using baseservice(spartacus), the selected region is set.
this.baseSiteService.setActive(region);
localhost:4200/cn/cn When the above line has run, appears in the URL
Could someone please explain how it is appended twice in the url and how to override this?
You said in the comment that you "don't have any services or configs related to site context". So I guess what you see in the URL by default are 2 different site contexts: baseSite and language, which "by coincidence" have the same values pairwise):
localhost:4200/<baseSite>/<language>
I guess what you want to achieve in this case is to have an URL of the shape localhost:4200/<baseSite>. This can be achieved in 2 ways, depending on whether you're using static or automatic site-context configuration.
You can configure which site contexts should appear in the URL in 2 ways:
if you're using CMS-driven site context configuration in Spartacus (aka. automatic site-context-configuration), then you need to configure it in CMS Backoffice tool. As in the screenshot below, for each of your basesites go to WCMS -> Website -> <select your base site> -> Administration (tab) -> URL Encoding Attributes and put there only the value storefront (get rid of language or anything else there). And save the changes.
if you're using static site-context configuration in Spartacus, then you need to provide the following static config in your app:
provideConfig({
urlParameters: ['baseSite']
})
References:
Automatic Site Configuration Detection from URL (demo video)
Spartacus docs on Site-context configuration
I'm currently wondering about the difference between static and dynamic pages when using vue.js.
Are vue.js pages static or dynamic?
They can change on user interactions but not necessarily need to interact with the server to change data, when not using axios or alike. So does it still count as static just changing the frontend itself on input or interactions?
Little confused about this. Hope for good explanations.
A static page is a page delivered to the user exactly as stored and with no chance on being changed, end of story!
Although dynamic pages can take 2 types: Client-side dynamic web page and a Server-side dynamic web page.
Client-side dynamic page is changed without server requests. For example, when you click a button and something pops on the screen, or some content on the page changes, etc... (i think you take the idea).
Server-side dynamic page is changed with server requests, as you said for example, with HTTP requests using Axios.
And this is not the Vue.js definition, is the default definition for static and dynamic pages.
In Shopify:-
When my for loop code run then this issue occurred:-
"There was a problem loading this website
Try refreshing the page.
If the site still doesn't load, please try again in a few minutes."
console error is
"Failed to load resource: the server responded with a status of 502 ()"
How to fix it.
Seems like your Shopify site has too many collections and products within them so it just fails to load all of them due exceeding memory limits.
I'm assuming that you're trying to replicate the page from the reference URL you provided in your comment. Consider one of the options below to implement the required functionality:
Create different automated collections for each price range using Product price is less than condition. This approach is good as it uses Shopify's engine to generate collections, but it still might be quiet tricky to implement grouping as on the ref site you provided in comments.
Load collections and its products using AJAX requests i.e. request the data only when a customer is scrolling the page down. It will increase page load speed and will slightly decrease the Shopify site load but still is not ideal as data still will be requested on every page load and scrolling down events. You can slightly improve the situation by caching results on the clients' side, but again, is not ideal still.
Create a custom Shopify application that syncs products with your database. Then you can create an URL on your server that will be used as a data provider for your page. It can be requested via AJAX and return JSON with all the products, grouped by collections and matching the request parameters e.g. price less than X.
You can go further and add a proxy extension to your app. Shopify proxy would allow you loading a custom page directly from your server with the data from your database and render it within Shopify site like a part of itself.
In general, this approach gives you more flexibility on data to output, which can also be cached on your side to increase page speed load drastically.
Personally, I would prefer the last option.
I need some help with this issue in Vue Storefront that I have had some difficulty trying to solve:
After navigating to PDP(Product Detail Page) and refreshing the page, the page gets redirected to ‘page-not-found’ for many products. The products that get redirected to page-not-found are always the same and not all products get redirected to page-not-found. Traversing to the PDP using router-link works, even when the path is hardcoded, but navigating directly to it or refreshing the page while on a PDP doesn’t work. I also tried isolating the problem and found that even including just the Product.js mixin file from the core and removing all other code on PDP still causes the redirect.
I am unable to solve this bug despite trying for days. Even if you can’t see what is causing the issue, it would be helpful if anyone can at least show me how to debug this issue. I don’t know how to know what code is causing the redirect to 404.
Thanks
Is behavior present only for given type of products (like bundle) or do they have some common characteristic?
The problem may be lack of some data during SSR refresh. Then on a client side product can't be fetched. This can happen if we are missing some checks for some specific product types. Can you ping me on VS slack and give access to the code? Looks like the fault is on our side :)
Which version of VS are You using? If 1.9 - please make sure You've got the products properly imported with the product.url_path set. Then please do check if You don't have
I'm working on a semi-SPA VUE- page.
By semi-SPA i mean that just a few parts of the page are SPA:s (using routing).
The problem is that it generates a #-sign in the URL and the customer really doesn't like that.
To get rid of it you can use history mode but from what I can find it's only possible in a "pure" SPA-solution since it need to point back to a starting point if it doesn't find the specific route.
Is it possible to remove the #-sign from the URL in this scenario?