Fix minimum qty input on products listing and product detail pages

PrestaShop · Mar 28, 2024 · 2ebe2a7 · 2ebe2a7
1 parent 898132d
commit 2ebe2a7
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 9 deletions.
diff --git a/src/js/components/useQuantityInput.ts b/src/js/components/useQuantityInput.ts
@@ -278,18 +278,55 @@ const sendUpdateCartRequest = async (updateUrl: string, quantity: number) => {
   return response;
 };
 
+export const populateMinQuantityInput = (selector = quantityInputMap.default) => {
+  const qtyInputNodeList = document.querySelectorAll<HTMLElement>(selector);
+
+  // For each product in list
+  qtyInputNodeList.forEach((qtyInputWrapper: HTMLElement) => {
+    const idProduct = qtyInputWrapper.closest('form')
+      ?.querySelector<HTMLInputElement>(quantityInputMap.idProductInput)?.value;
+    const qtyInput = qtyInputWrapper.querySelector<HTMLInputElement>('input');
+    const qtyInputMin = qtyInput?.getAttribute('min');
+
+    // if the idproduct is set, and the input has a min attribute
+    if (idProduct && qtyInput && qtyInputMin) {
+      // we check if the product is already in the cart
+      const productInCart = window.prestashop.cart.products.filter(
+        (product: {id: number}) => product.id === parseInt(idProduct, 10),
+      ).shift();
+      // if the product is in the cart (and if the qty wanted is >= than the min qty, we set the minimal quantity to 1
+      const minimalQuantity = productInCart && productInCart.quantity_wanted >= qtyInputMin
+        ? 1 : qtyInputMin;
+      // we set the min attribute to the input
+      qtyInput.setAttribute('min', minimalQuantity.toString());
+      qtyInput.setAttribute('value', minimalQuantity.toString());
+    }
+  });
+};
+
 document.addEventListener('DOMContentLoaded', () => {
   const {prestashop, Theme: {events, selectors}} = window;
 
+  populateMinQuantityInput();
+
   prestashop.on(events.updatedCart, () => {
     useQuantityInput(cartSelectorMap.productQuantity);
 
     const {cart: cartMap} = selectors;
     const cartOverview = document.querySelector<HTMLElement>(cartMap.overview);
     cartOverview?.focus();
+
+    populateMinQuantityInput();
   });
 
-  prestashop.on(events.quickviewOpened, () => useQuantityInput(quantityInputMap.modal));
+  prestashop.on(events.updateProduct, () => {
+    populateMinQuantityInput();
+  });
+
+  prestashop.on(events.quickviewOpened, () => {
+    useQuantityInput(quantityInputMap.modal);
+    populateMinQuantityInput(quantityInputMap.modal);
+  });
 });
 
 export default useQuantityInput;
diff --git a/src/js/constants/selectors-map.ts b/src/js/constants/selectors-map.ts
@@ -109,6 +109,7 @@ export const desktopMenu = {
 
 export const qtyInput = {
   default: '.js-quantity-button',
+  idProductInput: 'input[name="id_product"]',
   modal: '.modal-dialog .js-quantity-button',
   increment: '.js-increment-button',
   decrement: '.js-decrement-button',

diff --git a/src/js/modules/facetedsearch/update.ts b/src/js/modules/facetedsearch/update.ts
@@ -3,7 +3,7 @@
  * file that was distributed with this source code.
  */
 
-import useQuantityInput from '@js/components/useQuantityInput';
+import useQuantityInput, {populateMinQuantityInput} from '@js/components/useQuantityInput';
 
 // @TODO(NeOMakinG): Refactor this file, it comes from facetedsearch or classic
 export const parseSearchUrl = function (event: {target: HTMLElement}) {
@@ -111,5 +111,6 @@ export default () => {
   prestashop.on(events.updateProductList, (data: Record<string, never>) => {
     updateProductListDOM(data);
     useQuantityInput();
+    populateMinQuantityInput();
   });
 };
diff --git a/templates/catalog/_partials/miniatures/product.tpl b/templates/catalog/_partials/miniatures/product.tpl
@@ -176,7 +176,7 @@
               {/block}
             </div>
 
-            {if $product.add_to_cart_url}
+            {if $product.add_to_cart_url && $product.product_type !== 'combinations'}
               <form action="{$urls.pages.cart}" method="post" class="d-flex flex-wrap flex-md-nowrap gap-3 align-items-center mt-3">
                 <input type="hidden" value="{$product.id_product}" name="id_product">
 
@@ -185,9 +185,9 @@
                 <div class="quantity-button js-quantity-button w-100 w-sm-auto">
                   {include file='components/qty-input.tpl'
                     attributes=[
-                      "id"=>"quantity_wanted_{$product.id_product}",
-                      "value"=>"{if $product.cart_quantity && $product.cart_quantity >= $product.minimal_quantity}1{else}{$product.minimal_quantity}{/if}",
-                      "min"=>"{if $product.cart_quantity && $product.cart_quantity >= $product.minimal_quantity}1{else}{$product.minimal_quantity}{/if}"
+                      "id" => "quantity_wanted_{$product.id_product}",
+                      "value" => "1",
+                      "min" => "{$product.minimal_quantity}"
                     ]
                     marginHelper="mb-0"
                   }

diff --git a/templates/catalog/_partials/product-add-to-cart.tpl b/templates/catalog/_partials/product-add-to-cart.tpl
@@ -44,9 +44,9 @@
         <div class="product-actions__quantity quantity-button js-quantity-button col-md-auto">
           {include file='components/qty-input.tpl'
             attributes=[
-              "id"=>"quantity_wanted",
-              "value"=>"{if $product.quantity_wanted}{$product.quantity_wanted}{else}1{/if}",
-              "min"=>"{if $product.quantity_wanted}{$product.minimal_quantity}{else}1{/if}"
+              "id" => "quantity_wanted",
+              "value" => "1",
+              "min" => "{$product.minimal_quantity}"
             ]
           }
         </div>