Product Cross-Selling

INFO

The cross-selling feature is available with @plentymarkets/shop-api version 0.95.0

You can use useSdk().plentysystems.getFacet to load cross-selling items. You can make use of the useProducts composable, in which you wrap the SDK call to be used in Nuxt.

The required getFacet parameters for a cross-selling item are itemId, type: cross_selling; the crossSellingRelation is optional.

You can get the itemId by using useProduct(); if you are on the product page product.value is already available.

Example

const { data: product, fetchProduct } = useProduct(productId);
const itemId = productGetters.getItemId(product.value)

Fetch cross-selling data:

const itemId = productGetters.getItemId(product.value)

// the param for useProducts is your state key; if you want to have multiple item lists, this identifier must be unique
const { fetchProducts: fetchCrossSelling, data: crossSellingItems } = useProducts('crossSelling' + itemId + 'Similar');

fetchCrossSelling({
  itemId: itemId,
  type: 'cross_selling',
  crossSellingRelation: 'Similar'
});

Fetch multiple cross-selling lists by relation type

The svailable crossSellingRelation types are: Accessory, ReplacementPart, Similar, Bundle

// the param for useProducts is your state key; if you want to have multiple item lists, this identifier must be unique
// type Similar
const { fetchProducts: fetchCrossSelling, data: crossSellingItems } = useProducts(productId + 'Similar');

fetchCrossSelling({
  itemId: productGetters.getItemId(product.value),
  type: 'cross_selling',
  crossSellingRelation: 'Similar'
});

// type Accessory
const { fetchProducts: fetchCrossSellingAccessory, data: crossSellingItemsAccessory } = useProducts(productId + 'Accessory');

fetchCrossSellingAccessory({
  itemId: productGetters.getItemId(product.value),
  type: 'cross_selling',
  crossSellingRelation: 'Accessory'
});

// type Bundle
const { fetchProducts: fetchCrossSellingBundle, data: crossSellingItemsBundle } = useProducts(productId + 'Bundle');

fetchCrossSellingBundle({
  itemId: productGetters.getItemId(product.value),
  type: 'cross_selling',
  crossSellingRelation: 'Bundle'
});

// type ReplacementPart
const { fetchProducts: fetchCrossSellingReplacementPart, data: crossSellingItemsReplacementPart } = useProducts(productId + 'ReplacementPart');

fetchCrossSellingReplacementPart({
  itemId: productGetters.getItemId(product.value),
  type: 'cross_selling',
  crossSellingRelation: 'ReplacementPart'
});

Render with ProductSlider

<ProductSlider v-if="crossSellingItemsAccessory" :items="crossSellingItemsAccessory.products"></ProductSlider>

const itemId = productGetters.getItemId(product.value)
const { fetchProducts: fetchCrossSellingAccessory, data: crossSellingItemsAccessory } = useProducts(itemId + 'Accessory');

fetchCrossSellingAccessory({
  itemId: itemId,
  type: 'cross_selling',
  crossSellingRelation: 'Accessory'
});