Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Bundle Sync

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();
    }
  }
});
{% 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 %}

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.