> For the complete documentation index, see [llms.txt](https://scandipwa.gitbook.io/shopify/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://scandipwa.gitbook.io/shopify/packages/shopify-product-variants/structure.md).

# Internal Structure

## Class `ProductVariantsQuery`

```javascript
import {ProductVariantsQuery} from '@scandipwa/shopify-product-variants/src/api/ProductVariants.query.js'
```

**Description:** Product variants query declaration. Read more: [Query controller](https://app.gitbook.com/@scandipwa/s/shopify/solutions/query-controller)

**Namespace**: `ShopifyProductVariants/Api/ProductVariants/Query/ProductVariantsQuery`

### Method `_getVariantFields`

**Description:** A function which returns an array of product variant fields. Read more [Extending Query controllers](https://app.gitbook.com/@scandipwa/s/shopify/solutions/query-controller#extension)

### Method `getOptionsField`

**Description:** Getter for variant options \[returns edges]

### Method `getVariantsField`

**Description:** Getter for product variants \[returns edges]

## Class `ProductOptionComponent`

```javascript
import {ProductOptionComponent} from '@scandipwa/shopify-product-variants/src/component/ProductOption/ProductOption.component.js'
```

**Description:** Product Option component

**Namespace**: `ShopifyProductVariants/Component/ProductOption/Component/ProductOptionComponent`

## Class `ProductOptionContainer`

```javascript
import {ProductOptionContainer} from '@scandipwa/shopify-product-variants/src/component/ProductOption/ProductOption.container.js'
```

**Description:** Product Option Container. Used to connect with the Product Context and define functions.

**Namespace**: `ShopifyProductVariants/Component/ProductOption/Container/ProductOptionContainer`

### Member `containerFunctions`

**Description:** Function which returns an object of functions.

**🔮 Common extension point:** Add more logic to Product Option component

```javascript
{
    'ShopifyProductVariants/Component/ProductOption/Container/ProductOptionContainer': {
        'member-properties': {
            'containerFunctions': (member, instance) => ({
                     ...member,
                     onBlur: () => doSomething()
                })
        }
    }
}
```

### Member `containerProps`

**Description:** Function which returns an object of props that are going to be passed down to the component.

**🔮 Common extension point:** Add more props to Product Option component

```javascript
{
    'ShopifyProductVariants/Component/ProductOption/Container/ProductOptionContainer': {
        'member-properties': {
            'containerProps': (member, instance) => ({
                     ...member,
                     myField: 'myField'
                })
        }
    }
}
```

## Class `ProductOptionsComponent`

```javascript
import {ProductOptionsComponent} from '@scandipwa/shopify-product-variants/src/component/ProductOptions/ProductOptions.component.js'
```

**Description:** Product Options Component. Used to display multiple Product Options

**Namespace**: `ShopifyProductVariants/Component/ProductOptions/Component/ProductOptionsComponent`

{% hint style="danger" %}

### **This page is automatically generated**

All modification will be erased during the next deployment. If you intend to modify the contents, please refer to the source-code.
{% endhint %}