TH-109 > Meraki > Cart page & (direct add to cart) > Prevent the cust…

…omer from placing an order if a variant is out of stock (#70)
youcan-shop · Oct 21, 2024 · 6c85c82 · 6c85c82
1 parent 9b9ac7d
commit 6c85c82
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 26 deletions.
diff --git a/themes/meraki/assets/add-to-cart.js b/themes/meraki/assets/add-to-cart.js
@@ -296,13 +296,22 @@ function preventCartDrawerOpening(templateName) {
   window.location.reload();
 }
 
-async function directAddToCart(event, productId) {
+async function directAddToCart(event, productId, inventory, isTrackingInventory) {
   event.preventDefault();
 
+  await trackVariantQuantityOnCart(productId);
+  const variantQuantityInCart = parseInt(document.querySelector('#cartQuantity')?.value) || null;
+  const isTrackingInventoryAvailable = Boolean(isTrackingInventory) &&  Number.isFinite(inventory);
+  const newQuantity = 1;
+
+  if (isTrackingInventoryAvailable && ((variantQuantityInCart ?? 0) + newQuantity) > inventory) {
+    return notify(ADD_TO_CART_EXPECTED_ERRORS.max_quantity + inventory, 'warning');
+  }
+
   try {
     const response = await youcanjs.cart.addItem({
       productVariantId: productId,
-      quantity: 1
+      quantity: newQuantity
     });
 
     if (response.error) throw new Error(response.error);

diff --git a/themes/meraki/assets/cart.js b/themes/meraki/assets/cart.js
@@ -90,23 +90,22 @@ async function removeCoupons(e) {
   }
 }
 
-function updateCart(item, quantity, totalPriceSelector, cartItemId, productVariantId) {
+function updateCart(item, quantity, totalPriceSelector, cartItemId, productVariantId, inventory) {
   const inputHolder = document.getElementById(item);
   const input = inputHolder.querySelector(`input[id="${productVariantId}"]`);
   input.value = quantity;
   const decrease = input.previousElementSibling;
   const increase = input.nextElementSibling;
-
   const productPrice = inputHolder.querySelector('.product-price');
   const price = productPrice.innerText;
   const totalPrice = inputHolder.querySelector(totalPriceSelector);
 
   decrease
     .querySelector('button')
-    .setAttribute('onclick', `decreaseQuantity('${cartItemId}', '${productVariantId}', '${Number(quantity) - 1}')`);
+    .setAttribute('onclick', `decreaseQuantity('${cartItemId}', '${productVariantId}', '${Number(quantity) - 1}', ${inventory})`);
   increase
     .querySelector('button')
-    .setAttribute('onclick', `increaseQuantity('${cartItemId}', '${productVariantId}', '${Number(quantity) + 1}')`);
+    .setAttribute('onclick', `increaseQuantity('${cartItemId}', '${productVariantId}', '${quantity}', ${inventory})`);
 
   if (isNaN(quantity)) {
     totalPrice.innerText = 0;
@@ -143,16 +142,16 @@ document.addEventListener('DOMContentLoaded', () => {
   fetchCoupons();
 });
 
-function updateDOM(cartItemId, productVariantId, quantity) {
-  updateCart(cartItemId, quantity, '.total-price', cartItemId, productVariantId);
+function updateDOM(cartItemId, productVariantId, quantity, inventory) {
+  updateCart(cartItemId, quantity, '.total-price', cartItemId, productVariantId, inventory);
   updateTotalPrice();
 }
 
-function updatePrice(cartItemUniqueId, productVariantId, quantity) {
-  updateCart(`cart-item-${cartItemUniqueId}`, quantity, '.item-price', cartItemUniqueId, productVariantId);
+function updatePrice(cartItemUniqueId, productVariantId, quantity, inventory) {
+  updateCart(`cart-item-${cartItemUniqueId}`, quantity, '.item-price', cartItemUniqueId, productVariantId, inventory);
 }
 
-async function updateQuantity(cartItemId, productVariantId, quantity) {
+async function updateQuantity(cartItemId, productVariantId, quantity, inventory) {
   load(`#loading__${cartItemId}`);
   try {
     await youcanjs.cart.updateItem({ cartItemId, productVariantId, quantity });
@@ -162,28 +161,32 @@ async function updateQuantity(cartItemId, productVariantId, quantity) {
     stopLoad(`#loading__${cartItemId}`);
   }
 
-  updateDOM(cartItemId, productVariantId, quantity);
-  updatePrice(cartItemId,productVariantId,quantity);
+  updateDOM(cartItemId, productVariantId, quantity, inventory);
+  updatePrice(cartItemId,productVariantId,quantity, inventory);
   updateTotalPrice();
 }
 
-async function updateOnchange(cartItemId, productVariantId) {
+async function updateOnchange(cartItemId, productVariantId, inventory) {
   const inputHolder = document.getElementById(cartItemId);
   const input = inputHolder.querySelector(`input[id="${productVariantId}"]`);
   const quantity = input.value;
 
-  await updateQuantity(cartItemId, productVariantId, quantity);
+  await updateQuantity(cartItemId, productVariantId, quantity, inventory);
 }
 
-async function decreaseQuantity(cartItemId, productVariantId, quantity) {
-  if (quantity < 1) {
+async function decreaseQuantity(cartItemId, productVariantId, quantity, inventory) {
+  if (Number(quantity) < 1) {
     return;
   }
-  await updateQuantity(cartItemId, productVariantId, quantity);
+  await updateQuantity(cartItemId, productVariantId, quantity, inventory);
 }
 
-async function increaseQuantity(cartItemId, productVariantId, quantity) {
-  await updateQuantity(cartItemId, productVariantId, quantity);
+async function increaseQuantity(cartItemId, productVariantId, quantity, inventory) {
+  if (Number.isFinite(inventory) && (Number(quantity) >= inventory)) {
+    return notify(ADD_TO_CART_EXPECTED_ERRORS.max_quantity + inventory, 'warning');
+  }
+
+  await updateQuantity(cartItemId, productVariantId, (Number(quantity) + 1), inventory);
 }
 
 function updateCartItemCount(count) {

diff --git a/themes/meraki/snippets/product-preview.liquid b/themes/meraki/snippets/product-preview.liquid
@@ -36,7 +36,7 @@
 
 <div class="product-link-mobile">
   {% if settings.direct_add_to_cart and item.variants.size <= 1 %}
-    <button class="yc-btn" onclick="directAddToCart(event, '{{ item.variants[0].id }}')">
+    <button class="yc-btn" onclick="directAddToCart(event, '{{ item.variants[0].id }}', {{ item.variants[0].inventory }}, {{ item.isTrackingInventory }})">
       {{ 'general.direct_add_to_cart' | t }}
     </button>
   {% else %}

diff --git a/themes/meraki/snippets/product-slider.liquid b/themes/meraki/snippets/product-slider.liquid
@@ -67,7 +67,7 @@
                     {% endif %}
                     <div class="product-link">
                       {% if settings.direct_add_to_cart and block.settings.product.variants.size <= 1 %}
-                        <button class="yc-btn" onclick="directAddToCart(event, '{{ block.settings.product.variants[0].id }}');">
+                        <button class="yc-btn" onclick="directAddToCart(event, '{{ block.settings.product.variants[0].id }}', {{ block.settings.product.variants[0].inventory }}, {{ block.settings.product.isTrackingInventory }});">
                           {{ 'general.direct_add_to_cart' | t }}
                         </button>
                       {% else %}
@@ -90,7 +90,7 @@
                 </div>
                   <div class="product-link">
                     {% if settings.direct_add_to_cart and block.settings.product.variants.size <= 1 %}
-                      <button class="yc-btn" onclick="directAddToCart(event, '{{ block.settings.product.variants[0].id }}');">
+                      <button class="yc-btn" onclick="directAddToCart(event, '{{ block.settings.product.variants[0].id }}', {{ block.settings.product.variants[0].inventory }}, {{ block.settings.product.isTrackingInventory }});">
                         {{ 'general.direct_add_to_cart' | t }}
                       </button>
                     {% else %}

diff --git a/themes/meraki/snippets/quantity-input.liquid b/themes/meraki/snippets/quantity-input.liquid
@@ -1,18 +1,19 @@
 <div class='quantity-wrapper'>
   <div class='decrease'>
-    <button onclick="decreaseQuantity('{{ item.id }}', '{{ item.product_variant_id }}', '{{ item.quantity | minus: 1 }}')">
+    <button onclick="decreaseQuantity('{{ item.id }}', '{{ item.product_variant_id }}', '{{ item.quantity | minus: 1 }}', {{ item.inventory }})">
       -
     </button>
   </div>
   <input
-    onchange="updateOnchange('{{ item.id }}', '{{ item.product_variant_id }}')"
+    onchange="updateOnchange('{{ item.id }}', '{{ item.product_variant_id }}', {{ item.inventory }})"
+    oninput="restrictInputValue(event.target, {{ item.inventory }})"
     type='text'
     value='{{ item.quantity }}'
     id='{{ item.product_variant_id }}'
     aria-label="quantity"
   >
   <div class='increase'>
-    <button onclick="increaseQuantity('{{ item.id }}', '{{ item.product_variant_id }}', '{{ item.quantity | plus: 1 }}')">
+    <button onclick="increaseQuantity('{{ item.id }}', '{{ item.product_variant_id }}', '{{ item.quantity }}', {{ item.inventory }})">
       +
     </button>
   </div>