> For the complete documentation index, see [llms.txt](https://docs.beae.dev/beae-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.beae.dev/beae-docs/developer/vendors/shopify-option-selection.md).

# 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:

```javascript
{
    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:

```markup
<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](https://shopify.dev/themes/product-merchandising/variants#variant)
* [selector](https://shopify.dev/themes/product-merchandising/variants#selector)

For example:

```javascript
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](https://shopify.dev/api/liquid/filters/additional-filters#json). |
| `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:

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