update cart items count near page title

youcan-shop · Oct 21, 2024 · 5364f28 · 5364f28
1 parent 5e4a9cf
commit 5364f28
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 13 deletions.
diff --git a/themes/aura/assets/cart.css b/themes/aura/assets/cart.css
@@ -30,6 +30,9 @@
   font-size:14px;
   line-height:22px;
 }
+.yc-cart .cart-table .header-block #cart-items-count{
+  text-transform:lowercase;
+}
 .yc-cart .cart-table .header-block .checkout_cta{
   max-width:100%;
   width:437px;

diff --git a/themes/aura/assets/cart2.js b/themes/aura/assets/cart2.js
@@ -87,7 +87,7 @@ const CartUI = {
       }
     }
   },
-  updateCartItem(cartItemId, productVariantId, quantity, itemSubtotal) {
+  updateCartItem(cartItemId, productVariantId, quantity, itemSubtotal, inventory) {
     const itemRow = document.getElementById(cartItemId);
     const [input, totalPrice] = itemRow.querySelectorAll(`input[id="${productVariantId}"], .total-price`);
     const decrease = input.previousElementSibling;
@@ -98,22 +98,24 @@ const CartUI = {
       decrease,
       cartItemId,
       productVariantId,
-      quantity
+      quantity,
+      inventory
     );
 
     input.value = quantity;
     totalPrice.innerHTML = formatCurrency(itemSubtotal, currencyCode, customerLocale);
   },
-  setQuantityButtonsHandlers(increase, decrease, cartItemId, productVariantId, quantity) {
+  setQuantityButtonsHandlers(increase, decrease, cartItemId, productVariantId, quantity, inventory) {
     decrease
     .querySelector('button')
-    .setAttribute('onclick', `updateQuantity('${cartItemId}', '${productVariantId}', '${Number(quantity) - 1}')`);
+    .setAttribute('onclick', `updateQuantity('${cartItemId}', '${productVariantId}', '${Number(quantity) - 1}', '${inventory}')`);
     increase
       .querySelector('button')
-      .setAttribute('onclick', `updateQuantity('${cartItemId}', '${productVariantId}', '${Number(quantity) + 1}')`);
+      .setAttribute('onclick', `updateQuantity('${cartItemId}', '${productVariantId}', '${Number(quantity) + 1}', '${inventory}')`);
   },
   updateCartBadge(count) {
-    const cartItemsBadge = document.getElementById('cart-items-badge');
+    const [cartItemsBadge, cartItemCount] = document.querySelectorAll('#cart-items-badge, #cart-items-count');
+    cartItemCount.innerText = `(${count} ${CART_DRAWER_TRANSLATION.itemsName})`
 
     if (cartItemsBadge) {
       cartItemsBadge.textContent = count;
@@ -136,19 +138,25 @@ const CartUI = {
 };
 
 // Events
-async function updateQuantity(cartItemId, productVariantId, quantity) {
-  if (quantity < 1) {
-    return;
+async function updateQuantity(cartItemId, productVariantId, quantity, inventory) {
+  let [parsedQuantity, parsedInventory] = [Number(quantity), Number(inventory)];
+
+  if (parsedQuantity < 1) {
     // TODO: A better UX would be to prompt the seller to remove the item from cart
+    return;
+  }
+
+  if (Number.isFinite(parsedInventory) && parsedQuantity > parsedInventory) {
+    return notify(ADD_TO_CART_EXPECTED_ERRORS.max_quantity + inventory, 'warning');
   }
 
   load(`#loading__${cartItemId}`);
   try {
-    const updatedCart = await CartService.updateItemQuantity(cartItemId, productVariantId, quantity);
+    const updatedCart = await CartService.updateItemQuantity(cartItemId, productVariantId, parsedQuantity);
     const cartItem = updatedCart.items.find(item => item.id === cartItemId);
     const itemSubtotal = cartItem.price * cartItem.quantity;
 
-    CartUI.updateCartItem(cartItemId, productVariantId, quantity, itemSubtotal);
+    CartUI.updateCartItem(cartItemId, productVariantId, parsedQuantity, itemSubtotal, inventory);
     CartUI.updateTotalPrice(updatedCart.total, updatedCart.items);
   } catch (e) {
     notify(e.message, 'error');

diff --git a/themes/aura/sections/main-cart.liquid b/themes/aura/sections/main-cart.liquid
@@ -6,7 +6,7 @@
   <div class="header-block">
     <div class="header-bar">
       <h2>{{ 'cart.title' | t }}</h2>
-      <p class='mt-1'>
+      <p class='mt-1' id="cart-items-count">
         ({{ cart.items | size }}
         {{ 'cart.items_count' | t }})
       </p>

diff --git a/themes/aura/snippets/quantity-input.liquid b/themes/aura/snippets/quantity-input.liquid
@@ -13,7 +13,7 @@
     aria-label="quantity"
   >
   <div class='increase'>
-    <button onclick="increaseQuantity('{{ item.id }}', '{{ item.product_variant_id }}', '{{ item.quantity }}', {{ item.inventory }})">
+    <button onclick="updateQuantity('{{ item.id }}', '{{ item.product_variant_id }}', '{{ item.quantity | plus: 1 }}', {{ item.inventory }})">
       +
     </button>
   </div>

diff --git a/themes/aura/styles/cart.scss b/themes/aura/styles/cart.scss
@@ -36,6 +36,10 @@
         }
       }
 
+      #cart-items-count {
+        text-transform: lowercase;
+      }
+
       .checkout_cta {
         max-width: 100%;
         width: 437px;