Skip to content
  • Documentation >
  • Guide >
  • Content rendering >
  • Render content >
  • Render product

Render a product

To customize the template for a product, first, you need to prepare a content view configuration.

Note

By default, the anonymous user does not have permissions to view products. To change this, add the Product/View Policy to the Anonymous Role.

To match all products, you can use the ProductBased\IsProduct view matcher.

1
2
3
4
5
6
7
8
9
ibexa:
    system:
        site:
            content_view:
                full:
                    product:
                        template: 'full/product.html.twig'
                        match:
                            '@Ibexa\Contracts\ProductCatalog\ViewMatcher\ProductBased\IsProduct': ~

This matching applies to Content items that are also products.

This enables you to access both content properties and product properties in the template. You can use the ibexa_get_product Twig filter to get the product object from a Content item:

1
2
3
4
{% set product = content|ibexa_get_product %}

<h1>{{ ibexa_content_name(content) }}</h1>
<p>Code: <code>{{ product.code }}</code></p>

Attributes

You can access all attributes of a product with product.attributes:

1
2
3
4
5
<ol>
    {% for attribute in product.attributes %}
        <li>{{ attribute.getAttributeDefinition().getName }}: {{ attribute|ibexa_format_product_attribute }}</li>
    {% endfor %}
</ol>

The ibexa_format_product_attribute filter formats the attributes, including number formatting. For example, it renders human-readable labels instead of identifiers and applies correct decimal digit separators for the locale.

Price

You can access the product's price information from the product object:

1
<p>Price: {{ product.price }}</p>

Add to basket

The ibexa.commerce.basket.add route enables you to create an "Add to basket" button. To make the button fully functional, you must first configure all necessary information for the product, otherwise the product will not be added to basket. See Enable purchasing products for more information.

1
2
3
4
5
6
<form method="POST" action="{{ path('ibexa.commerce.basket.add') }}">
    <input type="hidden" name="ses_basket[0][sku]" value="{{ product.code }}"/>
    <input type="number" name="ses_basket[0][quantity]" value="1"/>

    <button>Add to basket</button>
</form>