Skip to main content

useStoreProductOffers

useStoreProductOffers returns the StoreProductOffersController, which exposes the entire product-offer collection at once. Reach for it when you need the main product, the sub-products, or want to look up, subscribe to, serialize, or parse the whole set of offers.

Getting the controller​

import { useStoreProductOffers } from "@expivi/product-configurator";

const products = useStoreProductOffers(configurator);

End-to-end example​

Find the main product, list its sub-products, and react to changes:

import { useStoreProductOffers } from "@expivi/product-configurator";

const products = useStoreProductOffers(configurator);

console.log("Main product:", products.mainProduct.identifier);
console.log("Sub-products:", products.subProducts.length);

const unsubscribe = products.subscribe(list => {
  console.log("Product offers updated:", list.length);
});

// Persist the current configuration
const snapshot = products.serialize();

// Later, on teardown
unsubscribe();

API​

data​

Returns all ProductOfferView items currently in the store.

mainProduct​

Returns the main product offer (the one flagged as mainProduct). Throws if none exists.

getByCid(cid)​

Returns a single product offer by its runtime cid, or undefined if not found.

hasProductById(id)​

Returns true if a product offer with the given persistent product id exists in the store.

subProducts​

Returns all non-main product offers.

subscribe(callback)​

Subscribes to product-offer list updates. The callback receives the ProductOfferView[]. Returns an unsubscribe function to call during cleanup.

serialize()​

Serializes every product offer into a SerializedProductOfferInterface[], delegating each entry to the per-offer controller's serialize().

parse(data)​

Parses an array of serialized product offers back into the current store, delegating each entry to the matching per-offer controller. Missing or failing items are logged and skipped.