购物车页优化

2ec5cd86 · dhn · d1a7b8c1 · 2ec5cd86 · 2ec5cd86 · 2ec5cd86
Commit 2ec5cd86 authored Apr 26, 2023 by dhn
4 changed files
--- a/app/design/frontend/Joshine/breeze/Magento_Checkout/templates/cart/coupon.phtml
+++ b/app/design/frontend/Joshine/breeze/Magento_Checkout/templates/cart/coupon.phtml
@@ -33,15 +33,13 @@ $hasCouponCode = (bool) strlen($block->getCouponCode());
 >
 -->
 <div class="block discount"
-     id="block-discount"
+     id="block-discount">
-     data-mage-init='{"collapsible":{"active":"true", "openedState": "active", "saveState": false}}'
->
    <!--
    <div class="title" data-role="title" aria-controls="block-summary" role="tab" aria-selected="true" aria-expanded="true" tabindex="0">
        <strong id="block-shipping-coupon" role="heading" aria-level="2"><?= __("Coupon Code") ?> </strong>
    </div>
    -->
-    <div class="content" data-role="content" aria-labelledby="block-discount-heading" style="display: block;">
+    <div class="content" style="display: block;">
        <form id="discount-coupon-form"
              action="<?= $block->escapeUrl($block->getUrl('checkout/cart/couponPost')) ?>"
              method="post"
@@ -52,7 +50,6 @@ $hasCouponCode = (bool) strlen($block->getCouponCode());
            <div class="fieldset coupon<?= $hasCouponCode ? ' applied' : '' ?>">
                <input type="hidden" name="remove" id="remove-coupon" value="0" />
                <div class="field" style="width: 70%;">
-                    <label for="coupon_code" class="label"><span><?= $block->escapeHtml(__('Enter discount code')) ?></span></label>
                    <div class="control" style="float: left;margin-top: 0px;width: 100%;">
                        <input type="text"
                               class="input-text"
@@ -66,7 +63,7 @@ $hasCouponCode = (bool) strlen($block->getCouponCode());
                        />
                    </div>
                </div>
-                <div class="actions-toolbar" style="clear: none;">
+                <div class="actions-toolbar" style="clear: none;margin-top: 1.25rem;margin-bottom: 0px;">
                    <?php if (!$hasCouponCode) :?>
                    <div class="primary">
                        <button class="action apply primary" style="padding: 0.5rem 1rem;width:100%;background-color: #444;" type="button" value="<?= $block->escapeHtmlAttr(__('Apply Discount')) ?>">

