Skip to main content

getProductsSharedStateKit

info

Learn more about the StateKit guide for working with reactive state management.

Retrieves a reactive state kit object that provides access to products query and service methods with Observable streams. This allows you to subscribe to product changes and load products on demand.

Usage example​

Ensure the SDK and the Products module are ready.

function onSdkReady() {
    const moduleName = window.gw.sdk.common.constants.modules.PRODUCTS;
    window.gw.sdk.runIfModuleReady(moduleName, () => {
        window.gw.sdk.products.methods.getProductsSharedStateKit()
            .then((response) => {
                const stateKit = response.result;

                // Load a product and subscribe to its changes
                stateKit.service.addProductForFetching(123).subscribe((product) => {
                    console.log('Product loaded:', product);
                });

                // Subscribe to all products in store
                stateKit.query.selectAll().subscribe((products) => {
                    console.log('All products:', products);
                });

                // Subscribe to product and variant together
                stateKit.query.selectProductAndVariant(123, 456).subscribe(({ product, variant }) => {
                    if (product && variant) {
                        console.log('Product:', product.title);
                        console.log('Price:', variant.price);
                    }
                });
            })
            .catch(console.error);
    });
}

if (window.gw && window.gw.sdk) {
    onSdkReady();
} else {
    document.addEventListener("gwSdkReady", onSdkReady);
}

Types​

ProductsSharedStateKit​

ProductsSharedStateKitQueryWrapper​

ProductsSharedStateKitQueryWrapper
interface
Methods
selectAll()Observable<ProductSdkDto[]>
Returns:
Observable<ProductSdkDto[]>
selectFirstVariantOfProduct(productId)Observable<ProductVariantSdkDto | null>
Parameters
NameTypeDescription
productIdnumber—
Returns:
Observable<ProductVariantSdkDto | null>
selectProduct(productId)Observable<ProductSdkDto | null>
Parameters
NameTypeDescription
productIdnumber—
Returns:
Observable<ProductSdkDto | null>
selectProductAndVariant(productId, variantId)Observable<{ product?: ProductSdkDto; variant?: ProductVariantSdkDto }>
Parameters
NameTypeDescription
productIdnumber—
variantIdnumber | null—
Returns:
Observable<{ product?: ProductSdkDto; variant?: ProductVariantSdkDto }>
selectProductIds()Observable<number[]>
Returns:
Observable<number[]>
selectProductStatus(productId)Observable<LOADING | READY | "IN_QUEUE" | undefined>
Parameters
NameTypeDescription
productIdnumber—
Returns:
Observable<LOADING | READY | "IN_QUEUE" | undefined>

ProductsSharedStateKitServiceWrapper​

ProductsSharedStateKitServiceWrapper
interface
Methods
addProductForFetching(productId)Observable<ProductSdkDto>
Adds a product to the fetching queue and returns an Observable that emits the product once it's loaded.
Parameters
NameTypeDescription
productIdnumberID of the product to fetch
Returns:
Observable<ProductSdkDto>
Observable that emits the loaded product
addProductWithQuantityRulesForFetching(productId)void
Adds a product with quantity rules to the fetching queue.
Parameters
NameTypeDescription
productIdnumberID of the product to fetch with quantity rules

ProductSdkDto​

ProductVariantSdkDto​