Skip to content
  • Documentation >
  • Guide >
  • Content rendering >
  • Embed and list content >
  • Embed product

Embed product

To render a product embedded in an article in the form of a product card, first, you need to override the existing shop templates:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
ezdesign:
    design_list:
        my_design: [my_theme, eshop_base_theme, eshop_ui_base_theme, transaction_theme, checkout_base_theme]
    templates_theme_paths:
        eshop_base_theme:
            - '%kernel.project_dir%/vendor/ezsystems/ezcommerce-shop/src/Silversolutions/Bundle/EshopBundle/Resources/views'
        eshop_ui_base_theme:
            - '%kernel.project_dir%/vendor/ezsystems/ezcommerce-shop-ui/src/bundle/Resources/views/themes/standard'
        checkout_base_theme:
            - '%kernel.project_dir%/vendor/ezsystems/ezcommerce-checkout/src/bundle/Resources/views/themes/base_theme/'
        transaction_theme:
            - '%kernel.project_dir%/vendor/ezsystems/ezcommerce-transaction/src/Siso/Bundle/ShopFrontendBundle/Resources/views/themes/base_theme/'

Next, in the view configuration, override the default embed view for products:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
ezplatform:
    system:
        site:
            design: my_design
            content_view:
                embed:
                    product_card:
                        template: '@ezdesign/embed/product_card.html.twig'
                        match:
                            Identifier\ContentType: 'ses_product'

Create a templates/themes/my_theme/embed/product_card.html.twig template that renders the product's name, image and price wrapped in a link:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div class="product-card">
    <a href="{{ ez_path(location) }}">
        <div>
            {{ ez_render_field(content, 'ses_image_main', {
                'parameters': {
                    'alias': 'small'
                }
            }) }}
        </div>
        <div>
            <div>
                <h3>{{ ez_render_field(content, 'ses_name') }}</h3>
            </div>
            <div>
                {{ render(
                    controller(
                        'silver_eshop.catalog_controller:showCatalogElementPriceAction',
                        {
                            'catalogElementId': location.id,
                            'priceEngineContextId': 'product_detail',
                        }
                    )
                ) }}
            </div>
        </div>
    </a>
</div>

This template uses the Catalog controller to render the product price. To modify the way the controller displays the price, override the built-in Catalog/Subrequests/product.html.twig template to render the price only, without additional information such as stock.

To do it, create a templates/themes/my_theme/Catalog/Subrequests/product.html.twig file:

1
2
3
4
5
<div data-price-wrap="user">
    <div>
        {{ ses_render_price(catalogElement, catalogElement.price) }}
    </div>
</div>