> 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-products/structure.md).

# Internal Structure

## Class `ProductsQuery`

```javascript
import {ProductsQuery} from '@scandipwa/shopify-products/src/api/Products.query.js'
```

**Description:** A general product and product-list query declaration. Read more: [Query controller](https://app.gitbook.com/@scandipwa/s/shopify/solutions/query-controller), [TypedQuery](https://app.gitbook.com/@scandipwa/s/shopify/solutions/query-controller#typedquery)

**Namespace**: `ShopifyProducts/Api/Products/Query/ProductsQuery`

### Method `_getProductFields`

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

### Method `getProductByHandleField`

**Description:** General product field getter (by handle) \[returns node]

### Method `getProductsField`

**Description:** General product list field getter \[returns edges]

## Function `processProduct`

```javascript
import {processProduct} from '@scandipwa/shopify-products/src/api/Products.processor.js'
```

**Description:** The single product processor. Returns void, instead it modifies the passed argument.

**Namespace**: `ShopifyProducts/Api/Products/Processor/processProduct`

**🔮 Common extension point:** Great place to add some "calculated" field into product

```javascript
{
    'ShopifyProducts/Api/Products/Processor/processProduct': {
        'function': ([product], callback) => {
                callback(product);
                product.myField = product.id + product.handle;
            }
    }
}
```

## Function `processProductByHandleResponse`

```javascript
import {processProductByHandleResponse} from '@scandipwa/shopify-products/src/api/Products.processor.js'
```

**Description:** The single product query response processor

**Namespace**: `ShopifyProducts/Api/Products/Processor/processProductByHandleResponse`

## Function `processProductsResponse`

```javascript
import {processProductsResponse} from '@scandipwa/shopify-products/src/api/Products.processor.js'
```

**Description:** The product-list query response processor (from edges and nodes creates an array of products)

**Namespace**: `ShopifyProducts/Api/Products/Processor/processProductsResponse`

## Variable `PAGINATED_PRODUCTS`

```javascript
import {PAGINATED_PRODUCTS} from '@scandipwa/shopify-products/src/api/Products.query.js'
```

**Description:** A type of `ProductsQuery` associated with `getProductsField` function.

**Usage examples:**

```javascript
// Returns getter of paginated product query
import getProductQueryByType, { PAGINATED_PRODUCTS } from '@scandipwa/shopify-products/src/api/Products.query.js';
const queryGetter = getProductQueryByType(PAGINATED_PRODUCTS);
```

## Variable `SINGLE_PRODUCT`

```javascript
import {SINGLE_PRODUCT} from '@scandipwa/shopify-products/src/api/Products.query.js'
```

**Description:** A type of `ProductsQuery` associated with `getProductByHandleField` function.

**Usage examples:**

```javascript
// Returns getter of single product query
import getProductQueryByType, { SINGLE_PRODUCT } from '@scandipwa/shopify-products/src/api/Products.query.js';
const queryGetter = getProductQueryByType(SINGLE_PRODUCT);
```

## Class `ProductCardComponent`

```javascript
import {ProductCardComponent} from '@scandipwa/shopify-products/src/component/ProductCard/ProductCard.component.js'
```

**Description:** The product card (preview) component

**Namespace**: `ShopifyProducts/Component/ProductCard/Component/ProductCardComponent`

### Member `sortedRenderMap`

**Description:** A list of render methods used by product card. Read more: [SortedRenderMap](/shopify/solutions/sortedmap-and-sortedrendermap.md)

## Class `ProductCardContainer`

```javascript
import {ProductCardContainer} from '@scandipwa/shopify-products/src/component/ProductCard/ProductCard.container.js'
```

**Description:** The product card (preview) container, used to provide a product context to all children components

**Namespace**: `ShopifyProducts/Component/ProductCard/Container/ProductCardContainer`

## Function `ProductFallbackPage`

```javascript
import {ProductFallbackPage} from '@scandipwa/shopify-products/src/component/ProductFallbackPage/index.js'
```

**Description:** A component used as fallback while the product page is loading

**Namespace**: `ShopifyProducts/Component/ProductFallbackPage/Index/ProductFallbackPage`

## Class `ProductHeroComponent`

```javascript
import {ProductHeroComponent} from '@scandipwa/shopify-products/src/component/ProductHero/ProductHero.component.js'
```

**Description:** The product hero (summary) component (usually on the top of Product page)

**Namespace**: `ShopifyProducts/Component/ProductHero/Component/ProductHeroComponent`

## Class `ProductMediaComponent`

```javascript
import {ProductMediaComponent} from '@scandipwa/shopify-products/src/component/ProductMedia/ProductMedia.component.js'
```

**Description:** Product media (gallery) component

**Namespace**: `ShopifyProducts/Component/ProductMedia/Component/ProductMediaComponent`

## Class `ProductPageComponent`

```javascript
import {ProductPageComponent} from '@scandipwa/shopify-products/src/component/ProductPage/ProductPage.component.js'
```

**Description:** Product page component

**Namespace**: `ShopifyProducts/Component/ProductPage/Component/ProductPageComponent`

### Member `sortedRenderMap`

**Description:** The list of sections to be displayed on the product page. Read more: [SortedRenderMap](/shopify/solutions/sortedmap-and-sortedrendermap.md)

## Function `ProductsFallbackPage`

```javascript
import {ProductsFallbackPage} from '@scandipwa/shopify-products/src/component/ProductsFallbackPage/index.js'
```

**Description:** A component used as fallback while the product-list page is loading

**Namespace**: `ShopifyProducts/Component/ProductsFallbackPage/Index/ProductsFallbackPage`

## Class `ProductsPageComponent`

```javascript
import {ProductsPageComponent} from '@scandipwa/shopify-products/src/component/ProductsPage/ProductsPage.component.js'
```

**Description:** Product listing page component

**Namespace**: `ShopifyProducts/Component/ProductsPage/Component/ProductsPageComponent`

## Class `ProductsProvider`

```javascript
import {ProductsProvider} from '@scandipwa/shopify-products/src/context/Products.provider.js'
```

**Description:** The product context

**Namespace**: `ShopifyProducts/Context/Products/Provider/ProductsProvider`

### Method `getContextValue`

**Description:** A product context value

**🔮 Common extension point:** Inject additional fields and methods into context

```javascript
{
    'ShopifyProducts/Context/Products/Provider/ProductsProvider': {
        'member-function': {
            'getContextValue': (args, callback) => ({
                    ...callback(...args),
                    myMethod: (v) => { this.myProperty = v; },
                    myProperty: 'myOriginalValue'
                })
        }
    }
}
```

{% 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 %}