OP-289: Add accordion with bundled products on order view

Author: hmfilar

src/Resources/views/Admin/Order/Show/Summary/_item.html.twig

@@ -17,8 +17,6 @@
 <tr>
     <td class="single line">
         {% include '@SyliusAdmin/Product/_info.html.twig' %}
-
-        {{ bitbag_render_product_bundle_order_items(item) }}
     </td>
     <td class="right aligned unit-price">
         {{ money.format(item.unitPrice, order.currencyCode) }}
@@ -50,3 +48,10 @@
         {{ money.format(item.total, order.currencyCode) }}
     </td>
 </tr>
+{% if product.bundle %}
+    <tr>
+        <td colspan="9">
+            {{ bitbag_render_product_bundle_order_items(item) }}
+        </td>
+    </tr>
+{% endif %}

src/Resources/views/Admin/Order/Show/_productBundleOrderItems.html.twig

@@ -1,35 +1,42 @@
-<h3>{{ 'bitbag_sylius_product_bundle.ui.products_in_bundle'|trans }}</h3>
 
-{% for item in items %}
-    {% set variant = item.productVariant %}
-    {% set product = variant.product %}
+<div class="ui accordion">
+    <div class="title">
+        <i class="dropdown icon"></i> <strong>{{ 'bitbag_sylius_product_bundle.ui.products_in_bundle'|trans }}</strong>
+    </div>
 
-    <div class="ui segment">
-        <div class="ui header">
-            {% include '@SyliusAdmin/Product/_mainImage.html.twig' with {'product': product, 'filter': 'sylius_admin_product_tiny_thumbnail'} %}
-            <div class="content">
-                <div class="sylius-product-name" title="{{ product.name }}">{{ product.name }}</div>
-                <span class="sub header sylius-product-variant-code" title="{{ variant.code }}">
-                {{ variant.code }}
-            </span>
-            </div>
-        </div>
-        {% if product.hasOptions() %}
-            <div class="ui horizontal divided list sylius-product-options">
-                {% for optionValue in variant.optionValues %}
-                    <div class="item" data-sylius-option-name="{{ optionValue.name }}">
-                        {{ optionValue.value }}
+    <div class="content">
+        {% for item in items %}
+            {% set variant = item.productVariant %}
+            {% set product = variant.product %}
+
+            <div class="ui segment">
+                <div class="ui header">
+                    {% include '@SyliusAdmin/Product/_mainImage.html.twig' with {'product': product, 'filter': 'sylius_admin_product_tiny_thumbnail'} %}
+                    <div class="content">
+                        <div class="sylius-product-name" title="{{ product.name }}">{{ product.name }}</div>
+                        <span class="sub header sylius-product-variant-code" title="{{ variant.code }}">
+                        {{ variant.code }}
+                    </span>
                     </div>
-                {% endfor %}
-            </div>
-        {% elseif variant.name is not null %}
-            <div class="ui horizontal divided list">
-                <div class="item sylius-product-variant-name">
-                    {{ variant.name }}
                 </div>
-            </div>
-        {% endif %}
+                {% if product.hasOptions() %}
+                    <div class="ui horizontal divided list sylius-product-options">
+                        {% for optionValue in variant.optionValues %}
+                            <div class="item" data-sylius-option-name="{{ optionValue.name }}">
+                                {{ optionValue.value }}
+                            </div>
+                        {% endfor %}
+                    </div>
+                {% elseif variant.name is not null %}
+                    <div class="ui horizontal divided list">
+                        <div class="item sylius-product-variant-name">
+                            {{ variant.name }}
+                        </div>
+                    </div>
+                {% endif %}
 
-        <p>{{ 'bitbag_sylius_product_bundle.ui.quantity'|trans }}: {{ item.quantity }}</p>
+                <p>{{ 'bitbag_sylius_product_bundle.ui.quantity'|trans }}: {{ item.quantity }}</p>
+            </div>
+        {% endfor %}
     </div>
-{% endfor %}
+</div>