--- a/app/design/frontend/Joshine/breeze/Magento_Checkout/templates/cart/form.phtml
+++ b/app/design/frontend/Joshine/breeze/Magento_Checkout/templates/cart/form.phtml
@@ -71,7 +71,6 @@ $mobileDetect = $objectManager->get(\Joshine\Common\Lib\MobileDetect\MobileDetec
            display:none;
        }
        .cart-title{
-            order: -4;
            margin-top:50px;
            color: #444;
            width: 100%!important;
@@ -98,8 +97,8 @@ $mobileDetect = $objectManager->get(\Joshine\Common\Lib\MobileDetect\MobileDetec
            z-index: 1;
            border-top: 1px solid #fff;
        }
        .cart-title{
-            order: -4;
            margin-top: 1rem;
            color: #444;
            width: 100%!important;
@@ -108,7 +107,15 @@ $mobileDetect = $objectManager->get(\Joshine\Common\Lib\MobileDetect\MobileDetec
            font-size: 26px;
        }
    }
+    .cart-top{
+        order: -4;
+        text-align: center;
+        width:100%!important;
+    }
+    .msg-content{
+        margin: 2rem 0px;
+        color: #AB3F3F;
+    }
    .item-options-line span{
        display: inline-block;
    }
@@ -119,9 +126,6 @@ $mobileDetect = $objectManager->get(\Joshine\Common\Lib\MobileDetect\MobileDetec
        .cart-container .cart.table-wrapper .item-options {
            min-width: 100px;
        }
-        .product-image-photo{
-            border:1px solid #ddd;
-        }
    }
    .is_mobile .item-info{
@@ -160,7 +164,7 @@ $mobileDetect = $objectManager->get(\Joshine\Common\Lib\MobileDetect\MobileDetec
        font-size: 16px;
        font-weight: 400;
        font-style: normal;
-        color: #5c5c5c;
+        color: #000000;
        -webkit-transition: color .2s ease-in-out;
        transition: color .2s ease-in-out;
        -webkit-box-orient: vertical;
@@ -259,11 +263,9 @@ $mobileDetect = $objectManager->get(\Joshine\Common\Lib\MobileDetect\MobileDetec
        .price-final_price .price{
            font-size: 18px;
        }
+    }
+    .is_mobile .item-info:first-child{
-        .is_mobile .item-info:first-child{
+        margin:0px 0px 3rem 0;
-            margin:0px 0px 3rem 0;
-        }
    }
    .item-info-right,.item-info-left{
        padding-bottom:0px;
@@ -277,40 +279,18 @@ $mobileDetect = $objectManager->get(\Joshine\Common\Lib\MobileDetect\MobileDetec
 </style>
 <?php $mergedCells = ($this->helper(Magento\Tax\Helper\Data::class)->displayCartBothPrices() ? 2 : 1); ?>
 <?= $block->getChildHtml('form_before') ?>
-<h1 class="cart-title">Shipping Cart</h1>
+<div class="cart-top">
-<?php if (!$is_free_shipping): ?>
+    <h1 class="cart-title">Shipping Cart</h1>
-    <div class="free-shipping-area area-blk">
+    <?php if (!$is_free_shipping): ?>
-        <img alt="" class="cart-icon" src="/media/wysiwyg/free-shipping-cart.png">
+        <div class="msg-content">
-        <div class="content-wrap">
-            <div class="free_message">
-                <div class="msg-title">
-                    <p style="font-weight: bold;"><?= $block->escapeHtml(__('Shipping Fee')) ?> </p>
-                </div>
-                <div class="msg-content">
-                    <?= $block->escapeHtml(__('Spend')) ?> <span style="color:#EB001B;font-size: 16px;font-weight: bold;"><?= $block->escapeHtml(
-                            $this->helper(Magento\Checkout\Helper\Data::class)->formatPrice($difference_price),
-                            ['span']
-                        )  ?></span> <?= $block->escapeHtml(__('more and get')) ?> <span style="font-weight: bold;"><?= $block->escapeHtml(__('FREE SHIPPING')) ?></span>!
-                </div>
-            </div>
-        </div>
-    </div>
-<?php endif ?>
-<?php if (!$is_free_shipping): ?>
+            <?= $block->escapeHtml(__('Spend')) ?> <?= $block->escapeHtml(
-    <div class="free-shipping-area area-blk-notitle">
+                $this->helper(Magento\Checkout\Helper\Data::class)->formatPrice($difference_price),
-        <div class="content-wrap">
+                ['span']
-            <div class="free_message">
+            )  ?> <?= $block->escapeHtml(__('more and get free shipping!')) ?>
-                <div class="msg-content">
-                    <?= $block->escapeHtml(__('Spend')) ?> <span style="color:#EB001B;font-size: 18px;"><?= $block->escapeHtml(
-                            $this->helper(Magento\Checkout\Helper\Data::class)->formatPrice($difference_price),
-                            ['span']
-                        )  ?></span><?= $block->escapeHtml(__(' more and get')) ?>  <span style="font-weight: bold;"><?= $block->escapeHtml(__('FREE SHIPPING')) ?></span>
-                </div>
-            </div>
        </div>
-    </div>
+    <?php endif ?>
-<?php endif ?>
+</div>
 <form action="<?= $block->escapeUrl($block->getUrl('checkout/cart/updatePost')) ?>"
      method="post"

--- a/app/design/frontend/Joshine/breeze/Magento_Checkout/templates/cart/methods.phtml
+++ b/app/design/frontend/Joshine/breeze/Magento_Checkout/templates/cart/methods.phtml
@@ -28,7 +28,7 @@
 <?php if ($block->getContinueShoppingUrl()): ?>
-<div class="continue-content" style="height:40px;">
+<div class="continue-content" style="height:40px;margin-top: 1rem;">
    <button class="action continue" style="width:100%;" onclick="window.location.href='<?= $block->escapeUrl($block->getContinueShoppingUrl()) ?>'">Continue shopping</button>
 </div>

--- a/app/design/frontend/Joshine/breeze/web/css/_custom.less
+++ b/app/design/frontend/Joshine/breeze/web/css/_custom.less
@@ -918,11 +918,20 @@ p.shopbycate-title {
  background-color: rgba(0,0,0,.03);
  padding-bottom: 1rem;
 }
+.checkout-cart-index #discount-coupon-form .fieldset{
+  margin-bottom:0px;
+}
+.checkout-cart-index #block-discount .content{
+  padding:0px 1rem;
+}
 @media (max-width: 768px){
  .checkout-cart-index .cart-container .cart-summary {
    margin:0;
    background-color: #ffffff;
  }
+  .checkout-cart-index #block-discount .content{
+    padding:0;
+  }
  .checkout-index-index .method-content .method-msg{
    padding: 5px 0 5px 2.2rem;
    font-size: 12px;