Install instructions
Step 1
Follow our Online store 2.0 article to enable the Store Pickup + Delivery widget, but don't publish the duplicate theme before implementing the rest of the steps.
Note
Please reach out to us at support@zapiet.com—we’ll be happy to install the widget for you.
Only proceed if you are comfortable editing code yourself.
On the theme, click Actions > Edit code.
Step 2
- This step will make sure our widget is placed correctly in the ajax cart.
Open snippets/cart-form.liquid and search for the following:
<div class="ajax-cart__buttons">
Prepend the following code to the line above:
<div id="storePickupApp"></div>
Step 3
- This step will hide our ZapietID from the cart page.
Open snippets/cart-form.liquid and search for the following:
{% unless p.last == blank %}
Replace the line above with the following code:
{% unless p.last == blank or p.first == "_ZapietId" %}
Step 4
- This and the next step will make sure our widget is consistent in both carts.
Open assets/theme.js and search for the following:
Shopify.theme.shippingCalculator = {
Prepend the following code to that line:
/* Start of Zapiet code */ document.addEventListener("DOMContentLoaded", function() { /** Updates first item's key in the theme */ function updateThemeKey() { Shopify.theme.cart.getCart().then(function(updatedCart) { var keyElements = document.querySelectorAll("[data-item-key]"); // Case: empty cart if (!updatedCart.items || updatedCart.items.length == 0 || !keyElements || keyElements.length == 0 ) { return; } // Grab the first item's key in the theme var themeKey = keyElements[0].getAttribute("data-item-key"); // Grab the first item's key in the cart var updatedKey = updatedCart.items[0].key; // Case: No keys to update if (themeKey == updatedKey) { return; } // Update the key document .querySelectorAll("[data-item-key='" + themeKey + "']") .forEach(function(element) { element.setAttribute("data-item-key", updatedKey); }); }); } ZapietEvent.listen("checkoutEnabled", function() { updateThemeKey(); }); }); /* End of Zapiet code */
Step 5
Open assets/theme.js and search for the following:
var config = document.getElementById('cart-config');
Prepend the following code to that line:
/* Start of Zapiet code */ window.$ = window.jQuery; document.dispatchEvent(new CustomEvent("zapiet:start")); /* End of Zapiet code */
The widget should appear on the cart page when you have added a product in the cart.
It should look similar to the screenshot below.
- In the regular cart
- In the drawer cart
