优化购物车列表样式

app/design/frontend/Joshine/breeze/Magento_Checkout/web/template/minicart/item/default.html

@@ -31,14 +31,33 @@
                 <!-- /ko -->
                 <!-- /ko -->
             </strong>
             </strong>
 
 
-            <div class="product-item-pricing">
-                <!-- ko if: canApplyMsrp -->
+            <!-- ko if: options.length -->
+            <div class="product options" data-mage-init='{"collapsible":{"openedState": "active", "saveState": false}}'>
+                <span data-role="title" class="toggle"><!-- ko i18n: 'See Details' --><!-- /ko --></span>
 
 
-                <div class="details-map">
-                    <span class="label" data-bind="i18n: 'Price'"></span>
-                    <span class="value" data-bind="i18n: 'See price before order confirmation.'"></span>
+                <div data-role="content" class="content">
+                    <strong class="subtitle"><!-- ko i18n: 'Options Details' --><!-- /ko --></strong>
+                    <dl class="product options list">
+                        <!-- ko foreach: { data: options, as: 'option' } -->
+                        <dt class="label"><!-- ko text: option.label --><!-- /ko --></dt>
+                        <dd class="values">
+                            <!-- ko if: Array.isArray(option.value) -->
+                                <span data-bind="html: $parents[1].getOptionValueUnsanitizedHtml(option.value.join('<br/>'))"></span>
+                            <!-- /ko -->
+                            <!-- ko if: (!Array.isArray(option.value) && ['file', 'html'].includes(option.option_type)) -->
+                                <span data-bind="html: $parents[1].getOptionValueUnsanitizedHtml(option.value)"></span>
+                            <!-- /ko -->
+                            <!-- ko if: (!Array.isArray(option.value) && !['file', 'html'].includes(option.option_type)) -->
+                            <span data-bind="text: option.value"></span>
+                            <!-- /ko -->
+                        </dd>
+                        <!-- /ko -->
+                    </dl>
                 </div>
                 </div>
-                <!-- /ko -->
+            </div>
+            <!-- /ko -->
+
+            <div class="product-item-pricing">
                 <!-- ko ifnot: canApplyMsrp -->
                 <!-- ko ifnot: canApplyMsrp -->
                 <!-- ko foreach: $parent.getRegion('priceSidebar') -->
                 <!-- ko foreach: $parent.getRegion('priceSidebar') -->
                     <!-- ko template: {name: getTemplate(), data: item.product_price, as: 'price'} --><!-- /ko -->
                     <!-- ko template: {name: getTemplate(), data: item.product_price, as: 'price'} --><!-- /ko -->
@@ -46,8 +65,6 @@
                 <!-- /ko -->
                 <!-- /ko -->
 
 
                 <div class="details-qty qty">
                 <div class="details-qty qty">
-                    <label class="label" data-bind="i18n: 'Qty', attr: {
-                           for: 'cart-item-'+item_id+'-qty'}"></label>
                     <input data-bind="attr: {
                     <input data-bind="attr: {
                            id: 'cart-item-'+item_id+'-qty',
                            id: 'cart-item-'+item_id+'-qty',
                            'data-cart-item': item_id,
                            'data-cart-item': item_id,
@@ -56,7 +73,21 @@
                            }, value: qty"
                            }, value: qty"
                            type="number"
                            type="number"
                            size="4"
                            size="4"
-                           class="item-qty cart-item-qty"/>
+                           class="item-qty cart-item-qty"/> *
+
+                    <div class="details-map">
+                        <span class="label" data-bind="i18n: 'Price'"></span>
+                        <span class="value" data-bind="i18n: 'See price before order confirmation.'"></span>
+                    </div>
+                </div>
+            </div>
+
+            <div class="product actions">
+                <div class="secondary">
+                    <a href="#" data-bind="attr: {'data-cart-item': item_id, title: $t('Remove item')}"
+                       class="action delete">
+                        <span data-bind="i18n: 'Remove'"> X </span>
+                    </a>
                 </div>
                 </div>
             </div>
             </div>
         </div>
         </div>