Build your own product relation type

Edit on GitHub

This tutorial shows how to build your own product relation type.


This instruction is related to Yves and Zed, so both applications must be updated accordingly to allow your product relation type.

Modify Zed

  1. Create a new relation type in \Spryker\Shared\ProductRelation\ProductRelationTypes as a new constant type—for example, TYPE_RELATION_NEW.
  2. Include this relation type to getAvailableRelationTypes returned array.
  3. Select a new relation type when building a relation. For example, for Yves, you need to create a custom data provider:

class RelationNewDataProvider implements ProductRelationDataProviderInterface
     * @param array $parameters
     * @return array|\Generated\Shared\Transfer\StorageProductAbstractRelationTransfer[]
    public function buildTemplateData(array $parameters)
       //read data from Yves data store, return data for the view to render.

    * @return string
   public function getAcceptedType()
     return ProductRelationTypes::TYPE_RELATION_NEW; //this is the type which is mapped when rendering twig function, first argument.

Modify Yves

By default, the demoshop provides a carousel-type JavaScript component which renders related products. This component can be added with a twig product_relation (type, parameters, title, templatePath) function.

The type is a string that maps to a specific data provider and provides custom data when used, like a related product or upselling.

It accepts the following arguments:

  • Type which is defined in \Spryker\Shared\ProductRelation\ProductRelationTypes
  • String value (related-products, up-selling).
  • Parameter for the selected relation type
  • This value defers depending on the selected relation types
title Title that is displayed in the carousel component.
templatePath Path to the template for rendering the carousel component.
For example, @ProductRelation/partial/product_relation_carousel.twig.

Each type has a data provider. This data provider reads data from Redis and sends it to the template.

You can use RelatedProductsDataProvider or UpSellingDataProvider as sample implementations.