a customer of ours wishes for a new shop. While that’s fine and should be done with Shopify it’ll also be a content heavy site. The customer is not overly happy with the content capabilities Shopify’s offering so he wants to have a mix of external website and Shopify.
For this we need
a) to import the external website’s navigation into Shopify and
b) export the Shopify Shopping Cart
I believe we could solve a) by importing the navigation via JavaScript.
However, I have no real idea rn how to approach b)
It would be lovely to get your ideas on this. How would you go about it?
Update to solution b) :
that did not make me happy in the end, searched further and found out, I could use cookies to transport all I wanted within a domain, so I’ll go that way.
Hi Tojai, would you mind elaborating on the approach you followed by using cookies to share the cart? I’m facing the same challenge and adding external nav etc. to Shopify is easy with javascript, however fetching the cart information proves to be more tedious (also since the docs are somewhat unclear)
Hi Marko,
sure, here you go:
I setup an additional js asset cookiecart.js with the following content:
// get the main domain to store the cookie. otherwise we can't share the cookie between subdomains
function extractDomain(host) {
const parts = host.split(".");
if(parts.length > 2){
parts.shift();
}
return parts.join(".");
}
function updateCartCountCookie() {
fetch('/cart.json')
.then((data) => {
data.json().then((cart) => {
const myDate = new Date();
myDate.setMonth(myDate.getMonth() + 1);
document.cookie = 'yourCookieName=' + cart.item_count.toString() + ';expires=' + myDate
+ ';domain=.' + extractDomain(location.hostname) + ';path=/';
});
});
}
// Event fires after cart changes which is theme dependent and may need to be changed
document.addEventListener("theme:loading:end", () => {
updateCartCountCookie();
});
/* update on initial load */
document.addEventListener('DOMContentLoaded', () => {
updateCartCountCookie();
})
This I included in the theme liquid with
Note, that we made a strict cut between where content only happens (in this case under www.domain.tld )and where shopping starts (shop.domain.tld).
If you want to inlcude a shopping solution though I’d rather take the buy button solution.
interesting solution. So if I’m reading this right you’re actually counting the amount of cart items on the ‘shop’ domain within Shopify, fetching the cart.json API for this, and then saving the values in a cookie for the TLD only so you can read this on the ‘website’ subdomain?