diff --git a/src/js/components/useQuantityInput.ts b/src/js/components/useQuantityInput.ts index d666d002d..62f9b0cf8 100644 --- a/src/js/components/useQuantityInput.ts +++ b/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(selector); + + // For each product in list + qtyInputNodeList.forEach((qtyInputWrapper: HTMLElement) => { + const idProduct = qtyInputWrapper.closest('form') + ?.querySelector(quantityInputMap.idProductInput)?.value; + const qtyInput = qtyInputWrapper.querySelector('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; diff --git a/src/js/constants/selectors-map.ts b/src/js/constants/selectors-map.ts index 317de321a..6fd4272ac 100644 --- 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/templates/catalog/_partials/miniatures/product.tpl b/templates/catalog/_partials/miniatures/product.tpl index 5dd8302c4..3d3794a7a 100644 --- a/templates/catalog/_partials/miniatures/product.tpl +++ b/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" } diff --git a/templates/catalog/_partials/product-add-to-cart.tpl b/templates/catalog/_partials/product-add-to-cart.tpl index 8a4a323ff..b0adcabc7 100644 --- a/templates/catalog/_partials/product-add-to-cart.tpl +++ b/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}" ] }