Script to show products as out of stock if a bundled component is out of stock

readme.md

Instructions

1. Create a snippet called 'bundled.liquid' and paste the code from the file below.

2. Open theme.liquid and add {% include 'bundled' %} to the bottom of the file, just above where it says </body>.

3. Find out where variant changes happen. This is different depending on the theme. Some themes are documented below.

Places to check:

• sections/product-template.liquid
• assets/themes.js

4. If your theme uses optionSelectors:

Search for code like this:

var selectCallback = function(variant, selector) {
  if (variant && variant.available) {
    // existing code here
  }
}

Replace it with this:

var selectCallback = function(variant, selector) {
  bundled(variant, function(bundle) {
    if (variant && variant.available && bundle.available) {
      // existing code here
    }
  })

  // use bundle.quantity to limit max quantity that can be ordered - e.g. $('#quantity').attr('max', bundle.quantity);
}

Note: Some themes bypass the selectCallback if there is only 1 variant. You will see code like this:

{% if product.variants.size > 1 or product.options.size > 1 %}
  new Shopify.OptionSelectors...
{% endif %>

Change it so that the select callback is called:

{% if product.variants.size > 1 or product.options.size > 1 %}
  new Shopify.OptionSelectors...
{% else %}
  selectCallback({{ product.first_available_variant | json }}, {product: {id: {{ product.id }}}})
{% endif %>

Note:

• This code will not work on collection pages (i.e. in 'Quick View' forms).

Contact us for a quote if you need help with installing this script.

bundled.v5.liquid

{% comment %}
This is used to figure out if components are sold out. 

Please see https://gist.github.com/gterrill/b77f0352982991bd1c748d0ab2b42b45 for more info
{% endcomment %}

<script>
  var bundleInfo = '{{ product.metafields.sva.bundle }}', bundle,  
      bundles = [];
  
  if (bundleInfo) {
    bundle = JSON.parse(bundleInfo);
  }
  
{% for variant in product.variants %}
  {%- if variant.metafields.sva.bundled -%}
    bundles['{{ variant.id }}'] = JSON.parse('{{ variant.metafields.sva.bundled }}');
  {%- endif -%}
{% endfor %}

    var bundled = function (id, callback) {
      {% if product.metafields.sva.bundle_matrix %}
        callback({available: true, quantity: 1000});
      {% else %}
        var targets = bundles[id];

        if (targets) {
            var processes = [], results = [], i;

            jQuery.each(targets, function (n, target) {
                processes.push(process(target, results));
            })

            $.when.apply($, processes).done(function () {
                var available = true, quantity = 100;
                for (i = 0; i < results.length; i++) {
                    if (results[i].available == false) {
                        available = false;
                        quantity = 0;
                        break;
                    } else {
                        if (quantity > results[i].quantity) {
                            quantity = results[i].quantity;
                        }
                    }
                }
                callback({available: available, quantity: quantity});
            });

            return true;
        } else {
            callback({available: true});
            return false;
        }
      {% endif %}
    }
</script>

themes.md

Theme Specific Instructions

We'll update this area with instructions for themes. Please note that themes change regularly so they may not match the version you have installed on your store.

Fashionopolism

See snippets/product-form.liquid (line 70)

Radiance

See themes/theme.liquid (line 272)

Venture

See assets/shop.js.liquid (line 1753)

Timber Based Themes

(e.g. Jumpstart) See assets/theme.js - find a function called productVariantCallback.