HowTo - Build Your Own Product Relation Type

Edit on GitHub
This tutorial provides step-by-step instruction for the process of building your own product relation type.

These instructions are related to Yves and Zed, so both applications should be updated accordingly in order to allow your product relation type.


To modify Zed, do the following:

  1. Create new relation type in \Spryker\Shared\ProductRelation\ProductRelationTypes as a new constant type.
For example:


  1. Include this relation type to getAvailableRelationTypes returned array.
  2. After this you can select a new relation type when building relation. For example for Yves you need to create 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 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.


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 which maps to a specific data provider and provides custom data when used, like related-product, up-selling.

It accepts the following arguments:

Argument name Transcription
  • Is the type which is defined in \Spryker\Shared\ProductRelation\ProductRelationTypes
  • String value (related-products, up-selling).
  • Is the parameter for the selected relation type
  • This value defers depending on the selected relation types
title Is the title displayed in the carousel component.
templatePath Is the 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.