Signup

Integrating Build-a-Box by Bold

Learn how to configure Bold's Build-a-Box app to work with Store Pickup + Delivery
  1. Ensure you are using v7.0.5 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>
      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) {
          
          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>
        (function() {
          const shopping_cart = {
            total_price: 9900,
            requires_shipping: true,
            items: [
            {
              product_id: {{ product.id }},
              variant_id: {{ product.variants[0].id }},
              quantitiy: 1
            }
          ]
        };
    
       Zapiet.Widget.start(ZapietCachedSettings, shopping_cart);
      })();
      </script>
    {% endif %}

  6. Click Save

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


A
Andrew is the author of this solution article.

Did you find it helpful? Yes No

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