Bundle Sync

readme.md

This code sets enables/disables the Add to Cart button according to the availability inventory of bundle products.

Install Steps

1. Create a new snippet called 'bundle-sync.liquid'. Copy the code from the bundle-sync file below.
2. Open theme.liquid and add {% include 'bundle-sync' %} to the bottom of the file, just above where it says </body>.

Options

Edit bundle-sync.liquid to pass additional options to the bundle sync function.

inventory: pass this callback a function to handle updating the state of add to cart buttons. For example:

var container = $('form[action="/cart/add"]');

window.bundleSync.init({
  inventory: function(available) {
    var addToCartForm = $('form[action="/cart/add"]'),
        addToCartButton = $('input[type=submit]', addToCartForm),
        quantityContainer = $('.qty-selection', addToCartForm);
    
    if (available > 0) {
      addToCartButton.val('Add To Cart').prop('disabled', false);
      quantityContainer.show();
    } else {
      addToCartButton.val('Not Available').prop('disabled', true);
      quantityContainer.hide();
    }
  }
});

bundle-sync.liquid

{% comment %}
Products Assistant code used to figure out if components are sold out: 
https://gist.github.com/gterrill/6e6bac607961139d52f9f5276e34b450
{% endcomment %}

{% if template contains 'product' %}
<script>
  window.bundleSync = {
    bundleMatrix: JSON.parse('{{ product.metafields.sva.bundle_matrix }}' || '[]'),
                             
    init: function(options) {
      this.options = $.merge({
        handleInventory: this.onHandleInventory
      }, options || {});
  
      this.cartForm = $('form[action="/cart/add"]');
    
      this.cartForm.on('change', '.single-option-selector, .single-option-selector__radio, select.product-variants, .single-option-selector-product-template', function() {
    	window.bundleSync.checkBundleInventory();
	  });
  
      this.checkBundleInventory();
  	},
    
    currentVariant: function() {
        return $('input[name^=id]:checked, select[name^=id], input[name=id], hidden[name^=id]', window.bundleSync.cartForm).val();
    },
    
    currentlyAvailable: function() {
      var variant = window.bundleSync.currentVariant(),
          matrix = window.bundleSync.bundleMatrix,
          available = 999;
      
      if (!variant) {
        console.log('Could not determine current variant');
        return;
      }
      
      for (var x = 0; x < matrix.length; x++) {
        if (matrix[x].variant == variant) {
          available = matrix[x].available;
          break;
        }
      }
      
      return available;
    },
      
    checkBundleInventory: function() {
      if (window.bundleSync.bundleMatrix.length > 0) {
	this.options.handleInventory(this.currentlyAvailable());
      }
    },
      
    onHandleInventory: function(available) {
      $(':submit', this.cartForm).prop('disabled', available < 1);
      $('input[name="quantity"]', this.cartForm).attr('max', Math.max(available, 0));
    }
  }
  
  document.addEventListener("DOMContentLoaded", function(event) {
    window.bundleSync.init();
  });  
</script>
{% endif %}

themes.md

Prestige

Add <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" defer></script> to theme.liquid:102

bundle-sync.liquid:

Add this to the script section.

document.addEventListener('variant:changed', function(event) {
  var variant = event.detail.variant;
  window.bundleSync.checkBundleInventory(variant.id);
});

Then change the checkBundleInventory function to take a variantId parameter.