[Design-v2] - cart list

src/CoreShop/Bundle/FrontendBundle/Resources/translations/messages.de.yaml

@@ -12,6 +12,7 @@ coreshop.ui.buy: 'Kaufen'
 coreshop.ui.carrier: 'Spedition'
 coreshop.ui.carrier.standard: 'Standard Spedition'
 coreshop.ui.cart: 'Warenkorb'
+coreshop.ui.cart_name: 'Name des Warenkorbs'
 coreshop.ui.cart_empty: 'Ihr Warenkorb ist leer.'
 coreshop.ui.categories: 'Kategorien'
 coreshop.ui.checkout: 'Checkout'

src/CoreShop/Bundle/FrontendBundle/Resources/translations/messages.en.yaml

@@ -12,6 +12,7 @@ coreshop.ui.buy: 'Buy'
 coreshop.ui.carrier: 'Carrier'
 coreshop.ui.carrier.standard: 'Default Carrier'
 coreshop.ui.cart: 'Cart'
+coreshop.ui.cart_name: 'Cart Name'
 coreshop.ui.cart_empty: 'Your cart is empty.'
 coreshop.ui.categories: 'Categories'
 coreshop.ui.checkout: 'Checkout'

src/CoreShop/Bundle/FrontendBundle/Resources/translations/messages.it.yaml

@@ -11,6 +11,7 @@ coreshop.ui.buy: 'Acquista'
 coreshop.ui.carrier: 'Vettore'
 coreshop.ui.carrier.standard: 'Vettore standard'
 coreshop.ui.cart: 'Carrello'
+coreshop.ui.cart_name: 'Nome del carrello'
 coreshop.ui.cart_empty: 'Il tuo carrello è vuoto.'
 coreshop.ui.categories: 'Categorie'
 coreshop.ui.checkout: 'Checkout'

src/CoreShop/Bundle/FrontendBundle/Resources/views/Cart/_widget.html.twig

@@ -25,15 +25,6 @@
                                     </div>
                                 </div>
                             </li>
-                            {% if is_granted('CORESHOP_STORAGE_LIST_MULTI_LIST_ORDER') %}
-                                <li>
-                                    <p class="text-right btn-block1">
-                                        <a href="{{ path('coreshop_cart_list') }}">
-                                            {{ 'coreshop.ui.cart_list'|trans }}
-                                        </a>
-                                    </p>
-                                </li>
-                            {% endif %}
                         {% endfor %}
                     </ul>
                 </div>

src/CoreShop/Bundle/FrontendBundle/Resources/views/Cart/created_named.html.twig

@@ -4,15 +4,23 @@
 {% block content %}
     {% include '@CoreShopFrontend/Common/flash_messages.html.twig' %}
 
-    {{ form_start(form) }}
-        {{ form_row(form.name, coreshop_test_form_attribute('cart-name')) }}
-
-        <div class="form-group">
-            <button type="submit" class="btn btn-success" {{ coreshop_test_html_attribute('cart-create-button') }} >
-                {{ 'coreshop.ui.save'|trans }}
-            </button>
+    <div class="row">
+        <div class="col-12 col-lg-6 col-xl-4">
+            <div class="card bg-light border-0">
+                <h4 class="px-3 pt-3 mb-0">
+                    {{ 'coreshop.ui.cart_name'|trans }}
+                </h4>
+                <div class="card-body">
+                    {{ form_start(form) }}
+                        <div class="input-group mt-3 mt-md-0">
+                            {{ form_widget(form.name, coreshop_test_form_attribute('cart-name')) }}
+                            <button type="submit" class="d-flex align-items-center justify-content-center btn btn-secondary btn btn-secondary" {{ coreshop_test_html_attribute('cart-create-button') }} >
+                                {{ 'coreshop.ui.save'|trans }}
+                            </button>
+                        </div>
+                    {{ form_end(form) }}
+                </div>
+            </div>
         </div>
-
-    {{ form_end(form) }}
-
+    </div>
 {% endblock %}

src/CoreShop/Bundle/FrontendBundle/Resources/views/Cart/list_storage_lists.html.twig

@@ -3,73 +3,84 @@
 
 {% block content %}
 
-    <div id="main-container" class="container p-0">
+    <section>
         <h2 class="main-heading text-center">
             {{ 'coreshop.ui.carts'|trans }}
         </h2>
 
-        <a href="{{ path('coreshop_cart_create_named') }}" class="btn btn-secondary mb-3">
-            Create New Cart
-        </a>
+        <div class="d-flex">
+            <a href="{{ path('coreshop_cart_create_named') }}" class="btn btn-secondary mb-3 ms-auto">
+                Create New Cart
+            </a>
+        </div>
 
-        {% if form is defined %}
+        {% if form is defined and coreshop.cart.id %}
             {{ form_start(form) }}
-                <table class="table hcart cart-items">
-                    <thead>
-                        <th></th>
-                        <th>{{ 'coreshop.ui.cart.name'|trans }}</th>
-                        <th class="text-right">{{ 'coreshop.ui.total'|trans }}</th>
-                    </thead>
-                    <tbody>
+
+                <div class="row">
                     {% for key, list_form in form.list %}
                         {% set list = form.list.vars.choices[key].data %}
                         {% set cart_name = list.name ?: 'My Cart' %}
