How to Add a New Tab on the Product Edit Form

To add a new tab on the product edit form, you will need to override the templates for the navbar form PimEnrichBundle:Product:_navbar.html.twig and tab panes PimEnrichBundle:Product:_tab-panes.html.twig.

In order to do this, you will need to define a bundle that is a child of PimEnrichBundle (see here).

Tip

You can look at src/Acme/Bundle/EnrichBundle and app/AppKernel files.

Overriding the templates

To override these templates, you need to create 2 new files:

  • AcmeEnrichBundle/Resources/views/Product/_navbar.html.twig
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
# /src/Acme/Bundle/EnrichBundle/Resources/views/Product/_navbar.html.twig
{% set form_tabs=[] %}

{% if resource_granted('pim_enrich_product_edit_attributes') %}
    {% set form_tabs = form_tabs|merge(['Attributes']) %}
{% endif %}

{% if resource_granted('pim_enrich_product_categories_view') %}
    {% set form_tabs = form_tabs|merge(['Categories']) %}
{% endif %}

{% if resource_granted('pim_enrich_associations_view') %}
    {% set form_tabs = form_tabs|merge(['Associations']) %}
{% endif %}

{# Let's add a new tab here #}
{% set form_tabs = form_tabs|merge(['Custom tab']) %}

{% set form_tabs = form_tabs|merge(['Completeness', 'History']) %}
{{ elements.form_navbar(form_tabs) }}
  • AcmeEnrichBundle/Resources/views/Product/_tab-panes.html.twig
 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
31
32
33
34
35
36
37
# /src/Acme/Bundle/EnrichBundle/Resources/views/Product/_tab-panes.html.twig
<!-- Original content -->
{% set activeTab = false %}

{% if resource_granted('pim_enrich_product_edit_attributes') %}
    <div class="tab-pane active" id="attributes">
        {% include 'PimEnrichBundle:Product:_attributes.html.twig' %}
    </div>
    {% set activeTab = true %}
{% endif %}

{% if resource_granted("pim_enrich_product_categories_view") %}
    <div class="tab-pane{% if not activeTab %} active{% endif %}" id="categories">
        {% include 'PimEnrichBundle:Product:_associateCategories.html.twig' %}
    </div>
    {% set activeTab = true %}
{% endif %}

{% if resource_granted("pim_enrich_associations_view") %}
    {{ form_widget(form.associations, { 'attr': { 'class': 'hide' }}) }}
    <div class="tab-pane{% if not activeTab %} active{% endif %}" id="associations" data-url="{{ path('pim_enrich_associations', { id: product.id , dataLocale: dataLocale}) }}">
    </div>
    {% set activeTab = true %}
{% endif %}

<div class="tab-pane{% if not activeTab %} active{% endif %}" id="completeness" data-url="{{ path('pim_enrich_product_completeness', { id: product.id, dataLocale: dataLocale }) }}">
</div>

<div class="tab-pane" id="history" data-url="{{ path('pim_enrich_product_history', { id: product.id }) }}">
</div>

<!-- Custom content -->
<div class="tab-pane" id="custom-tab">
    <div>
        Some custom content here
    </div>
</div>

Note

Make sure you clear the cache to enable your templates to be loaded.

Warning

For the created tab pane to work, its id attribute must match the navbar title for this tab pane (transformed to lowercase and spaces replaced with dashes)

If you would like to have a different order in the tab panes, simply reorder the arguments passed to elements.form_navbar.