YSHOP2-726 : themes > prevent opening cart drawer on cart page (#374)

## JIRA Ticket

[YSHOP2-726](https://youcanshop.atlassian.net/browse/YSHOP2-726)

## QA Steps

- [ ] `pnpm i`
- [ ] `pnpm dev`

## Note

Leave empty when you have nothing to say


[YSHOP2-726]:
https://youcanshop.atlassian.net/browse/YSHOP2-726?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

assets/add-to-cart.js

@@ -292,4 +292,16 @@ document.addEventListener('DOMContentLoaded', async () => {
   await updateCartDrawer();
 });
 
-window.updateCartDrawer = updateCartDrawer;
+/**
+ * Remove the click event from the cart icon if the user is inside the cart page
+ */
+function preventCartDrawerOpening(templateName) {
+  if(templateName !== 'cart') {
+    return;
+  }
+
+  const cartDrawerIcon = document.querySelector('#navbar-cart-icon');
+
+  cartDrawerIcon.removeEventListener("click", toggleCartDrawer);
+  window.location.reload();
+}

assets/cart.js

@@ -8,7 +8,6 @@ function setCurrencySymbol() {
     element.innerText = currencyCode;
   })
 }
-setCurrencySymbol();
 
 const promo = document.forms['promo'];
 if (promo) {
@@ -36,7 +35,7 @@ function updateCart(item, quantity, totalPriceSelector, cartItemId, productVaria
   const increase = input.nextElementSibling;
 
   const productPrice = inputHolder.querySelector('.product-price');
-  const price = Number(productPrice?.innerText);
+  const price = productPrice.innerText;
   const totalPrice = inputHolder.querySelector(totalPriceSelector);
 
   decrease
@@ -49,26 +48,32 @@ function updateCart(item, quantity, totalPriceSelector, cartItemId, productVaria
   if (isNaN(quantity)) {
     totalPrice.innerText = 0;
   } else if (price) {
-    totalPrice.innerText = price * quantity;
+    totalPrice.innerText = isFloat(Number(price) * quantity);
   }
 }
 
 function updateTotalPrice() {
   let calculateTotalPrice = 0;
   const itemPrices = document.querySelectorAll('.item-price');
+
   itemPrices.forEach(itemPrice => {
     const price = itemPrice.innerText;
     calculateTotalPrice += Number(price);
   });
 
   const totalPriceElement = document.querySelector('.item-total-price');
-  const totalPrice = calculateTotalPrice.toFixed(2);
+  const totalPrice = isFloat(calculateTotalPrice);
 
   if (totalPriceElement) {
     totalPriceElement.innerText = `${totalPrice} ${currencyCode}`;
   }
 }
 
+document.addEventListener('DOMContentLoaded', () => {
+  setCurrencySymbol();
+  updateTotalPrice();
+});
+
 function updateDOM(cartItemId, productVariantId, quantity) {
   updateCart(cartItemId, quantity, '.total-price', cartItemId, productVariantId);
   updateTotalPrice();
@@ -90,24 +95,17 @@ async function updateQuantity(cartItemId, productVariantId, quantity) {
   updateDOM(cartItemId, productVariantId, quantity);
   updatePrice(cartItemId,productVariantId,quantity);
   updateTotalPrice();
+  await updateCartDrawer();
 }
 
-
 async function updateOnchange(cartItemId, productVariantId) {
   const inputHolder = document.getElementById(cartItemId);
   const input = inputHolder.querySelector(`input[id="${productVariantId}"]`);
   const quantity = input.value;
 
   await updateQuantity(cartItemId, productVariantId, quantity);
-  updateDOM(cartItemId, productVariantId, quantity);
-  updatePrice(cartItemId,productVariantId,quantity);
-  updateTotalPrice();
 }
 
-document.addEventListener('DOMContentLoaded', () => {
-  updateTotalPrice();
-});
-
 async function decreaseQuantity(cartItemId, productVariantId, quantity) {
   if (quantity < 1) {
     return;
@@ -119,13 +117,23 @@ async function increaseQuantity(cartItemId, productVariantId, quantity) {
   await updateQuantity(cartItemId, productVariantId, quantity);
 }
 
+function updateCartItemCount(count) {
+  const cartItemsCount = document.getElementById('cart-items-count');
+  if (cartItemsCount) {
+    cartItemsCount.textContent = count;
+  }
+}
+
 async function removeItem(cartItemId, productVariantId) {
   load(`#loading__${cartItemId}`);
   try {
     await youcanjs.cart.removeItem({ cartItemId, productVariantId });
     document.getElementById(cartItemId).remove();
     document.getElementById(`cart-item-${cartItemId}`).remove();
 
+    const updatedCart = await youcanjs.cart.fetch();
+    updateCartItemCount(updatedCart.count);
+
     updateTotalPrice();
     await updateCartDrawer();
 
@@ -160,5 +168,3 @@ async function removeItem(cartItemId, productVariantId) {
     stopLoad(`#loading__${cartItemId}`);
   }
 }
-
-window.removeItem = removeItem;

assets/helper.js

@@ -114,3 +114,22 @@ function mountSlider(isMobile, mobileSlider, desktopSlider) {
   runSlider();
   isMobile.addEventListener('change', runSlider, { passive: true });
 }
+
+/**
+ * If the value is float fix the decimal in tow digits
+ * @param {string | number} value
+ * @returns {number} formated value
+ */
+function isFloat(value) {
+  if (isNaN(value)) {
+    return 0;
+  }
+
+  const numericValue = Number(value);
+
+  if (Number.isInteger(numericValue)) {
+    return numericValue.toFixed(0);
+  }
+
+  return numericValue.toFixed(2);
+}

sections/main-navbar.liquid

@@ -88,7 +88,7 @@
                   </form>
                 </div>
               </div>
-              <button class='cart relative' id='navbar-cart-icon'>
+              <button class='cart relative' id='navbar-cart-icon' onclick='preventCartDrawerOpening("{{ template.name }}")'>
                 <span id='cart-items-badge'>
                   {{- cart.items | size -}}
                 </span>