- 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:
| 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:
| <div data-price-wrap="user">
<div>
{{ ses_render_price(catalogElement, catalogElement.price) }}
</div>
</div>
|