Skip to main content

useProductOffer

useProductOffer returns a ProductOfferController scoped to a single product offer (identified by its runtime cid). Reach for it when you need to read one product's data and attributes, subscribe to changes, serialize it, or lazily load its attributes and attribute values.

Getting the controller​

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

const mainProduct = useStoreProductOffers(configurator).mainProduct;
const product = useProductOffer(configurator, mainProduct.cid);

End-to-end example​

Read a product, watch it for changes, and lazily load a page of attributes:

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

const mainProduct = useStoreProductOffers(configurator).mainProduct;
const product = useProductOffer(configurator, mainProduct.cid);

console.log("Attributes so far:", product.attributes.length);

const unsubscribe = product.subscribe(() => {
  console.log("Product offers changed");
});

// Lazily load more attribute definitions for this product
await product.loadAttributes({ page: 1 });

// Later, on teardown
unsubscribe();

API​

data​

Returns the ProductOfferView for this controller's cid. Throws if no product with that cid exists in the store.

attributes​

Returns all AttributeView items whose productCid matches this product offer.

index​

Returns the position (number) of this product in the store's product-offer array, or undefined if not found.

subscribe(callback)​

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

serialize()​

Serializes this product offer into a SerializedProductOfferInterface, including its id/identifier/cid, main_product flag, related attribute cids, and visualization mappers.

parse(data)​

Currently a placeholder. The method exists but does not yet apply any product-offer changes.

loadAttributes(config)​

Loads or paginates the attribute definitions for this product via the product-offer store slice. Accepts a LoadAttributesConfig and resolves to the loaded attribute cids (string[]) or undefined.

const cids = await product.loadAttributes({ page: 2 });

loadAttributeValues(configs, updateAll = false)​

Loads value pages for one or more attributes belonging to this product. Accepts an array of LoadValuesConfig and an optional updateAll flag; resolves to the affected cids (string[]) or undefined.