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
