Skip to content
  • Documentation >
  • Commerce >
  • Storefront >
  • Extend Storefront

Extend Storefront

Built-in menus

With the ibexa\storefront package come the following built-in menus:

Item Value Description
Breadcrumbs - Renders breadcrumbs for Content Tree Root, Taxonomy Entry, Product, User settings and User settings group
Taxonomy - It can render a menu for product categories or tags
Currency currency_menu Renders a menu to change the active currency
Language language_menu Renders a menu to change the active language
Region region_menu Renders a menu to change the active region

Usage example:

1
2
3
{% set currency_menu = knp_menu_get('ibexa_storefront.menu.currency') %}

{{ knp_menu_render(currency_menu) }}

To modify the items in the menu, you need to use an event subscriber. This subscriber replaces the URI under the Home link.

Create an event subscriber in src/EventSubscriber/BreadcrumbsMenuSubscriber.php:

 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
<?php

declare(strict_types=1);

namespace App\EventSubscriber;

use Ibexa\Bundle\Storefront\Menu\Builder\BreadcrumbsMenuBuilder;
use Ibexa\Contracts\Storefront\Menu\Event\ConfigureMenuEvent;
use Symfony\Component\EventDispatcher\EventSubscriberInterface;

class BreadcrumbsMenuSubscriber implements EventSubscriberInterface
{
    public static function getSubscribedEvents()
    {
        return [
            BreadcrumbsMenuBuilder::PRODUCT_MENU => ['onBreadcrumbsMenuConfigure', 0],
        ];
    }

    public function onBreadcrumbsMenuConfigure(ConfigureMenuEvent $event)
    {
        $menu = $event->getMenu();

        // Replace link to home with link to product catalog root
        $menu->getChild('location_2')->setUri('/product-catalog');
    }
}

Next, create the templates/themes/storefront/storefront/knp_menu/breadcrumbs.html.twig template:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{% extends 'knp_menu.html.twig' %}

{% block item %}
    {% if item.displayed %}
        {%- set attributes = item.attributes %}
        {% import _self as knp_menu %}
        <li{{ knp_menu.attributes(attributes) }}>
            {%- if item.uri is not empty and (not matcher.isCurrent(item) or options.currentAsLink) %}
                {{ block('linkElement') }}
            {%- else %}
                {{ block('spanElement') }}
            {%- endif %}
        </li>
    {% endif %}
{% endblock %}

{% block linkElement %}
    {%- set classes = ['breadcrumb_link'] -%}

    <a href="{{ item.uri }}" {{ _self.attributes({ class: classes|join(' ') }) }}>
        {{ block('label') }}
    </a>

{% endblock %}

Next, extend the templates/themes/storefront/storefront/product.html.twig template to include the breadcrumbs:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
{% extends no_layout == true ? view_base_layout : page_layout %}

{% trans_default_domain 'storefront' %}

{% block content %}
    {% set breadcrumbs_menu = knp_menu_get('ibexa_storefront.menu.breadcrumbs.product', [], {
        'product': product        
    }) %}

    {{ knp_menu_render(breadcrumbs_menu, {
        template: '@ibexadesign/storefront/knp_menu/breadcrumbs.html.twig',
    }) }}

    {% include '@ibexadesign/storefront/component/product_view.html.twig' %}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
{% endblock %}

Taxonomy menu

You can build a taxonomy menu for, for example, product categories or tags.

See the usage example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
{% set categories_menu = knp_menu_get(
    'ibexa_storefront.menu.taxonomy', 
    [], 
    {
        parent: category,
        depth: 3
    }
) %}

{{ knp_menu_render(categories_menu) }}

It takes the following parameters:

Name Type Default
parent \Ibexa\Contracts\Taxonomy\Value\TaxonomyEntry The root entry of the specified taxonomy.
depth int Default: 1
taxonomy_name string product_categories

Create menu items

\Ibexa\Contracts\Storefront\Menu\ItemFactoryInterface provides convenient methods to build menu item based on repository objects, including:

  • Content
  • Content ID
  • Location
  • Location ID
  • Taxonomy Entry
  • Product