Comments (7)
The add to cart session count doesn't work with access tokens created by headless channel.
If you are just changing the env variables across different market, why not have 2 Hydrogen storefronts?
- US domain -> Hydrogen storefront 1
- CA domain -> Hydrogen storefront 2
from hydrogen.
We moved from Headless
to Hydrogen
for all of our store instances and updated our env variables accordingly... This seems to have solved the issue!
Thanks for the help @wizardlyhel 🙏
from hydrogen.
Interesting... I didn't realize that was an option...
We do not need most of the things that the Hydrogen Sales Channel offers since we would only have a single deployment out of our main US Storefront, and for the other markets we really just need Storefront API credentials.
That said, it feels like overkill, but I suppose I could still use a Hydrogen Sales Channel in the other markets to create the Storefront API credentials I need and just have no deployments.
I will try to test this out this week, and will close the ticket if that turns out to be successful. Thanks for the quick reply!
from hydrogen.
You can have single code base and deploy to multiple storefronts. Our own mono repo deploys to multiple storefronts in this ci deploy workflow. We just need to supply a mapping of deploy tokens. https://github.com/Shopify/hydrogen/blob/main/.github/workflows/deploy-examples.yml#L57-L65
from hydrogen.
Hmm.. I might be misunderstanding, but your example seems to be showing how to deploy multiple apps out of a single deployment workflow (and I'm assuming to multiple domains), and we want to do sort of the opposite.
We have a single app deployed to a single domain (www.pax.com). We have multiple Shopify stores that have different products based on the region. When a user changes their locale, we just need to change the store that is being used, but it will use the same app and should be deployed to the same site (ie www.pax.com/en-ca/).
We started this project at the bleeding edge of Shopify Hydrogen, and there wasn't really any documentation on setting up a multi-region storefront using multiple stores, so we cobbled things together on our own. Our solution with a single Hydrogen
instance in our main store and multiple Headless
instances in our other stores for API access works great with the exception of Shopify Analytics...
If the way we have our project setup is incorrect, is there any documentation on the correct way to do this?
Any clarity on this whole situation is definitely appreciated. Thanks 🙏
from hydrogen.
okay . so what you have is
Shopify store | Url | Channel |
---|---|---|
PAX US | pax.com | Hydrogen |
PAX CAN | pax.com/en-ca | Headless |
Code is hosted by Hydrogen and the env gets swapped out when url path starts with /en-ca/
.
If you want a quick workaround, you can create a Hydrogen channel in PAX CAN and copy over the env vars back to PAX US and continue with what you have for swapping out the env vars. This would allow the add to cart analytics to work in your multi-region stores.
There isn't really an official path to handle mutli-storefront .. but more like there is multiple way to do the exact same thing:
Option 1: Deploy same code base to both stores under Hydrogen channel. This would only work if you can assign different root level domain urls to your other stores (ie. pax.ca
or ca.pax.com
for PAX CAN) and simply do a url redirect when user chooses their region.
Option 2: Turn on Shopify markets and merge 2 Shopify stores into 1 Shopfiy store. Shopify markets handles may aspects of internationalization for you. However, this might not be possible for your particular case. The benefit of this path is that you can switch market by simply passing country
in the inContext
in the graphql to Storefront API to change market.
from hydrogen.
Thanks for the info!
Options 1 and 2 both don't really work for our use cases, so I am planning on trying the other option you mentioned:
create a Hydrogen channel in PAX CAN and copy over the env vars back to PAX US and continue with what you have for swapping out the env vars. This would allow the add to cart analytics to work in your multi-region stores.
🤞
from hydrogen.
Related Issues (20)
- CommonJS dependency incompatibility: `ReferenceError: require is not defined` HOT 2
- Client network socket disconnected before secure TLS connection was established HOT 1
- VariantSelector return isAvailable true for missed variants HOT 3
- Invalid CartID when add item to card HOT 3
- Add fetchPriority type to Image component
- Vite renderToReadableStream error after upgrading cli-hydrogen from 7 to 8.0.4 HOT 4
- ReferenceError: "module is not defined" in Hydrogen/Remix Apps with new Vite when using @react-three/drei HOT 2
- Simplify & improve Shop Pay Button DX
- `cartQueryFragment` returns metafield-referenced product variants that are not in Hydrogen channel HOT 1
- Error: [o2:runtime] External modules are not supported: "buffer" when attempting to upgrade to Vite HOT 2
- Hydrogen CLI does not support Yarn v4 with Hydrogen upgrade HOT 2
- Create OneTrust example
- Deploy fails - github worker & hydrogen deploy HOT 10
- Only URLs with a scheme in: file, data, and node are supported by the default ESM loader. On │ │ Windows, absolute paths must be valid file:// URLs. Received protocol 'c:' HOT 18
- --host flag does not seem to be doing anything HOT 2
- VariantSelector only support full locale identifier format HOT 3
- Third-party analytics in Hydrogen not firing on page navigation HOT 5
- `customData` from the `Analytics.Provider` is undefined in the `useAnalytics.subscribe()` functions HOT 1
- I have the same issue when trying to install Hydrogen on the Window system. HOT 7
- Page keeps reloading after initial setup and linking to a hydrogen storefront HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from hydrogen.