Skip to content
  • Documentation >
  • Product catalog >
  • Customize product catalog >
  • Customize product embed templates

Customize product embed templates

When a product is embedded in a RichText field, it is rendered using a Twig template. You can override the default templates to customize the appearance of embedded products.

Embed types

Six embed types exist in the system, each with its own template:

Embed type Description
product Block-level embed when the product is found and the user has access.
product_inline Inline embed when the product is found and the user has access.
product_denied Block-level embed when the user has no access to view the product data.
product_inline_denied Inline embed when the user has no access to view the product data.
product_not_found Block-level embed when the product code cannot be found.
product_inline_not_found Inline embed when the product code cannot be found.

Template variables

The following variables are available in the embed templates:

Variable Available in Description
product product, product_inline A ProductInterface object.
productCode product_denied, product_inline_denied, product_not_found, product_inline_not_found The product code string, used to identify the product that could not be loaded.
embedParams All block types Optional parameters set by the online editor, for example align or class properties

Override a template

The default templates are located in vendor/ibexa/product-catalog/src/bundle/Resources/views/themes/standard/product_catalog/richtext/embed/.

To override a template, create a file with the same name in your theme directory. For example, to override the block embed template for the standard theme, create a file in templates/themes/standard/product_catalog/richtext/embed/product.html.twig

A minimal product embed template looks as follows:

1
2
3
<div class="my-product-embed{% if embedParams.align is defined %} align-{{ embedParams.align }}{% endif %}{% if embedParams.class is defined %} {{ embedParams.class }}{% endif %}">
    <span class="my-product-embed__name">{{ product.name }}</span>
</div>

And a minimal inline embed template (product_inline.html.twig):

1
<span class="my-product-embed-inline{% if embedParams.class is defined %} {{ embedParams.class }}{% endif %}">{{ product.name }}</span>

Configure template paths

In addition to overriding the templates with Design engine, you can explicitly set the template path for any embed type in your SiteAccess configuration:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
ibexa:
    system:
        <siteaccess>:
            fieldtypes:
                ibexa_richtext:
                    embed:
                        product:
                            template: '@ibexadesign/product_catalog/richtext/embed/product.html.twig'
                        product_inline:
                            template: '@ibexadesign/product_catalog/richtext/embed/product_inline.html.twig'
                        product_denied:
                            template: '@ibexadesign/product_catalog/richtext/embed/product_denied.html.twig'
                        product_inline_denied:
                            template: '@ibexadesign/product_catalog/richtext/embed/product_inline_denied.html.twig'
                        product_not_found:
                            template: '@ibexadesign/product_catalog/richtext/embed/product_not_found.html.twig'
                        product_inline_not_found:
                            template: '@ibexadesign/product_catalog/richtext/embed/product_inline_not_found.html.twig'

Replace <siteaccess> with the name of your SiteAccess or SiteAccess group (for example, default).