Local setup instructions

Written by Andrew Cargill

Updated on Fri, 18 Mar, 2022 at 2:39 PM

Install instructions
Troubleshooting

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/framework-cart.liquid and search for the following code:

{% unless p.last == blank %}

Replace the code above with the following:

{% unless p.last == blank or p.first == "_ZapietId" %}

Step 3

This and the following two steps will make sure our widget is consistent in both carts.

Open layout/theme.liquid and search for the following code:

{{ "theme.min.js" | asset_url | script_tag }}

Replace the code above with the following:

{{ "theme.js" | asset_url | script_tag }}

Step 4

Open assets/theme.js and search for the following:

_this.renderDynamicCheckoutButtons();

Append the following code to the line above:

document.dispatchEvent(new CustomEvent("zapiet:start"));

Step 5

Open assets/theme.js and search for the following:

return update_all_html_done();

Prepend the following code to the line above:

document.dispatchEvent(new CustomEvent("zapiet:start"));

Step 6

This step will make sure the widget is consistent on mobile.

Open snippets/cart.liquid and paste this code at the bottom of the file:

<!-- Start of Zapiet code -->    
<script type="text/javascript" defer>
  function updateWidget() {
    // Get current app instance
    var appDiv = document.querySelector("#storePickupApp");
    
    // Get appropriate cart root, based on theme's css media query
    var cartRoot;
    var mediaQuery = window.matchMedia('(max-width: 767px)');
    if (mediaQuery.matches) {
        cartRoot = document.querySelector(".cart--root[data-view='mobile']");
    } else {
      cartRoot = document.querySelector(".cart--root[data-view='desktop']");
    }
    
    // Cart drawer does not have cart root, 
    // so check for cart footer directly in the document
    var cartFooter;
    if (cartRoot) {
      cartFooter = cartRoot.querySelector(".cart--footer");
    } else {
      cartFooter = document.querySelector(".cart--footer");
    }
    
    // Move app div before cart footer
    cartFooter.parentNode.insertBefore(appDiv, cartFooter);
  }

  
  document.addEventListener("DOMContentLoaded", function() {
  updateWidget();
    
    ZapietEvent.listen("widget_loaded", updateWidget);
  });

  window.addEventListener("resize", updateWidget);
</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