Recommendation

Introduction

The Product Detail Page (PDP) includes a feature that allows you to specify which products are recommended or suitable to Combine with the main item. Once set, these recommendations will be prominently displayed on the PDP of that particular product for customers to view.

Combined With products are products that can be paired with the item you're viewing on the PDP, making it easy to find related items that complement your choice.

Usage

To start using the Combined With feature, you need a defined advanced attribute group called combineWith in your SCAYLE Panel setup. For information on how to create this group, see here.

Once the attribute group combineWith is created, you need to set the Product IDs as connection values to show recommended or Combined with products on the PDP. Navigate to the Combined With tab on the SCAYLE Panel's Product page, where you can enter the Product IDs in the provided input field for each recommended item you wish to display on the PDP. Multiple Product IDs can be shown on the Combine With feature.

Implementation

The ProductRecommendations component renders on the PDP if at least one product ID is specified. These IDs are passed to the component, where the composable useProductRecommendations fetches the corresponding products, filters out inactive or sold-out items, and returns the active products to be displayed in a slider component.

html

Copy

<!-- PDP -->
<div v-if="combineWithProductIds.length > 0" class="mt-3">
  <ProductDetailGroup data-test-id="combine-with-slider">    
    <template #headline>
       {{ $t('global.product_recommendation') }}
    </template>
    <ProductRecommendations
      size="4xs"
      :combine-with-product-ids="combineWithProductIds"
      :product-id="productId"
    />
  </ProductDetailGroup>
</div>

typescript

Copy

// useProductRecommendations.ts
const recommendationsFetchParams = computed<FetchProductsParams>(() => {
  return { ids: combineWithProductIds }
})

const { data: combineWithProducts, fetching: fetchingCombineWithProducts } =
  await useProductsByIds({
    params: recommendationsFetchParams,
    key: `pdp-recommendations-${productId}`,
  })

const sliderProducts = computed(() =>
  (combineWithProducts.value ?? []).filter(
    (product) => product.isActive && !product.isSoldOut,
  ),
)