Ajouter et diminuer par 2 les produits dans le panier

[psweb]

Bonjour, 

ça fait 2 jours que j'essaye de coder la possibilité d'ajout par 2 et diminution par 2 d'un produit dans le panier.

Je veux que sur la fiche produit, le quantity selector commence à 2 (réussi), que quand on clique sur "+" ça augmente de 2 (réussi), que quand on clique sur "-" ça diminue par 2 (réussi), mais que l'on ne puisse pas cliquer sur "-" si la quantité est 2, ou que l'on ne puisse pas descendre sous 2... Et là je bloque... 

Voici mon code, merci de votre aide:

{% when 'quantity_selector' %}
                {% if product.tags contains 'Liquidation' and product.type contains 'Chaise' %}
                 
<div class="ProductForm__QuantitySelector" {{ block.shopify_attributes }}>
  {% if block.settings.show_label %}
    <span class="ProductForm__Label">{{ 'product.form.quantity' | t }}:</span>
  {% endif %}

  <div class="QuantitySelector QuantitySelector--large">
  <button type="button" class="QuantitySelector__Button Link Link--secondary" data-action="decrease-quantity" disabled>{% render 'icon' with 'minus' %}</button>
  <input type="text" id="quantity-input" class="QuantitySelector__CurrentQuantity" pattern="[0-9]*" name="quantity" value="2" aria-label="{{ 'product.form.quantity' | t }}">
  <button type="button" class="QuantitySelector__Button Link Link--secondary" data-action="increase-quantity">{% render 'icon' with 'plus' %}</button>
</div>

</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const decreaseButton = document.querySelector('[data-action="decrease-quantity"]');
  const increaseButton = document.querySelector('[data-action="increase-quantity"]');
  const quantityInput = document.getElementById('quantity-input');

  const updateDecreaseButtonState = () => {
    decreaseButton.disabled = parseInt(quantityInput.value) === 2;
  };

  // Mise à jour initiale de l'état du bouton de diminution
  updateDecreaseButtonState();

  decreaseButton.addEventListener('click', function() {
    let quantity = parseInt(quantityInput.value);
    if (quantity > 2) {
      quantity -= 1;
      quantityInput.value = quantity;
    } else {
      quantity -= 0;
      quantityInput.value = quantity;
    }
    updateDecreaseButtonState();
  });

  increaseButton.addEventListener('click', function() {
    let quantity = parseInt(quantityInput.value);
    quantity += 1;
    quantityInput.value = quantity;
    updateDecreaseButtonState();
  });

  quantityInput.addEventListener('change', function() {
    let quantity = parseInt(this.value);
    if (isNaN(quantity) || quantity < 2) {
      this.value = 2;
    } else if (quantity % 2 !== 0) {
      this.value = quantity + (2 - quantity % 2);
    }
    updateDecreaseButtonState();
  });
});



</script>

[psweb]

Voila ma solution, j'ai d'abord fais des vérification, puis a l'aide de JS j'ai fais des vérif de pair ou impair et ça fonctione très bien:

{% comment %}----------------------Check if the product is a chair otherwise we do normally----------------{% endcomment %}
{% assign LiquidationChair = false %}
{% if product.tags contains 'Liquidation' %}
{% if product.type contains 'Chaise' or product.type contains 'Chair' %}
{% if product.title != 'SAINT TROPEZ' %}
{% assign LiquidationChair = true %}
{% endif %}
{% endif %}
{% endif %}

{% comment %}----------------------END Check if the product is a chair otherwise we do normally----------------{% endcomment %}

{% if LiquidationChair %}
<p style="color: red;" id="messageAlert"></p>
<button type="submit" data-use-primary-button="{% if use_primary_button %}true{% else %}false{% endif %}" class="ProductForm__AddToCart ButtonCustom {% if product.selected_or_first_available_variant.available and use_primary_button %}CustomButtonAddToCart{% else %}Button--secondary{% endif %} Button--full" {% if product.selected_or_first_available_variant.available %}data-action="add-to-cart"{% else %}disabled="disabled"{% endif %}>
{% if product.selected_or_first_available_variant.available %}
<span>{% if product.template_suffix == 'pre-order' %}{{ 'product.form.pre_order' | t }}{% else %}{{ 'product.form.add_to_cart' | t }}{% endif %}</span>

{% if block.settings.show_price_in_button %}
<span class="Button__SeparatorDot"></span>
<span>{{ product.selected_or_first_available_variant.price | money }}</span>
{% endif %}
{% else %}
{{ 'product.form.sold_out' | t }}
{% endif %}
</button>

{% comment %}----------------------JS to check that the chairs are selling well by pairs otherwise it deactivates the buy button----------------{% endcomment %}
<script>

document.addEventListener('DOMContentLoaded', function() {
const decreaseButton = document.querySelector('[data-action="decrease-quantity"]');
const increaseButton = document.querySelector('[data-action="increase-quantity"]');
const quantityInput = document.querySelector('.QuantitySelector__CurrentQuantity');
const addToCartButton = document.querySelector('[data-action="add-to-cart"]');

const updateAddToCartButtonState = () => {
let selectedQuantity = parseInt(quantityInput.value);
// Désactive le bouton si la quantité n'est pas un nombre pair
addToCartButton.disabled = selectedQuantity % 2 !== 0;
// Affiche le message si la quantité est impaire
if (selectedQuantity % 2 !== 0) {
document.getElementById("messageAlert").textContent = "La quantité doit être un nombre pair.";
document.getElementById("messageAlert").style.visibility = "visible";
} else {
document.getElementById("messageAlert").style.visibility = "collapse";
}
};

// Initialisation
updateAddToCartButtonState();

// Écouteurs d'événements pour les boutons
decreaseButton.addEventListener('click', function() {
setTimeout(function() {
updateAddToCartButtonState();
}, 10);
});

increaseButton.addEventListener('click', function() {
setTimeout(function() {
updateAddToCartButtonState();
}, 10);
});

// Écouteur d'événements pour les changements manuels dans l'input
quantityInput.addEventListener('change', updateAddToCartButtonState);
});
</script>
{% comment %}----------------------END JS to check that the chairs are selling well by pairs otherwise it deactivates the buy button----------------{% endcomment %}

{% else %}
<button type="submit" data-use-primary-button="{% if use_primary_button %}true{% else %}false{% endif %}" class="ProductForm__AddToCart ButtonCustom {% if product.selected_or_first_available_variant.available and use_primary_button %}CustomButtonAddToCart{% else %}Button--secondary{% endif %} Button--full" {% if product.selected_or_first_available_variant.available %}data-action="add-to-cart"{% else %}disabled="disabled"{% endif %}>
{% if product.selected_or_first_available_variant.available %}
<span>{% if product.template_suffix == 'pre-order' %}{{ 'product.form.pre_order' | t }}{% else %}{{ 'product.form.add_to_cart' | t }}{% endif %}</span>

{% if block.settings.show_price_in_button %}
<span class="Button__SeparatorDot"></span>
<span>{{ product.selected_or_first_available_variant.price | money }}</span>
{% endif %}
{% else %}
{{ 'product.form.sold_out' | t }}
{% endif %}
</button>
{% endif %}