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


---

# 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://scandipwa.gitbook.io/shopify/packages/shopify-products/structure.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.