Skip to main content

useAdjacentProducts

Helps you discover and highlight which bundle products can be attached ("connected") to a given product in a bundle configuration. Given a target product (and optionally specific connection offsets), it computes the set of compatible bundle attribute value candidates. Reach for it when building attach/connect UX — for example, highlighting valid drop targets or filtering an "add adjacent product" list.

Getting the controller​

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

const controller = useAdjacentProducts(configurator);

The controller reads and writes the adjacentProducts store slice: the currently selected target product and the computed candidate cids.

Example: selecting a target and reacting to candidates​

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

const controller = useAdjacentProducts(configurator);

// React whenever the candidate set changes.
const unsubscribe = controller.subscribe(candidateCids => {
    highlightAttachmentOptions(candidateCids);
});

// Mark a product as the connection target; candidates are computed and stored.
controller.selectTargetProduct(productCid);

// If only certain connection offsets are relevant, narrow the query:
if (controller.hasOffsetWithCandidates(productCid, offsetId)) {
    controller.selectTargetProduct(productCid, [offsetId]);
}

// Later, clear the highlight state.
controller.clearTarget();
unsubscribe();

Candidate cids refer to bundle attribute value cids whose connection modules are compatible with the target product's connection modules.

API​

selectedTargetProductCid​

The cid of the product currently marked as the connection target, or null. Read-only view of store state.

connectionCandidateCids​

The current list of compatible bundle attribute value cids for the selected target. Empty when no target is selected or nothing is compatible.

subscribe(callback)​

Subscribes to changes in connectionCandidateCids. The callback receives the new string[]. Returns an unsubscribe function.

const unsubscribe = controller.subscribe(cids => render(cids));

selectTargetProduct(productCid, availableOffsetIds?)​

Marks productCid as the connection target and computes its candidates. Optionally narrow to specific availableOffsetIds. If the product cannot be resolved, or no candidates are compatible, the target is cleared instead of being set.

getOffsetIdsWithCandidates(productCid, availableOffsetIds)​

Pure query (no store mutation). Returns the subset of availableOffsetIds that each have at least one compatible bundle candidate. Useful for enabling/disabling per-offset UI.

hasOffsetWithCandidates(productCid, offsetId)​

Pure query. Returns true when the given offsetId on productCid has at least one compatible bundle candidate.

clearTarget()​

Clears the selected target and its candidate list.