Import external HTML & export Shopify Shopping Cart

[tojai]

Hi guys, 

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?

[tojai · Accepted solution]

Think, I got a solution for both. 
Regarding a) the answer is: 

<script>
    function loadHTML(){
  fetch('https://domain/pathtoscript')
  .then(response=> response.text())
  .then(text=> document.getElementById('nav').innerHTML = text);
}
    loadHTML();
</script>
<div id="nav"></div>

This will also require further adjustments on the responding server regarding the cors-settings. 

b) is a solution I'm not too happy with but it should do for now:
1. Install the Buy Button Channel
2. Include it on the external website on every page you'd want the cart to show up

3. Adjust the cart-settings by adjusting JavaScript & CSS so only the cart shows

[tojai]

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. 

[marko_fabrique]

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)

[tojai]

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 

<script src="{{ 'projekt-cookiecart.js' | asset_url }}" defer></script>

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.

Hth! Tom

[marko_fabrique]

Tom,

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? 

[tojai]

Indeed. We thought about integrating more information but in the end stuck to the absolut necessary info to keep it simple.

[marko_fabrique]

Excellent! Thanks for the swift replies, highly appreciated