Signup

Foodie setup instructions


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

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


Troubleshooting


Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.