如何在Twig模板的for循环中按指定变量对输出的div元素分组

• 先对购物车商品按lineItem.payload.reference字段完成预分组，再嵌套循环渲染即可，完整替换原有代码如下：

{# 第一步：按reference字段分组商品，空reference会归入uncategorized组 #}
{% set groupedLineItems = page.cart.lineItems|group(lineItem => lineItem.payload.reference ?? 'uncategorized') %}

{# 第二步：嵌套循环渲染分组 #}
{% for reference, groupItems in groupedLineItems %}
    {# 同reference商品的父包裹容器，可按需添加自定义样式类 #}
    <div class="offcanvas-reference-group-{{ reference }}">
        {% for lineItem in groupItems %}
            {% block component_offcanvas_cart_item %}
                {% sw_include '@Storefront/storefront/component/checkout/offcanvas-item.html.twig' %}
            {% endblock %}
        {% endfor %}
    </div>
{% endfor %}

• 低版本Twig兼容方案：如果环境不支持group过滤器，用手动分组逻辑替换第一步即可：

{% set groupedLineItems = {} %}
{% for lineItem in page.cart.lineItems %}
    {% set groupKey = lineItem.payload.reference ?? 'uncategorized' %}
    {% if groupKey not in groupedLineItems %}
        {% set groupedLineItems = groupedLineItems|merge({(groupKey): []}) %}
    {% endif %}
    {% set groupedLineItems = groupedLineItems|merge({
        (groupKey): groupedLineItems[groupKey]|merge([lineItem])
    }) %}
{% endfor %}

上述代码执行后，所有reference相同的商品div都会被包裹在同一个父div容器内，原有子模板的{{ lineItem.payload.reference }}类逻辑不受任何影响。

内容的提问来源于stack exchange，提问作者Jack