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

List products

To render a list of products, for example for the catalog of your site, you need to create a custom controller and a template.

In this example the controller renders all products that exist in the catalog.

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.

Add product list controller

Create a controller file in src/Controller/ProductListController that uses the ProductService to query for all products:

 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
28
29
30
<?php

namespace App\Controller;

use Ibexa\Contracts\ProductCatalog\Values\Product\ProductQuery;
use Ibexa\Contracts\ProductCatalog\ProductServiceInterface;
use Ibexa\Core\MVC\Symfony\View\View;

final class ProductListController
{
    private ProductServiceInterface $productService;

    public function __construct(ProductServiceInterface $productService)
    {
        $this->productService = $productService;
    }

    public function showProductsAction(View $view): View
    {
        $query = new ProductQuery();

        $result = $this->productService->findProducts($query);

        $view->addParameters([
            'products' => $result,
        ]);

        return $view;
    }
}

Register the controller as a service:

1
2
3
services:
    App\Controller\ProductListController:
        tags: ['controller.service_arguments']

Content view configuration

Next, add view configuration to identify when to display the product list. In this example you match on the ses_productcatalog Content Type, which is the Content Type of the built-in Product Catalog.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
ibexa:
    system:
        site:
            content_view:
                full:
                    catalog:
                        template: 'full/catalog.html.twig'
                        match:
                            Identifier\ContentType: 'ses_productcatalog'
                        controller: App\Controller\ProductListController::showProductsAction

Template

Finally, create a template for rendering the product.

The following template renders the product name, price, main image, and an "Add to basket" button.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<h1>Products</h1>

{% for product in products %}
    <div>
        <h4><a href="{{  path('ibexa.url.alias', {'contentId': product.content.contentInfo.id}) }}">{{ (product.name) }}</a></h4>
        {{ ibexa_render_field(product.content, 'image', {
            'parameters': {
                'alias': 'small'
            }
        }) }}
        Price: {{ product.price }}
        <form method="POST" action="{{ path('ibexa.commerce.basket.add') }}">
            <input type="hidden" name="ses_basket[0][sku]" value="{{ product.code }}"/>
            <input type="hidden" name="ses_basket[0][quantity]" value="1"/>
            <button>Add to basket</button>
        </form>
    </div>
{% endfor %}

Tip

For more information about rendering product details, see Render product.

Caution

To enable adding a product to basket, you must first configure all necessary information for the product. See Enable purchasing products for more information.