Signup

Fashionopolism 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

  • 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

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

Troubleshooting

Did you find it helpful? Yes No

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