TH-183: Coupons with discount type of fixed are displayed as percenta…

…ge (#97)
youcan-shop · Dec 5, 2024 · 36b7686 · 36b7686
1 parent e3de993
commit 36b7686
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 23 deletions.
diff --git a/themes/aura/assets/cart.js b/themes/aura/assets/cart.js
@@ -39,15 +39,18 @@ async function fetchCoupons() {
     const discountText = document.querySelector('.discount-text');
     const couponApplied = document.querySelector('.coupon-applied');
     const totalPrice = document.querySelector('.item-total-price');
+    let couponType
 
     if (totalPrice) {
       totalPrice.innerText = coupons.total ? `${coupons.total} ${currencyCode}` : '';
     }
 
     if (coupons.coupon && coupons.discountedPrice) {
-      couponApplied.innerHTML = `<span>${CART_PAGE_CONTENT.coupon}: '${coupons.coupon.code}'  [${coupons.coupon.value}%] </span>
+      couponType = coupons.coupon.type === 1 ? '%' : ` ${currencyCode}`;
+
+      couponApplied.innerHTML = `<span>${CART_PAGE_CONTENT.coupon}: '${coupons.coupon.code}'  [${coupons.coupon.value}${couponType}] </span>
                                  <ion-icon class="close-search" id="remove-coupon" name="close-outline"></ion-icon>`;
-      discount.innerText = coupons.discountedPrice + ' ' + currencyCode;
+      discount.innerText = `- ${coupons.discountedPrice} ${currencyCode}`;
 
       const removeCouponElement = document.getElementById("remove-coupon");
       if (removeCouponElement) {

diff --git a/themes/harmony/assets/cart.js b/themes/harmony/assets/cart.js
@@ -39,15 +39,18 @@ async function fetchCoupons() {
     const discountText = document.querySelector('.discount-text');
     const couponApplied = document.querySelector('.coupon-applied');
     const totalPrice = document.querySelector('.item-total-price');
+    let couponType
 
     if (totalPrice) {
       totalPrice.innerText = coupons.total ? `${coupons.total} ${currencyCode}` : '';
     }
 
     if (coupons.coupon && coupons.discountedPrice) {
-      couponApplied.innerHTML = `<span>${CART_PAGE_CONTENT.coupon}: '${coupons.coupon.code}'  [${coupons.coupon.value}%] </span>
+      couponType = coupons.coupon.type === 1 ? '%' : ` ${currencyCode}`;
+
+      couponApplied.innerHTML = `<span>${CART_PAGE_CONTENT.coupon}: '${coupons.coupon.code}'  [${coupons.coupon.value}${couponType}] </span>
                                  <ion-icon class="close-search" id="remove-coupon" name="close-outline"></ion-icon>`;
-      discount.innerText = coupons.discountedPrice + ' ' + currencyCode;
+      discount.innerText = `- ${coupons.discountedPrice} ${currencyCode}`;
 
       const removeCouponElement = document.getElementById("remove-coupon");
       if (removeCouponElement) {

diff --git a/themes/meraki/assets/cart.css b/themes/meraki/assets/cart.css
@@ -247,11 +247,8 @@ body{
   font-family:inherit;
   border-radius:0;
   border-radius:initial;
-  border:none;
   width:auto;
   width:initial;
-  background-color:#F1F1F1;
-  color:#A4A4A4;
   flex-shrink:0;
 }
 .yc-cart .cart-table .summary-box #summary .coupon-wrapper .yc-btn-secondary .spinner{
@@ -267,15 +264,20 @@ body{
 .yc-cart .cart-table .summary-box #summary .coupon-container{
   display:flex;
   justify-content:space-between;
-  padding:15px 24px 0;
+  padding:0 0 15px;
+}
+@media (min-width: 768px){
+  .yc-cart .cart-table .summary-box #summary .coupon-container{
+    padding:15px 20px 0;
+  }
 }
 .yc-cart .cart-table .summary-box #summary .discount-text{
   font-weight:700;
   font-size:14px;
 }
 .yc-cart .cart-table .summary-box #summary .discount-price{
-  font-size:15px;
-  font-weight:500;
+  font-size:14px;
+  font-weight:600;
 }
 .yc-cart .cart-table .summary-box #summary .coupon-applied{
   display:flex;
@@ -338,7 +340,7 @@ body{
 }
 @media (min-width: 768px){
   .yc-cart .cart-table .summary-box #summary .total-price-wrapper .total-items{
-    padding:15px 24px 20px 24px;
+    padding:15px 20px 20px;
   }
 }
 .yc-cart .cart-table .summary-box #summary .total-price-wrapper .total-items *{

