Mastering Product Property Sorting in Shopware 6 CMS Blocks with Twig

Mastering Product Property Sorting in Shopware 6 CMS Blocks with Twig

Shopware 6 offers immense flexibility for merchants to design engaging product pages through its Shopping Experiences (Erlebniswelten) and the powerful Twig templating engine. While displaying product information is straightforward, ensuring that data is presented in a structured and user-friendly manner often requires specific customizations. One common challenge arises when needing to display product properties in a specific order, such as alphabetically.

The Challenge: Unsorted Product Properties in CMS Blocks

A recent discussion on the Shopware forum highlighted this very issue. A merchant (cbm) wanted to display all property values for a specific group (identified by groupId) on their product page within a Twig-based CMS block. The goal was to have these property values sorted alphabetically (A-Z).

The initial Twig code used by the merchant looked like this:

{% for properties in page.product.properties %}
{% if properties.groupId =="85cc4d12ff2148e1a1770810551dc54b" %}
{{ properties.translated.name }}  |  
{% endif %}
{% endfor %}

While this code successfully filtered and displayed the desired property values, the output was not sorted alphabetically. This is because the for loop iterates through the properties in their default order, which is typically the order they are stored in the database or retrieved by the system, not necessarily an alphabetical one based on their names.

The Solution: Leveraging Twig's sort Filter

The solution, as quickly pointed out by another forum member (Max_Shop) with a link to the Twig sort filter documentation, lies in applying the appropriate Twig filter to manipulate the data before display. For sorting an array of strings or objects by a specific property, the sort filter is indispensable.

To achieve the desired alphabetical sorting of product property names, we can first collect the relevant property names into an array and then apply the sort filter to that array. This ensures that only the names are sorted, providing a clean and ordered list.

Here's how you can modify the Twig code to display sorted property values:

{% set propertyNames = [] %}
{% for property in page.product.properties %}
    {# Filter for the specific property group #}
    {% if property.groupId == '85cc4d12ff2148e1a1770810551dc54b' %}
        {# Add the translated name to our list #}
        {% set propertyNames = propertyNames|merge([property.translated.name]) %}
    {% endif %}
{% endfor %}

{# Now, iterate over the collected and sorted property names #}
{% for name in propertyNames|sort %}
    {{ name }} |
{% endfor %}

In this refined code:

• We initialize an empty array called propertyNames.
• We loop through all product properties (page.product.properties).
• Inside the loop, we apply the original filter (property.groupId == '85cc4d12ff2148e1a1770810551dc54b') to select only the properties from the desired group.
• For each matching property, we extract its translated name (property.translated.name) and add it to our propertyNames array using the merge filter.
• Finally, we iterate over the propertyNames array, but this time, we apply the |sort filter directly to the array before the loop. This ensures that the names are displayed in alphabetical order.

Why This Matters for Your Shopware Store

Presenting product information in a well-organized and predictable manner significantly enhances the user experience. Alphabetical sorting of properties makes it easier for customers to scan and find specific details, especially for products with many variations or technical specifications. This attention to detail can lead to increased customer satisfaction, reduced bounce rates, and a more professional appearance for your online store.

This simple yet effective Twig customization demonstrates the power and flexibility available within Shopware 6's templating system, allowing merchants and developers to fine-tune their storefronts to meet specific design and usability requirements.