Skip to content

Commit

Permalink
Fix minimum qty input on products listing and product detail pages
Browse files Browse the repository at this point in the history
  • Loading branch information
boherm committed Mar 28, 2024
1 parent 898132d commit 2ebe2a7
Show file tree
Hide file tree
Showing 5 changed files with 48 additions and 9 deletions.
39 changes: 38 additions & 1 deletion src/js/components/useQuantityInput.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
1 change: 1 addition & 0 deletions src/js/constants/selectors-map.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
3 changes: 2 additions & 1 deletion src/js/modules/facetedsearch/update.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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}) {
Expand Down Expand Up @@ -111,5 +111,6 @@ export default () => {
prestashop.on(events.updateProductList, (data: Record<string, never>) => {
updateProductListDOM(data);
useQuantityInput();
populateMinQuantityInput();
});
};
8 changes: 4 additions & 4 deletions templates/catalog/_partials/miniatures/product.tpl
Original file line number Diff line number Diff line change
Expand Up @@ -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">

Expand All @@ -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"
}
Expand Down
6 changes: 3 additions & 3 deletions templates/catalog/_partials/product-add-to-cart.tpl
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit 2ebe2a7

Please sign in to comment.