diff --git a/themes/meraki/assets/cart.js b/themes/meraki/assets/cart.js
@@ -39,15 +39,18 @@ async function fetchCoupons() {
     const discountText = document.querySelector('.discount-text');
     const couponApplied = document.querySelector('.coupon-applied');
     const totalPrice = document.querySelector('.item-total-price');
+    let couponType
 
     if (totalPrice) {
       totalPrice.innerText = coupons.total ? `${coupons.total} ${currencyCode}` : '';
     }
 
     if (coupons.coupon && coupons.discountedPrice) {
-      couponApplied.innerHTML = `<span>${CART_PAGE_CONTENT.coupon}: '${coupons.coupon.code}'  [${coupons.coupon.value}%] </span>
+      couponType = coupons.coupon.type === 1 ? '%' : ` ${currencyCode}`;
+
+      couponApplied.innerHTML = `<span>${CART_PAGE_CONTENT.coupon}: '${coupons.coupon.code}'  [${coupons.coupon.value}${couponType}] </span>
                                  <ion-icon class="close-search" id="remove-coupon" name="close-outline"></ion-icon>`;
-      discount.innerText = coupons.discountedPrice + ' ' + currencyCode;
+      discount.innerText = `- ${coupons.discountedPrice} ${currencyCode}`;
 
       const removeCouponElement = document.getElementById("remove-coupon");
       if (removeCouponElement) {

diff --git a/themes/meraki/sections/main-cart.liquid b/themes/meraki/sections/main-cart.liquid
@@ -27,8 +27,8 @@
             <div class='cell mobile-view'>
               <div class="product-title">
                 <span class="product-name">{{ item.name }}</span>
-                <button 
-                  onclick="removeItem('{{ item.id }}', '{{ item.product_variant_id }}')" 
+                <button
+                  onclick="removeItem('{{ item.id }}', '{{ item.product_variant_id }}')"
                   class='yc-btn-close'
                   aria-label="close cart"
                 >
@@ -90,7 +90,7 @@
                     class='spinner hidden'
                     id='loading__coupon'
                   ></span>
-                  <span class="content">{{ 'cart.summary.checkout_cta' | t }}</span>
+                  <span class="content">{{ 'cart.summary.promo_cta' | t }}</span>
                 </button>
               </div>
               <div class="coupon-applied"></div>

diff --git a/themes/meraki/styles/cart.scss b/themes/meraki/styles/cart.scss
@@ -258,10 +258,7 @@ body {
           .yc-btn-secondary {
             font-family: inherit;
             border-radius: unset;
-            border: none;
             width: unset;
-            background-color: #F1F1F1;
-            color: #A4A4A4;
             flex-shrink: 0;
 
             .spinner {
@@ -280,7 +277,11 @@ body {
         .coupon-container {
           display: flex;
           justify-content: space-between;
-          padding: 15px 24px 0;
+          padding: 0 0 15px;
+
+          @include breakpoint('md') {
+            padding: 15px 20px 0;
+          }
         }
 
         .discount-text {
@@ -289,8 +290,8 @@ body {
         }
 
         .discount-price {
-          font-size: 15px;
-          font-weight: 500;
+          font-size: 14px;
+          font-weight: 600;
         }
 
         .coupon-applied {
@@ -361,7 +362,7 @@ body {
             padding: 0 0 26px 0;
 
             @include breakpoint('md') {
-              padding: 15px 24px 20px 24px;
+              padding: 15px 20px 20px;
             }
 
             & * {