优化支付页面

472ff0e0 · lmf · 164c858d · 472ff0e0 · 472ff0e0 · 472ff0e0
Commit 472ff0e0 authored Nov 08, 2022 by lmf
7 changed files
--- a/app/design/frontend/Joshine/breeze/Magento_Checkout/layout/checkout_index_index.xml
+++ b/app/design/frontend/Joshine/breeze/Magento_Checkout/layout/checkout_index_index.xml
--- a/app/design/frontend/Joshine/breeze/Magento_Checkout/templates/onepage.phtml
+++ b/app/design/frontend/Joshine/breeze/Magento_Checkout/templates/onepage.phtml
@@ -178,9 +178,6 @@
        width: 100%;
        box-sizing: border-box;
    }
-    .opc-block-summary .title{
-        font-weight: 600;
-    }
    .product-item-details{
        color: #666666;
        font-size: 14px;
@@ -259,7 +256,7 @@
        }
    }
    .teliphone_number{width:100% !important;;}
-    @media(min-width: 768px){
+    @media(min-width: 1024px){
        .page-title-wrapper~.columns{
            margin-top:0;
        }
@@ -276,7 +273,6 @@
            transform: perspective(1px) translateZ(0);
            box-shadow: 0 0 1px rgb(0 0 0 / 0%);
            border-radius: 0px;
-            background-color: #222222;
            box-shadow: none;
            color: #ffffff;
            display: inline-block;
@@ -299,6 +295,8 @@
            -webkit-transition: all 0.4s ease;
            width: 100%;
            height: 50px;
+            background: #ffa800;
+            font-size: 20px;
        }
        .opc-progress-bar{
            justify-content: center;

--- a/app/design/frontend/Joshine/breeze/Magento_OfflinePayments/web/template/payment/banktransfer.html
+++ b/app/design/frontend/Joshine/breeze/Magento_OfflinePayments/web/template/payment/banktransfer.html
+<!--
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+ -->
+<div class="payment-method" data-bind="css: {'_active': (getCode() == isChecked())}">
+    <div class="payment-method-title field choice">
+        <input type="radio"
+               name="payment[method]"
+               class="radio"
+               data-bind="attr: {'id': getCode()}, value: getCode(), checked: isChecked, click: selectPaymentMethod, visible: isRadioButtonVisible()" />
+        <label data-bind="attr: {'for': getCode()}" class="label"><span data-bind="text: getTitle()"></span></label>
+    </div>
+    <div class="payment-method-content">
+        <!-- ko foreach: getRegion('messages') -->
+        <!-- ko template: getTemplate() --><!-- /ko -->
+        <!--/ko-->
+        <div class="payment-method-billing-address">
+            <!-- ko foreach: $parent.getRegion(getBillingAddressFormName()) -->
+            <!-- ko template: getTemplate() --><!-- /ko -->
+            <!--/ko-->
+        </div>
+        <p data-bind="html: getInstructions()"></p>
+        <div class="checkout-agreements-block">
+            <!-- ko foreach: $parent.getRegion('before-place-order') -->
+                <!-- ko template: getTemplate() --><!-- /ko -->
+            <!--/ko-->
+        </div>
+        <div class="actions-toolbar">
+            <div class="primary">
+                <button class="action primary checkout"
+                        type="submit"
+                        data-bind="
+                        click: placeOrder,
+                        attr: {'title': $t('Place Order')},
+                        enable: (getCode() == isChecked()),
+                        css: {disabled: !isPlaceOrderActionAllowed()}
+                        "
+                        disabled>
+                    <span data-bind="i18n: 'Place Order'"></span>
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
--- a/app/design/frontend/Joshine/breeze/Magento_OfflinePayments/web/template/payment/cashondelivery.html
+++ b/app/design/frontend/Joshine/breeze/Magento_OfflinePayments/web/template/payment/cashondelivery.html
+<!--
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<div class="payment-method" data-bind="css: {'_active': (getCode() == isChecked())}">
+    <div class="payment-method-title field choice">
+        <input type="radio"
+               name="payment[method]"
+               class="radio"
+               data-bind="attr: {'id': getCode()}, value: getCode(), checked: isChecked, click: selectPaymentMethod, visible: isRadioButtonVisible()"/>
+        <label data-bind="attr: {'for': getCode()}" class="label"><span data-bind="text: getTitle()"></span></label>
+    </div>
+    <div class="payment-method-content">
+        <!-- ko foreach: getRegion('messages') -->
+        <!-- ko template: getTemplate() --><!-- /ko -->
+        <!--/ko-->
+        <div class="payment-method-billing-address">
+            <!-- ko foreach: $parent.getRegion(getBillingAddressFormName()) -->
+            <!-- ko template: getTemplate() --><!-- /ko -->
+            <!--/ko-->
+        </div>
+        <p data-bind="html: getInstructions()"></p>
+        <div class="checkout-agreements-block">
+            <!-- ko foreach: $parent.getRegion('before-place-order') -->
+                <!-- ko template: getTemplate() --><!-- /ko -->
+            <!--/ko-->
+        </div>
+        <div class="actions-toolbar">
+            <div class="primary">
+                <button class="action primary checkout"
+                        type="submit"
+                        data-bind="
+                        click: placeOrder,
+                        attr: {title: $t('Place Order')},
+                        enable: (getCode() == isChecked()),
+                        css: {disabled: !isPlaceOrderActionAllowed()}
+                        "
+                        disabled>
+                    <span data-v-20221108="" class="secure"><img data-v-b14bd780="" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADEAAAA3CAYAAAClxaIBAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjMyODNDODA2MkIwNTExRUNCNUFCRkFGMzY4RjkyOTdCIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjMyODNDODA3MkIwNTExRUNCNUFCRkFGMzY4RjkyOTdCIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MzI4M0M4MDQyQjA1MTFFQ0I1QUJGQUYzNjhGOTI5N0IiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MzI4M0M4MDUyQjA1MTFFQ0I1QUJGQUYzNjhGOTI5N0IiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7niMRCAAAEKklEQVR42tSaW0gVQRjHt01SwiyTJKuHiugiEVIUVhBlPRRBN7ppUCT2EGVB0A2SoB6iJ596iPJBLJPM7B5SdDXNyjIxy0iLIsEoNYuu1vb/8DuwnM7OzszZPR7/8FNxZ3b2f+ab2ZlvTj/LsgyPlQhWgvlgNkgAXaAS3ABnQIenLZIJj0gGB8EHSyy6fgCM9KptL24yCOwFbZaaPnG9xN40EQ+2gxYrPL0DO/l+Ws/ST2NMDAM5YBMY42Fkt4BCUADeq1RUMTELrAVZIMnwT1/AKTZU5YWJiWAxWAOmG5HXA1AKroM6WRNxIJ1ZAqaCWKP3RQ9ZDS6AGnAf/LCbSMPvuWAeSAXjjOhXM2jk984tMvEUf0wx+q7qTX6b9mV9Nu2x1Uf1g0z8jsYQAY9AJq+/RPpp8rwcbQYaeEovAfEu5btMz1eU4RugN/Y62/9GuNRpj8GPzigx8Bjs5hebXaNc6nWQidYoMbCReyLUWk2k92TiXRQYoPB54XB9iEv9t6bqitGHMbBdYIBkCq79okgyOZxae8nAYd62Cgeu4NqbQE+08lo+0gbOgWKJsq9dTHSQib/gVYRNvAT7JctWOQx40nN7vNVFeI+QqVj+l8O1WruJ2giGUR7oVqgzQ7BIrbGnbAaCdstfPQVHFBIA48FVrhdKTYGyMezoG7taqPnpdvMsskC02gRbJO+5A2xw2efcCzUH39U0cAtM40brBeXyJe9ZIGGAdDNUBjBNMTQucpfb75HvUL5cMoTOC8LHru8gySl51ijx8NVghcND0Nh6EqLOOAkD1yQNkM7Z6wa/0ktdQqcMzARnHcrQ2CoPCqtKiffQNZCssNcvESWUJwvcD1WYWWptveCWnqxQ6AFSJ+d/HXuigfM7obReYcAXcm9cAV8F5S6D4YrZlqL/dqMhPplMwXh4CHIke4PGToLgepFiDwQ0SSYrPgC8kZiZkl1MjBVcy9c0UKGS2t8qcUOahVZrpOKzNQ2QMlRMxEqc+AR65ZCCgbQwDNzmKVzpkGWbwovvpISBATxOdJUOTFUT/UGzgpHzLibKwzBwTHRv0f71D8iVnPZoihwNrjpc3wPGai7fKS+2S5z4dw+DYsU11eWg+qlhjANLZvKQMTEYdCgaKQtaE+nqksyEESOTOgeb+RxNNrRIR/kwJFkzjGg3ly13jiQ/PR63IqtFfpxjm7zsiITy/DzHTuHMiG6IyIjCNkulgs5hfBqvdON8MEBb5DmqlUyNhqgnlvlgoMnoOTM3ImGCVKGYAHMTpVEzdE+tzDAapi3iKg8MPDN6ztG1k9pmmA9AX8CiQ/w2zfp32EB4ZyQefXGKshn1itPoSSuKvrRlX/UWShrY52G7npoIkMvJrVD6CJZ43aYfJogJ4HSQgRMgxY/2dF52KloOlnKy7YJfjfwTYAD0328CQiS8EQAAAABJRU5ErkJggg=="></span>
+                    <span data-bind="i18n: 'Place Order'"></span>
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
--- a/app/design/frontend/Joshine/breeze/Magento_OfflinePayments/web/template/payment/checkmo.html
+++ b/app/design/frontend/Joshine/breeze/Magento_OfflinePayments/web/template/payment/checkmo.html
+<!--
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<div class="payment-method" data-bind="css: {'_active': (getCode() == isChecked())}">
+    <div class="payment-method-title field choice">
+        <input type="radio"
+               name="payment[method]"
+               class="radio"
+               data-bind="attr: {'id': getCode()}, value: getCode(), checked: isChecked, click: selectPaymentMethod, visible: isRadioButtonVisible()"/>
+        <label data-bind="attr: {'for': getCode()}" class="label"><span data-bind="text: getTitle()"></span></label>
+    </div>
+    <div class="payment-method-content">
+        <!-- ko foreach: getRegion('messages') -->
+        <!-- ko template: getTemplate() --><!-- /ko -->
+        <!--/ko-->
+        <div class="payment-method-billing-address">
+            <!-- ko foreach: $parent.getRegion(getBillingAddressFormName()) -->
+            <!-- ko template: getTemplate() --><!-- /ko -->
+            <!--/ko-->
+        </div>
+        <!-- ko if: getMailingAddress() || getPayableTo() -->
+        <dl class="items check payable">
+            <!-- ko if: getPayableTo() -->
+            <dt class="title"><!-- ko i18n: 'Make Check payable to:' --><!-- /ko --></dt>
+            <dd class="content"><!-- ko text: getPayableTo() --><!-- /ko --></dd>
+            <!-- /ko -->
+            <!-- ko if: getMailingAddress() -->
+            <dt class="title"><!-- ko i18n: 'Send Check to:' --><!-- /ko --></dt>
+            <dd class="content">
+                <address class="checkmo mailing address" data-bind="html: getMailingAddress()"></address>
+            </dd>
+            <!-- /ko -->
+        </dl>
+        <!-- /ko -->
+        <div class="checkout-agreements-block">
+            <!-- ko foreach: $parent.getRegion('before-place-order') -->
+                <!-- ko template: getTemplate() --><!-- /ko -->
+            <!--/ko-->
+        </div>
+        <div class="actions-toolbar">
+            <div class="primary">
+                <button class="action primary checkout"
+                        type="submit"
+                        data-bind="
+                        click: placeOrder,
+                        attr: {title: $t('Place Order')},
+                        css: {disabled: !isPlaceOrderActionAllowed()},
+                        enable: (getCode() == isChecked())
+                        "
+                        disabled>
+                    <span data-bind="i18n: 'Place Order'"></span>
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
--- a/app/design/frontend/Joshine/breeze/Magento_OfflinePayments/web/template/payment/purchaseorder-form.html
+++ b/app/design/frontend/Joshine/breeze/Magento_OfflinePayments/web/template/payment/purchaseorder-form.html
+<!--
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<div class="payment-method" data-bind="css: {'_active': (getCode() == isChecked())}">
+    <div class="payment-method-title field choice">
+        <input type="radio"
+               name="payment[method]"
+               class="radio"
+               data-bind="attr: {'id': getCode()}, value: getCode(), checked: isChecked, click: selectPaymentMethod, visible: isRadioButtonVisible()"/>
+        <label data-bind="attr: {'for': getCode()}" class="label">
+            <span data-bind="text: getTitle()"></span>
+        </label>
+    </div>
+    <div class="payment-method-content">
+        <!-- ko foreach: getRegion('messages') -->
+        <!-- ko template: getTemplate() --><!-- /ko -->
+        <!--/ko-->
+        <div class="payment-method-billing-address">
+            <!-- ko foreach: $parent.getRegion(getBillingAddressFormName()) -->
+            <!-- ko template: getTemplate() --><!-- /ko -->
+            <!--/ko-->
+        </div>
+        <form id="purchaseorder-form" class="form form-purchase-order" data-role="purchaseorder-form">
+            <fieldset class="fieldset payment method" data-bind='attr: {id: "payment_form_" + getCode()}'>
+                <div class="field field-number required">
+                    <label for="po_number" class="label">
+                        <span><!-- ko i18n: 'Purchase Order Number'--><!-- /ko --></span>
+                    </label>
+                    <div class="control">
+                        <input type="text"
+                               id="po_number"
+                               name="payment[po_number]"
+                               data-validate="{required:true}"
+                               data-bind='
+                                attr: {title: $t("Purchase Order Number")},
+                                value: purchaseOrderNumber'
+                               class="input-text"/>
+                    </div>
+                </div>
+            </fieldset>
+            <div class="checkout-agreements-block">
+                <!-- ko foreach: $parent.getRegion('before-place-order') -->
+                    <!-- ko template: getTemplate() --><!-- /ko -->
+                <!--/ko-->
+            </div>
+            <div class="actions-toolbar" id="review-buttons-container">
+                <div class="primary">
+                    <button class="action primary checkout"
+                            type="submit"
+                            data-bind="
+                            click: placeOrder,
+                            attr: {title: $t('Place Order')},
+                            enable: (getCode() == isChecked()),
+                            css: {disabled: !isPlaceOrderActionAllowed()}
+                            "
+                            data-role="review-save">
+                        <span data-bind="i18n: 'Place Order'"></span>
+                    </button>
+                </div>
+            </div>
+        </form>
+    </div>
+</div>
--- a/app/design/frontend/Joshine/breeze/web/css/_custom.less
+++ b/app/design/frontend/Joshine/breeze/web/css/_custom.less
@@ -2235,9 +2235,9 @@ strong.subtitle.empty{
 .block-minicart .subtotal{
  display: flex;
  justify-content: space-between;
-  margin: 0.5rem 0;
+  font-weight: 500;
-  font-weight: 600;
  font-size: 18px;
+  margin-bottom: -5px;
 }
 .minicart-items .price-container{
  font-size: 12px;
@@ -2359,8 +2359,9 @@ tr.grand.totals {
 }
 .minicart-items .details-qty{
-  width: 30%;
  float: left;
+  margin-top: 1px;
+  margin-right: 5px;
 }
 .item-options  dt.label {
@@ -2371,6 +2372,9 @@ tr.grand.totals {
 span.qty-wrapper {
  font-size: 12px;
 }
+.checkout-container .action.primary, .checkout-container action.secondary{
+  background-color: #ffa800;
+  font-size: 20px;
+}