Adding your Shopify Cart to Other Sites

Our webstore is hosted on Shopify. But we also have Structr for other content, WordPress for our blog and Discourse for our Forums. Shopify has a cart system. Our Shopify header has a cart icon via FontAwesome. And Shopify also shows a bubble over the cart icon that shows a count of the number of items in your cart. It looks like this:

Here's a screenshot of the final solution that I created for Structr. I'm still working on getting the alignment right.

And here's the steps I took to create it.

So, what I wanted was to add the cart and the count bubble to my other sites, starting with Structr. I already had the Font Awesome cart up there as that's easy to add to any site. What I needed to add was the cart count from Shopify. So I searched for solutions. The best recommendation was to create a new page in Shopify that showed the cart count. Then iFrame that into any place desired on other sites. It works but isn't the ideal solution for me. This is because on Shopify, the cart count bubble overlays the Font Awesome cart icon. If in Structr I rendered the cart and brought the cart count bubble in from Shopify, I could not get them to overlay.

So, what I did was to create a page in Shopify that shows just the cart icon and and the count bubble. Here's what it looks like:

Here's how the page is built in Shopify. First, made a liquid page template with the following code:

And the referenced CSS file looks like this:

I then created the page pages/cart-nav that uses the page template above. So now in Shopify, I have a page that renders just the shopping cart and count bubble.

The next step is to iFrame that into my header on Structr. The navbar code on Structr now looks like this:

<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="${if(empty(me.id),'/','/user-home')}">Home</a></li>
<li class=""><a href="/collections/products">Store</a></li>
<li class=""><a href="/collections/open-designs">Open Designs</a></li>
<li class=""><a href="/manufacturer">Manufacturers</a></li>
<li class=""><a href="http://forums.obrary.com">Forums</a></li>
<li class="nav-item-cart"><a class="nav-item-link-cart nav-item-link" href="/cart"><iframe src="http://obrary.com/pages/cart-nav" width="65" scrolling="no" height="35" frameborder="0"></iframe>
<div id="iframeBlocker" style="position:absolute; top: 0; left: 0; width:99%; height:99%;opacity:0;"></div></a></li>
</ul>

The div with the id="iframeBlocker" is to place a mask over the whole cart section including the iFrame. That way, any clicks in that section are handled by Structr and not by Shopify within the iFrame.

So that's my solution. I hope it helps. Please let me know if you have any questions.