YSHOP2-387: Cart drawer doesn’t have currency (#309)

## JIRA Ticket [YSHOP2-387](https://youcanshop.atlassian.net/browse/YSHOP2-387) ## QA Steps - [ ] `pnpm i` - [ ] `pnpm dev` ## Note Leave empty when you have nothing to say [YSHOP2-387]: https://youcanshop.atlassian.net/browse/YSHOP2-387?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
youcan-shop · Apr 26, 2023 · 8708b8a · 8708b8a
1 parent 3685c5c
commit 8708b8a
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 8 deletions.
diff --git a/assets/add-to-cart.js b/assets/add-to-cart.js
@@ -1,3 +1,5 @@
+const currencyCode = window.Dotshop.currency.code;
+
 async function addToCart(snippetId) {
   const parentSection = document.querySelector(`#s-${snippetId}`);
   const variantId = parentSection.querySelector(`#variantId`)?.value || undefined;
@@ -133,7 +135,10 @@ function cartTemplate(item) {
           </div>
           <div class="product-price">
             <span class="compare-price">${item.productVariant.compare_at_price ? item.productVariant.compare_at_price : ''}</span>
-            <span class="price">${item.productVariant.price}</span>
+            <div class="currency-wrapper">
+              <span class="price">${item.productVariant.price}</span>
+              <span class="currency-code">${currencyCode}</span>
+            </div>
           </div>
           </div>
         </div>
@@ -201,7 +206,10 @@ async function updateCartDrawer() {
       <div class="footer">
         <div class="price-wrapper">
           <span class="total-price">${CART_DRAWER_TRANSLATION.totalAmount}</span>
-          <span class="currency-value">${cartData.sub_total}</span>
+          <div class="currency-wrapper">
+            <span class="currency-value">${cartData.sub_total}</span>
+            <span class="currency-code">${currencyCode}</span>
+          </div>
           <span class="spinner footer-spinner" style="display: none;"></span>
         </div>
         <a href='${location.origin}/cart' class="yc-btn">${CART_DRAWER_TRANSLATION.checkoutPayment}</a>

diff --git a/assets/cart-drawer.css b/assets/cart-drawer.css
@@ -65,6 +65,9 @@
   font-weight: 700;
   font-size: 16px;
 }
+.cart-drawer .footer .price-wrapper .currency-code {
+  font-weight: 700;
+}
 .cart-drawer .footer a {
   margin-top: 16px;
 }
@@ -140,18 +143,22 @@
   margin-top: 14px;
   display: flex;
   flex-direction: column-reverse;
-}
-.cart-drawer ul .cart-item .item-details .product-price .price {
   color: var(--yc-primary-color);
+}
+.cart-drawer ul .cart-item .item-details .product-price .price, .cart-drawer ul .cart-item .item-details .product-price .currency-code {
   font-weight: 700;
-  font-size: 18px;
 }
 .cart-drawer ul .cart-item .item-details .product-price .compare-price {
   font-weight: 400;
   font-size: 13px;
   text-decoration-line: line-through;
   color: #8D8D8D;
 }
+.cart-drawer ul .cart-item .item-details .currency-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
 .cart-drawer ul .cart-item .quantity-control {
   display: flex;
   align-items: center;

diff --git a/styles/cart-drawer.scss b/styles/cart-drawer.scss
@@ -74,6 +74,10 @@
         font-weight: 700;
         font-size: 16px;
       }
+
+      .currency-code {
+        font-weight: 700;
+      }
     }
 
     a {
@@ -162,11 +166,10 @@
           margin-top: 14px;
           display: flex;
           flex-direction: column-reverse;
+          color: var(--yc-primary-color);
 
-          .price {
-            color: var(--yc-primary-color);
+          .price, .currency-code {
             font-weight: 700;
-            font-size: 18px;
           }
 
           .compare-price {
@@ -176,6 +179,12 @@
             color: #8D8D8D;
           }
         }
+
+        .currency-wrapper {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+        }
       }
 
       .quantity-control {