Our theme, Merch, uses a headless eCommerce solution from Snipcart (https://snipcart.com/) and runs version 2 of their framework. On Tuesday 22nd October 2019 Snipcart released the long-awaited version 3.0, and it looks like an amazing overhaul of their frontend cart and checkout processes, including, moving away from JQuery dependency.
Find out what others are saying about Snipcart 3.0 on Product Hunt and check out the Snipcart v3 documentation.
However, this will mean that our Merch theme is running a slightly older version of Snipcart - although, v2 is still a great and stable solution for any eCommerce site. That being said, we will show you, in a quick 3-step process, how to upgrade Snipcart from v2 to v3 in Merch.
Update the references to <header> in the CSS (or SCSS, if you prefer working with pre-compiled styles) provided with Merch:
Step 1.a - CSS Method
Open /css/usn-global.css and find references to:
and change to:
Step 1.b - SCSS Method
Open /scss/usn-modules/_usn-layout.scss and go to lines 148 to 273 then change all references of:
You should now compile your SCSS files to the CSS file used on your site.
Go to Partial Views > USNShop > Open USN_SnipcartGlobalScript > Find lines 11 to 19 > Replace with:
<script src="//cdn.snipcart.com/themes/v3.0.0/default/snipcart.js"></script> <link rel="stylesheet" href="//cdn.snipcart.com/themes/v3.0.0/default/snipcart.css" /> <div hidden id="snipcart" data-api-key="@globalSettings.SnipcartApikey"></div>
Go to Partial Views > USNShop > Open USN_SnipcartBasket > Find lines 10 to 16 > Replace with:
<nav class="shopping-cart snipcart-summary"> <a href="#" class="snipcart-checkout"> <em class="hidden">Cart</em> <i class="ion-bag"></i> <span class="amount snipcart-total-items snipcart-items-count"></span> </a> </nav>
And that's it, you will now be running Snipcart 3.0 with Merch theme for Umbraco CMS.