diff --git a/src/js/constants/selectors-map.ts b/src/js/constants/selectors-map.ts index cf23db8c4..b9ad6f83d 100644 --- a/src/js/constants/selectors-map.ts +++ b/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', diff --git a/src/js/product.ts b/src/js/product.ts index 7f995824f..502349e1b 100644 --- a/src/js/product.ts +++ b/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(); }; diff --git a/templates/catalog/_partials/product-add-to-cart.tpl b/templates/catalog/_partials/product-add-to-cart.tpl index 7ede6797c..1b765eda4 100644 --- a/templates/catalog/_partials/product-add-to-cart.tpl +++ b/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}" ]