useProduct

In plain words

Signature

function useProduct(initialProduct: Product, options?: UseProductOptions): UseProductResult

interface UseProductOptions {
  isPreview?: boolean;  // true while initialProduct is a list-card stand-in
}

interface UseProductResult {
  product: Product;
  reload: () => Promise<void>;
}

Try it live

import { useProduct } from '@salla.sa/twilight-theme-engine/hooks/useProduct';
import { useMoney } from '@salla.sa/twilight-theme-engine/hooks/useMoney';
import type { Product } from '@salla.sa/twilight-theme-engine/types';

export function LivePrice({ initial }: { initial: Product }) {
  const { product } = useProduct(initial); // follows the SDK's option and price events
  const { format } = useMoney();
  return (
    <p>
      {format(product.price, { currency: product.currency })}
      {product.is_out_of_stock && <span> · out of stock</span>}
    </p>
  );
}

Example

import { useProduct } from '@salla.sa/twilight-theme-engine/hooks/useProduct';
import { useMoney } from '@salla.sa/twilight-theme-engine/hooks/useMoney';
import type { Product } from '@salla.sa/twilight-theme-engine/types';

export function LivePrice({ initial }: { initial: Product }) {
  const { product } = useProduct(initial);
  const { format } = useMoney();

  return (
    <div className="live-price">
      {format(product.price, { currency: product.currency })}
      {product.is_out_of_stock && <p>This combination is out of stock.</p>}
    </div>
  );
}

How it behaves

• On the server, and until effects run, product is simply initialProduct. All subscriptions are made in effects, in the browser.

• Salla.product.event.onPriceUpdated merges price, sale_price, regular_price, is_on_sale (from has_sale_price) and weight, and sets is_out_of_stock to false. product::price.updated.failed sets is_out_of_stock to true. product:options.updated calls reload().

• reload() calls Salla.api.product.getDetails(String(product.id), ['images', 'category']) and, on success, replaces the whole state with response.data. Network errors are ignored.

• The state is re-seeded from initialProduct only when initialProduct.id or options.isPreview changes, never because a new object with the same id arrived. That keeps live option and price changes from being thrown away by a refetch.

• Pass isPreview: true while initialProduct is a list-card stand-in (for example the placeholder data of product.queries.detail) so the hook re-seeds when the full details for the same id arrive.

• The engine's ProductPage uses it for the whole product page.

Gotchas

• Props that change without a new id do not reach product. If you refetch the same product and want the new data, pass isPreview (true, then false) or remount the component with a key.

• reload() asks only for images and category. The Store API then omits options, skus, brand, tags and rating (checked against the demo store), and the reloaded product replaces yours whole, so components reading those fields lose them.

• Every subscription needs window.Salla when its effect first runs. If the SDK loads later, the price listeners are never attached.

• Price events come from Salla's product web components. Plain HTML inputs for options fire nothing, so the price will not follow them.

Related

Source and docs

• Engine source: packages/theme-engine/src/hooks/useProduct.ts
• docs/18-hooks-api.md — useProduct()