-
-                        <tr {{ coreshop_test_html_attribute('named-cart', cart_name) }}>
-                            <td>
-                                {{ form_widget(list_form, coreshop_test_form_attribute('cart', cart_name)|coreshop_merge_recursive({'label': false})) }}
-                            </td>
-                            <td {{ coreshop_test_html_attribute('name') }}>
-                                {{ cart_name }}
-                            </td>
-
-                            <td class="text-right" {{ coreshop_test_html_attribute('total') }}>
-                                {{ currency.convertAndFormat(list.total) }}
-                            </td>
-                        </tr>
+                        <div class="col-6 col-md-4 col-lg-3 col-xl-2">
+                            <div class="card flex-grow-1">
+                                <div class="card-body">
+                                    <div class="d-flex gap-2 mb-2">
+                                        <span>{{ form_widget(list_form, coreshop_test_form_attribute('cart', cart_name)|coreshop_merge_recursive({'label': false,'attr': {'class': 'form-check-input'}})) }}</span>
+                                        <span>{{ cart_name }}</span>
+                                    </div>
+                                    <div><strong>{{ 'coreshop.ui.total'|trans }}: </strong>{{ currency.convertAndFormat(list.total) }}</div>
+                                </div>
+                            </div>
+                        </div>
                     {% endfor %}
-                    </tbody>
-                </table>
-                {{ form_widget(form.selectList, coreshop_test_form_attribute('cart-select-button')) }}
-                {{ form_widget(form.deleteList, coreshop_test_form_attribute('cart-delete-button')) }}
+                </div>
+                <div class="d-flex gap-2 mt-3">
+                    {{ form_widget(form.selectList, {
+                        'attr': {
+                            'class': 'btn btn-primary'
+                        },
+                        'label_html': true,
+                        'label': '<i class="bi bi-cart"></i> Select'
+                    }) }}
+                    {{ form_widget(form.deleteList,  {
+                        'attr': {
+                            'class': 'btn btn-link'
+                        },
+                        'label_html': true,
+                        'label': '<i class="bi bi-trash"></i> Delete'
+                    }) }}
+                </div>
             {{ form_widget(form._token) }}
             {{ form_end(form) }}
-        {% else %}
-            <div class="table-responsive compare-table">
-                <table class="table table-bordered">
-                    <thead>
-                    <tr>
-                        <td>{{ 'coreshop.ui.cart.name'|trans }}</td>
-                        <td>{{ 'coreshop.ui.date'|trans }}</td>
-                        <td>{{ 'coreshop.ui.total'|trans }}</td>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    {% for list in lists %}
-                        <tr>
-                            <td>{{ list.name ?: 'My Cart' }}</td>
-                            <td>
-                                {{ list.orderDate|date("d.m.Y") }}
-                            </td>
-                            <td>
-                                {{ currency.format(list.convertedTotal, list.currency.isoCode) }}
-                            </td>
-                        </tr>
-                    {% endfor %}
-                    </tbody>
-                </table>
-            </div>
         {% endif %}
-    </div>
+        {#
+                {% else %}
+                    <div class="table-responsive compare-table">
+                        <table class="table table-bordered">
+                            <thead>
+                            <tr>
+                                <td>{{ 'coreshop.ui.cart.name'|trans }}</td>
+                                <td>{{ 'coreshop.ui.date'|trans }}</td>
+                                <td>{{ 'coreshop.ui.total'|trans }}</td>
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {% for list in lists %}
+                                <tr>
+                                    <td>{{ list.name ?: 'My Cart' }}</td>
+                                    <td>
+                                        {{ list.orderDate|date("d.m.Y") }}
+                                    </td>
+                                    <td>
+                                        {{ currency.format(list.convertedTotal, list.currency.isoCode) }}
+                                    </td>
+                                </tr>
+                            {% endfor %}
+                            </tbody>
+                        </table>
+                    </div>
+                {% endif %}
+        #}
+    </section>
 
 {% endblock %}

src/CoreShop/Bundle/FrontendBundle/Resources/views/Header/_widgetbar.html.twig

@@ -7,12 +7,17 @@
             {{ render(controller('CoreShop\\Bundle\\FrontendBundle\\Controller\\SearchController::widgetAction')) }}
         </div>
         <div class="d-flex align-items-center">
-            {% include '@CoreShopFrontend/Customer/_userwidget.html.twig' %}
+            {% if is_granted('CORESHOP_STORAGE_LIST_MULTI_LIST_ORDER') %}
+                <a href="{{ path('coreshop_cart_list') }}" class="d-flex align-items-center text-decoration-none text-body gap-2">
+                    <i class="bi bi-list-ul"></i> <span>{{ 'coreshop.ui.cart_list'|trans }}</span>
+                </a>
+            {% endif %}
             {% if is_granted('CORESHOP_CART') %}
-                <div class="col-md-3 p-sm-2">
+                <div class="col-md-3 p-sm-2 me-sm-2">
                    {{ render(controller('CoreShop\\Bundle\\FrontendBundle\\Controller\\CartController::widgetAction')) }}
                 </div>
             {% endif %}
+            {% include '@CoreShopFrontend/Customer/_userwidget.html.twig' %}
         </div>
     </div>
 </nav>