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 [email protected]—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

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 3

  • This step will make sure our widget is consistent in both carts.

Open layout/theme.liquid and add the code below at the bottom of that file:

<!-- Start of Zapiet code -->
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
// Update first item's key in the theme when widget changes it's properties
ZapietEvent.listen("checkoutEnabled", function() {
WAU.ThemeCart.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);
});
});
});


// Reload app when theme updates the view
setInterval(function() {
var zapietDiv = document.getElementById("storePickupApp");
if (!zapietDiv) {
document.dispatchEvent(new CustomEvent("zapiet:start"))
}
}, 1000);
});
</script>
<!-- End of Zapiet code -->


The widget should appear on the cart page when you have added a product to the cart. It should look similar to the screenshot below.

  • In the regular cart

  • In the drawer cart

Did this answer your question?