Fix minimum qty input on products listing and product detail pages

Author: boherm

src/js/components/useQuantityInput.ts

@@ -278,9 +278,36 @@ const sendUpdateCartRequest = async (updateUrl: string, quantity: number) => {
   return response;
 };
 
+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');
+
+    // if the idproduct is set, and the input has a min attribute
+    if (idProduct && qtyInput && qtyInput.dataset.min) {
+      // 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 >= qtyInput.dataset.min
+        ? 1 : qtyInput.dataset.min;
+      // 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);
 
@@ -289,7 +316,10 @@ document.addEventListener('DOMContentLoaded', () => {
     cartOverview?.focus();
   });
 
-  prestashop.on(events.quickviewOpened, () => useQuantityInput(quantityInputMap.modal));
+  prestashop.on(events.quickviewOpened, () => {
+    useQuantityInput(quantityInputMap.modal);
+    populateMinQuantityInput(quantityInputMap.modal);
+  });
 });
 
 export default useQuantityInput;

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',

templates/catalog/_partials/miniatures/product.tpl

@@ -186,8 +186,8 @@
                   {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}"
+                      "value"=>"1",
+                      "data-min"=>"{$product.minimal_quantity}"
                     ]
                     marginHelper="mb-0"
                   }

templates/catalog/_partials/product-add-to-cart.tpl

@@ -45,8 +45,8 @@
           {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}"
+              "value"=>"1",
+              "data-min"=>"{$product.minimal_quantity}"
             ]
           }
         </div>