# Shopify option selection

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
});
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.beae.dev/beae-docs/developer/vendors/shopify-option-selection.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.