Learn how to configure Bold's Build-a-Box app to work with Store Pickup + Delivery

  1. Ensure you are using v7.0.8 or above of Store Pickup + Delivery. You can check this by looking at the top of your snippets/storepickup.liquid file.

  2. Create a new snippet called snippets/storepickup-bold-ro.liquid file add the following code:

    <script>
    document.addEventListener("DOMContentLoaded", function(event) {    window.ZapietRO = {};  ZapietRO.CartIntegration = function() {
        this.init();
      }
      ZapietRO.CartIntegration.prototype.init = function() {
        this.addListeners();
      }
      ZapietRO.CartIntegration.prototype.updateSingleProductModeAddress = function() {
        var zapietWidget = document.getElementById('storePickupApp');    var affectedForm = zapietWidget.closest('form');
        if (!affectedForm)
          return;    var roWidget = affectedForm.querySelector('.ro_widget');
        if (!roWidget)
          return;    var addressFields = [
          'address1',
          'address2',
          'city',
          'company',
          'country',
          'province',
          'zip'
        ];    addressFields.forEach(function(field) {
            var addressEl = affectedForm.querySelector('[name="' + field + '"]');
            if (addressEl) {
              addressEl.value = BOLD.customer[field];
            }
        });
      }
      ZapietRO.CartIntegration.prototype.addListeners = function() {
        
        window.ZapietEvent.listen('selected_method', function(method) {
          switch(method) {
            case 'shipping': 
            case 'delivery': 
              BOLD.recurring_orders.app.cartWidget.pickupEnabled = false;
              break;
            case 'pickup':
              BOLD.recurring_orders.app.cartWidget.pickupEnabled = true;
              break;
          }
        });
        
        window.ZapietEvent.listen('disableCheckout', function(response) {
          BOLD.recurring_orders.app.cartWidget.checkoutEnabled = false;
        });
        
        window.ZapietEvent.listen('activateCheckout', function(response) {
          
    if (typeof document.getElementById('_ZapietId') !== 'undefined') {
            document.getElementById('_ZapietId').value = Zapiet.Cart.getZapietId({
                method: response.method,
                location_id: (response.location) ? response.location.id : null,
                date: response.date,
                time: response.time
            });
          }      BOLD.recurring_orders.app.cartWidget.checkoutEnabled = true;
          
          if(response && response.method && response.method === 'pickup' && response.location) {
            BOLD.customer.address1 = response.location.address_line_1 || "";
            BOLD.customer.address2 = response.location.address_line_2 || "";
            BOLD.customer.city = response.location.city || "";
            BOLD.customer.company = response.location.company_name || "";
            BOLD.customer.country = response.location.country || "";
            BOLD.customer.province = response.location.region || "";
            BOLD.customer.zip = response.location.postal_code || "";
            BOLD.recurring_orders.app.cartWidget.loadCustomerData();
            ZapietRO.CartIntegration.prototype.updateSingleProductModeAddress(); // Updated as this.updateSingleProductModeAddress() was looking within the event emitter, not within the RO code.
          }
          
         if(response && response.method && response.method === 'delivery' && response.location && response.postal_code) {      
            BOLD.customer.city = response.location.city || "";
            BOLD.customer.country = response.location.country || "";
            BOLD.customer.province = response.location.region || "";
            BOLD.customer.zip = response.postal_code || "";
            BOLD.recurring_orders.app.cartWidget.loadCustomerData(); 
            ZapietRO.CartIntegration.prototype.updateSingleProductModeAddress(); // Updated as this.updateSingleProductModeAddress() was looking within the event emitter, not within the RO code.
          }
        });
      }  if(typeof window.Zapiet !== 'undefined' && 
         typeof window.ZapietEvent !== 'undefined' && 
         typeof BOLD !== 'undefined' && 
         typeof BOLD.recurring_orders !== 'undefined' && 
         typeof BOLD.recurring_orders.app !== 'undefined' && 
         typeof BOLD.customer !== 'undefined') {
        ZapietRO.cart = new ZapietRO.CartIntegration();
      }  /**
       * Element.closest polyfill for IE9+
       */
      if (!Element.prototype.matches)
          Element.prototype.matches = Element.prototype.msMatchesSelector || 
                                      Element.prototype.webkitMatchesSelector;
      if (!Element.prototype.closest)
          Element.prototype.closest = function(s) {
              var el = this;
              if (!document.documentElement.contains(el)) return null;
              do {
                  if (el.matches(s)) return el;
                  el = el.parentElement || el.parentNode;
              } while (el !== null && el.nodeType === 1); 
              return null;
          };
    });
    </script>

  3. Open your theme.liquid file and and find the closing </body> tag

  4. Insert the following code directly above that tag and click Save

    {% include "storepickup-bold-ro" %}

  5. Next open your product template that contains your Add to cart button. Normally this will be either templates/product.liquid or snippets/product-template.liquid. Within that file add the following code just above your Add to cart button

    {% if product.tags contains "buildabox" %}   
    <div id="storePickupApp"></div>
    <input type="hidden" id="_ZapietId" type="text" name="properties[_ZapietId]" />
    <script>document.addEventListener('DOMContentLoaded', function(event) {
    ZapietCartOverride = {
    total_price: 9900,
    requires_shipping: true,
    items: [{
    requires_shipping: true,
    product_id: {
    {
    product.id
    }
    },
    id: {
    {
    product.variants.first.id
    }
    },
    quantity: 1,
    properties: null
    }]
    };
    ZapietCachedSettings.cached_config.rates_enabled = false;
    Zapiet.start(ZapietCachedSettings);
    });
    < /script>
    {% endif %}

  6. Click Save

  7. Finally add the tag "buildabox" within Shopify to each of your Build-a-Box products.

Did this answer your question?