Internal Structure

Class ProductsQuery

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

Description: A general product and product-list query declaration. Read more: 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

Method getProductByHandleField

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

Method getProductsField

Description: General product list field getter [returns edges]

Function processProduct

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

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

Function processProductByHandleResponse

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

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

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

Description: A type of ProductsQuery associated with getProductsField function.

Usage examples:

// 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

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

Description: A type of ProductsQuery associated with getProductByHandleField function.

Usage examples:

// 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

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

Class ProductCardContainer

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

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

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

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

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

Function ProductsFallbackPage

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

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

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

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

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.