Shopify option selection

Shopify has a pre-built JavaScript function that creates separate option selectors from a master selector, hides that master selector and updates it when any option selectors are changed, and returns

You can include this functionality in your element with the following:

{
    computed: {
        vendors(){
             return ['shopify_option_selection_js'];
        }
    }
}

After you include the function, you need to address the following:

The master selector

For this JavaScript function to create option selectors, it needs a master selector to read the variants from. This master selector needs to have an id attribute for the function to reference, as well as an attribute of name=id to be recognized in the product form as the variant ID source.

For example:

<select id="product-select" name="id">
 {% for variant in product.variants %}
    <option value="{{ variant.id }}" {% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %}
       {{ variant.title }} - {{ variant.price | money }}
    </option>
 {% endfor %}
 </select>

The callback function

The callback function is called when any of the option selectors change, giving you the opportunity to update product elements like the media and price. It can be called anything, but it must have the following two parameters:

• variant

• selector

For example:

var selectCallback = function(variant, selector) {
  // callback content
}

VARIANT

The variant object passed to the callback function has the following attributes:

Attribute	Description
available	Whether the variant has available inventory. Will be true or false.
barcode	The variant's barcode.
compare_at_price	The variant's compare price in cents, or null
featured_image	The variant's featured image.
id	The variant's ID.
inventory_management	The variant's inventory tracking service.
inventory_policy	Whether the variant should continue selling when the inventory level is 0 or less. Will be continue if it should continue selling, or deny if not.
name	The product title combined with the variant title, separated by a -. For example, T-Shirt - S/Black.
option1	The value of the first product option.
option2	The value of the second product option, or null.
option3	The value of the third product option, or null.
price	The variant's price in cents.
requires_selling_plan	Whether the variant requires a selling plan. Will be true or false.
requires_shipping	Whether the variant requires shipping. Will be true or false.
selling_plan_allocations	An array of selling_plan_allocation objects.
sku	The variant's sku, or null.
taxable	Whether the variant is taxable. Will be true or false.
title	A combination of the option values with / between each. For example, S/Black for a S and Black variant.
weight	The variant's weight in grams, or null.

Your callback should handle the following cases:

• The variant exists, and is available

• The variant exists, and is not available

• The variant doesn't exist

SELECTOR

The selector object passed to the callback function is the calling OptionSelectors object.

Instantiate the option selection JavaScript

To use the option selection JavaScript, you need to instantiate a new OptionSelectors object with arguments of the id attribute of the master selector, and an object with the following attributes:

Attribute	Description
product	The product JSON, which can be accessed using the json filter.
onVariantSelected	The name of your callback function.
enableHistoryState	Determines whether to update the URL with the ?variant query parameter as variants are selected. Can be true or false.

For example:

new Shopify.OptionSelectors('product-select', {
  product: {{ product | json }},
  onVariantSelected: selectCallback,
  enableHistoryState: true
});