Merge pull request #621 from tblivet/issue-616-615

Fix: issue-616 and issue-615

Author: nicosomb

src/js/constants/selectors-map.ts

@@ -115,6 +115,7 @@ export const qtyInput = {
   modal: '.modal-dialog .js-quantity-button',
   increment: '.js-increment-button',
   decrement: '.js-decrement-button',
+  quantityWanted: '.js-quantity-wanted',
   confirm: '.confirmation',
   icon: '.material-icons',
   spinner: '.spinner-border',

src/js/product.ts

@@ -22,4 +22,47 @@ export default () => {
   initProductSlide();
   prestashop.on(events.updatedProduct, initProductSlide);
   prestashop.on(events.quickviewOpened, initProductSlide);
+
+  function detectQuantityChange() {
+    const quantityInput = document.querySelector(
+      SelectorsMap.qtyInput.quantityWanted,
+    ) as HTMLInputElement;
+    const incrementButton = document.querySelector(
+      SelectorsMap.qtyInput.increment,
+    ) as HTMLButtonElement;
+    const decrementButton = document.querySelector(
+      SelectorsMap.qtyInput.decrement,
+    ) as HTMLButtonElement;
+
+    if (quantityInput && incrementButton && decrementButton) {
+      // Function to trigger emit
+      const triggerEmit = () => {
+        const inputValue = parseInt(quantityInput.value, 10);
+        const minValue = parseInt(quantityInput.min, 10);
+
+        // Check if the input value is a valid and greater or equal than the minimum value
+        if (!isNaN(inputValue) && inputValue >= minValue) {
+          quantityInput.value = inputValue.toString();
+        } else {
+          quantityInput.value = minValue.toString();
+        }
+
+        prestashop.emit('updateProduct', {
+          eventType: 'updatedProductQuantity',
+        });
+      };
+
+      // Attach event listener for input changes
+      quantityInput.addEventListener('input', triggerEmit);
+      quantityInput.addEventListener('keyup', triggerEmit);
+      quantityInput.addEventListener('keydown', triggerEmit);
+
+      // Attach event listener for increment / decrement button click
+      incrementButton.addEventListener('click', triggerEmit);
+      decrementButton.addEventListener('click', triggerEmit);
+    }
+  }
+
+  // Call the function to start listening for quantity changes
+  detectQuantityChange();
 };

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

@@ -45,6 +45,7 @@
           {include file='components/qty-input.tpl'
             attributes=[
               "id" => "quantity_wanted",
+              "class" => "form-control js-quantity-wanted",
               "value" => "{$product.minimal_quantity}",
               "min" => "{$product.minimal_quantity}"
             ]