显示优惠的运费

app/code/Magento/Checkout/view/frontend/web/js/view/summary/shipping.js

@@ -43,6 +43,9 @@ define([
                 shippingMethod['carrier_title'] + shippingMethodTitle :
                 shippingMethod['carrier_title'];
         },
+        getShippingSaveMethodTitle: function () {
+            return ' Save';
+        },
 
         /**
          * @return {*|Boolean}
@@ -53,7 +56,7 @@ define([
 
         /**
          * @return {*}
-         */
+
         getValue: function () {
             var price;
 
@@ -65,6 +68,33 @@ define([
             return this.getFormattedPrice(price);
         },
 
+         */
+        getValue: function () {
+            var price;
+
+            if (!this.isCalculated()) {
+                return this.notCalculatedMessage;
+            }
+            price =  this.totals()['shipping_amount'];
+            if(price == 0)
+            {
+                return this.getFormattedPrice(6.99);
+            }
+            return this.getFormattedPrice(price);
+        },
+        getSaveValue: function () {
+            var price;
+
+            if (!this.isCalculated()) {
+                return this.notCalculatedMessage;
+            }
+            price =  this.totals()['shipping_amount'];
+            if(price == 0)
+            {
+                return '-'+this.getFormattedPrice(6.99);
+            }
+        },
+
         /**
          * If is set coupon code, but there wasn't displayed discount view.
          *

app/code/Magento/Tax/view/frontend/web/js/view/checkout/summary/shipping.js

@@ -49,6 +49,14 @@ define([
         isCalculated: function () {
             return this.totals() && this.isFullMode() && quote.shippingMethod() != null;
         },
+        isSaveShowed: function () {
+            var price =  this.totals()['shipping_amount'];
+            if(price)
+            {
+                return false;
+            }
+            return true;
+        },
 
         /**
          * @return {*}

app/code/Magento/Tax/view/frontend/web/template/checkout/cart/totals/shipping.html

@@ -5,62 +5,77 @@
  */
 -->
 <!-- ko if: isCalculated() && quoteIsVirtual == 0 -->
-    <!-- ko if: isBothPricesDisplayed() -->
-    <tr class="totals shipping excl">
-        <th class="mark" scope="row">
-            <span class="label" data-bind="text: title + ' ' + excludingTaxMessage"></span>
-            <!-- ko if: haveToShowCoupon() -->
-                <span class="label description" data-bind="text: getCouponDescription()"></span>
-            <!-- /ko -->
-            <span class="value" data-bind="text: getShippingMethodTitle()"></span>
-        </th>
-        <td class="amount">
+<!-- ko if: isBothPricesDisplayed() -->
+<tr class="totals shipping excl">
+    <th class="mark" scope="row">
+        <span class="label" data-bind="text: title + ' ' + excludingTaxMessage"></span>
+        <!-- ko if: haveToShowCoupon() -->
+        <span class="label description" data-bind="text: getCouponDescription()"></span>
+        <!-- /ko -->
+        <span class="value" data-bind="text: getShippingMethodTitle()"></span>
+    </th>
+    <td class="amount">
             <span class="price"
                   data-bind="text: getExcludingValue(), attr: {'data-th': excludingTaxMessage}"></span>
-        </td>
-    </tr>
-    <tr class="totals shipping incl">
-        <th class="mark" scope="row">
-            <span class="label" data-bind="text: title + ' ' + includingTaxMessage"></span>
-            <!-- ko if: haveToShowCoupon() -->
-                <span class="label description" data-bind="text: getCouponDescription()"></span>
-            <!-- /ko -->
-            <span class="value" data-bind="text: getShippingMethodTitle()"></span>
-        </th>
-        <td class="amount">
+    </td>
+</tr>
+<tr class="totals shipping incl">
+    <th class="mark" scope="row">
+        <span class="label" data-bind="text: title + ' ' + includingTaxMessage"></span>
+        <!-- ko if: haveToShowCoupon() -->
+        <span class="label description" data-bind="text: getCouponDescription()"></span>
+        <!-- /ko -->
+        <span class="value" data-bind="text: getShippingMethodTitle()"></span>
+    </th>
+    <td class="amount">
             <span class="price"
                   data-bind="text: getIncludingValue(), attr: {'data-th': title + ' ' + excludingTaxMessage}"></span>
-        </td>
-    </tr>
-    <!-- /ko -->
-    <!-- ko if: isIncludingDisplayed() -->
-    <tr class="totals shipping incl">
-        <th class="mark" scope="row">
-            <span class="label" data-bind="i18n: title"></span>
-            <!-- ko if: haveToShowCoupon() -->
-                <span class="label description" data-bind="text: getCouponDescription()"></span>
-            <!-- /ko -->
-            <span class="value" data-bind="text: getShippingMethodTitle()"></span>
-        </th>
-        <td class="amount">
+    </td>
+</tr>
+<!-- /ko -->
+<!-- ko if: isIncludingDisplayed() -->
+<tr class="totals shipping incl">
+    <th class="mark" scope="row">
+        <span class="label" data-bind="i18n: title"></span>
+        <!-- ko if: haveToShowCoupon() -->
+        <span class="label description" data-bind="text: getCouponDescription()"></span>
+        <!-- /ko -->
+        <span class="value" data-bind="text: getShippingMethodTitle()"></span>
+    </th>
+    <td class="amount">
             <span class="price"
                   data-bind="text: getIncludingValue(), attr: {'data-th': title}"></span>
-        </td>
-    </tr>
-    <!-- /ko -->
-    <!-- ko if: isExcludingDisplayed() -->
-    <tr class="totals shipping excl">
-        <th class="mark" scope="row">
-            <span class="label" data-bind="i18n: title"></span>
-            <!-- ko if: haveToShowCoupon() -->
-                <span class="label description" data-bind="text: getCouponDescription()"></span>
-            <!-- /ko -->
-            <span class="value" data-bind="text: getShippingMethodTitle()"></span>
-        </th>
-        <td class="amount">
+    </td>
+</tr>
+<!-- /ko -->
+<!-- ko if: isExcludingDisplayed() -->
+<tr class="totals shipping excl">
+    <th class="mark" scope="row">
+        <span class="label" data-bind="i18n: title"></span>
+        <!-- ko if: haveToShowCoupon() -->
+        <span class="label description" data-bind="text: getCouponDescription()"></span>
+        <!-- /ko -->
+        <span class="value" data-bind="text: getShippingMethodTitle()"></span>
+    </th>
+    <td class="amount">
             <span class="price"
                   data-bind="text: getValue(), attr: {'data-th': title}"></span>
-        </td>
-    </tr>
-    <!-- /ko -->
+    </td>
+</tr>
+<!-- /ko -->
+<!-- ko if: isExcludingDisplayed() && isSaveShowed()-->
+<tr class="totals shipping excl shipping-save">
+    <th class="mark" scope="row">
+        <span class="label" data-bind="i18n: title"></span>
+        <!-- ko if: haveToShowCoupon() -->
+        <span class="label description" data-bind="text: getCouponDescription()"></span>
+        <!-- /ko -->
+        <span class="value" data-bind="text: getShippingSaveMethodTitle()"></span>
+    </th>
+    <td class="amount">
+            <span class="price"
+                  data-bind="text: getSaveValue(), attr: {'data-th': title}"></span>
+    </td>
+</tr>
+<!-- /ko -->
 <!-- /ko -->

app/code/Magento/Tax/view/frontend/web/template/checkout/summary/shipping.html

@@ -5,86 +5,107 @@
  */
 -->
 <!-- ko if: quoteIsVirtual == 0 -->
-    <!-- ko if: isBothPricesDisplayed() -->
-    <tr class="totals shipping excl">
-        <th class="mark" scope="row">
-            <span class="label" data-bind="text: title+ ' ' + excludingTaxMessage"></span>
-            <!-- ko if: haveToShowCoupon() -->
-                <span class="label description" data-bind="text: getCouponDescription()"></span>
-            <!-- /ko -->
-            <span class="value" data-bind="text: getShippingMethodTitle()"></span>
-        </th>
-        <td class="amount">
-            <!-- ko if: isCalculated() -->
-            <span class="price"
-                  data-bind="text: getExcludingValue(), attr: {'data-th': excludingTaxMessage}"></span>
-            <!-- /ko -->
-            <!-- ko ifnot: isCalculated() -->
-            <span class="not-calculated"
-                  data-bind="text: getExcludingValue(), attr: {'data-th': excludingTaxMessage}"></span>
-            <!-- /ko -->
-        </td>
-    </tr>
-    <tr class="totals shipping incl">
-        <th class="mark" scope="row">
-            <span class="label" data-bind="text: title + ' ' + includingTaxMessage"></span>
-            <!-- ko if: haveToShowCoupon() -->
-                <span class="label description" data-bind="text: getCouponDescription()"></span>
-            <!-- /ko -->
-            <span class="value" data-bind="text: getShippingMethodTitle()"></span>
-        </th>
-        <td class="amount">
-            <!-- ko if: isCalculated() -->
-            <span class="price"
-                  data-bind="text: getIncludingValue(), attr: {'data-th': title + ' ' + excludingTaxMessage}"></span>
-            <!-- /ko -->
-            <!-- ko ifnot: isCalculated() -->
-            <span class="not-calculated"
-                  data-bind="text: getIncludingValue(), attr: {'data-th': title + ' ' + excludingTaxMessage}"></span>
-            <!-- /ko -->
-        </td>
-    </tr>
-    <!-- /ko -->
-    <!-- ko if: isIncludingDisplayed() -->
-    <tr class="totals shipping incl">
-        <th class="mark" scope="row">
-            <span class="label" data-bind="i18n: title"></span>
-            <!-- ko if: haveToShowCoupon() -->
-                <span class="label description" data-bind="text: getCouponDescription()"></span>
-            <!-- /ko -->
-            <span class="value" data-bind="text: getShippingMethodTitle()"></span>
-        </th>
-        <td class="amount">
-            <!-- ko if: isCalculated() -->
-            <span class="price"
-                  data-bind="text: getIncludingValue(), attr: {'data-th': title}"></span>
-            <!-- /ko -->
-            <!-- ko ifnot: isCalculated() -->
-            <span class="not-calculated"
-                  data-bind="text: getIncludingValue(), attr: {'data-th': title}"></span>
-            <!-- /ko -->
-        </td>
-    </tr>
-    <!-- /ko -->
-    <!-- ko if: isExcludingDisplayed() -->
-    <tr class="totals shipping excl">
-        <th class="mark" scope="row">
-            <span class="label" data-bind="i18n: title"></span>
-            <!-- ko if: haveToShowCoupon() -->
-                <span class="label description" data-bind="text: getCouponDescription()"></span>
-            <!-- /ko -->
-            <span class="value" data-bind="text: getShippingMethodTitle()"></span>
-        </th>
-        <td class="amount">
-            <!-- ko if: isCalculated() -->
-            <span class="price"
-                  data-bind="text: getValue(), attr: {'data-th': title}"></span>
-            <!-- /ko -->
-            <!-- ko ifnot: isCalculated() -->
-            <span class="not-calculated"
-                  data-bind="text: getValue(), attr: {'data-th': title}"></span>
-            <!-- /ko -->
-        </td>
-    </tr>
-    <!-- /ko -->
+<!-- ko if: isBothPricesDisplayed() -->
+<tr class="totals shipping excl">
+    <th class="mark" scope="row">
+        <span class="label" data-bind="text: title+ ' ' + excludingTaxMessage"></span>
+        <!-- ko if: haveToShowCoupon() -->
+        <span class="label description" data-bind="text: getCouponDescription()"></span>
+        <!-- /ko -->
+        <span class="value" data-bind="text: getShippingMethodTitle()"></span>
+    </th>
+    <td class="amount">
+        <!-- ko if: isCalculated() -->
+        <span class="price"
+              data-bind="text: getExcludingValue(), attr: {'data-th': excludingTaxMessage}"></span>
+        <!-- /ko -->
+        <!-- ko ifnot: isCalculated() -->
+        <span class="not-calculated"
+              data-bind="text: getExcludingValue(), attr: {'data-th': excludingTaxMessage}"></span>
+        <!-- /ko -->
+    </td>
+</tr>
+<tr class="totals shipping incl">
+    <th class="mark" scope="row">
+        <span class="label" data-bind="text: title + ' ' + includingTaxMessage"></span>
+        <!-- ko if: haveToShowCoupon() -->
+        <span class="label description" data-bind="text: getCouponDescription()"></span>
+        <!-- /ko -->
+        <span class="value" data-bind="text: getShippingMethodTitle()"></span>
+    </th>
+    <td class="amount">
+        <!-- ko if: isCalculated() -->
+        <span class="price"
+              data-bind="text: getIncludingValue(), attr: {'data-th': title + ' ' + excludingTaxMessage}"></span>
+        <!-- /ko -->
+        <!-- ko ifnot: isCalculated() -->
+        <span class="not-calculated"
+              data-bind="text: getIncludingValue(), attr: {'data-th': title + ' ' + excludingTaxMessage}"></span>
+        <!-- /ko -->
+    </td>
+</tr>
+<!-- /ko -->
+<!-- ko if: isIncludingDisplayed() -->
+<tr class="totals shipping incl">
+    <th class="mark" scope="row">
+        <span class="label" data-bind="i18n: title"></span>
+        <!-- ko if: haveToShowCoupon() -->
+        <span class="label description" data-bind="text: getCouponDescription()"></span>
+        <!-- /ko -->
+        <span class="value" data-bind="text: getShippingMethodTitle()"></span>
+    </th>
+    <td class="amount">
+        <!-- ko if: isCalculated() -->
+        <span class="price"
+              data-bind="text: getIncludingValue(), attr: {'data-th': title}"></span>
+        <!-- /ko -->
+        <!-- ko ifnot: isCalculated() -->
+        <span class="not-calculated"
+              data-bind="text: getIncludingValue(), attr: {'data-th': title}"></span>
+        <!-- /ko -->
+    </td>
+</tr>
+<!-- /ko -->
+<!-- ko if: isExcludingDisplayed() -->
+<tr class="totals shipping excl">
+    <th class="mark" scope="row">
+        <span class="label" data-bind="i18n: title"></span>
+        <!-- ko if: haveToShowCoupon() -->
+        <span class="label description" data-bind="text: getCouponDescription()"></span>
+        <!-- /ko -->
+        <span class="value" data-bind="text: getShippingMethodTitle()"></span>
+    </th>
+    <td class="amount">
+        <!-- ko if: isCalculated() -->
+        <span class="price"
+              data-bind="text: getValue(), attr: {'data-th': title}"></span>
+        <!-- /ko -->
+        <!-- ko ifnot: isCalculated() -->
+        <span class="not-calculated"
+              data-bind="text: getValue(), attr: {'data-th': title}"></span>
+        <!-- /ko -->
+    </td>
+</tr>
+<!-- /ko -->
+<!-- ko if: isExcludingDisplayed() && isSaveShowed() -->
+<tr class="totals shipping excl shipping-save">
+    <th class="mark" scope="row">
+        <span class="label" data-bind="i18n: title"></span>
+        <!-- ko if: haveToShowCoupon() -->
+        <span class="label description" data-bind="text: getCouponDescription()"></span>
+        <!-- /ko -->
+        <span class="value" data-bind="text: getShippingSaveMethodTitle()"></span>
+    </th>
+    <td class="amount">
+        <!-- ko if: isCalculated() -->
+        <span class="price"
+              data-bind="text: getSaveValue(), attr: {'data-th': title}"></span>
+        <!-- /ko -->
+        <!-- ko ifnot: isCalculated() -->
+        <span class="not-calculated"
+              data-bind="text: getSaveValue(), attr: {'data-th': title}"></span>
+        <!-- /ko -->
+    </td>
+</tr>
+<!-- /ko -->
 <!-- /ko -->

app/design/frontend/Joshine/breeze/web/css/_custom.less

@@ -723,6 +723,9 @@ p.shopbycate-title {
 .checkout-cart-index .new-qty .input-text{
   text-align: center;
 }
+.checkout-cart-index .shipping-save .amount,.checkout-index-index .shipping-save .amount{
+  color: #ff373c;
+}
 .checkout-cart-index .qty-change{
   font-size: 18px;
   font-weight: bold;