- 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:
| 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.
| 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.