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 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 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 in the cart.
It should look similar to the screenshot below.
- In the regular cart
- In the drawer cart
