我希望在我的 Shopify 产品页面上,数量选择器将购物车中发送的数量增加 2 × 2 或减少 2 × 2。 起始数量也必须为 2。 我成功了所有这些,但我阻止的地方是,当我们已经单击“+”并且我们下降到2时,我们仍然可以单击“-”,这使我们下降到1并且它扭曲了一切。 。 我怎样才能使数量2上的“-”不再被点击?
非常感谢您的帮助,这是我当前的代码:
{% 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>
{% else %}
<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">
{% assign quantity_minus_one = line_item.quantity | minus: 1 %}
<button type="button" class="QuantitySelector__Button Link Link--secondary" data-action="decrease-quantity">{% render 'icon' with 'minus' %}</button>
<input type="text" class="QuantitySelector__CurrentQuantity" pattern="[0-9]*" name="quantity" value="1" 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>
{% endif %}
好吧,最后,我还是这么做了,我选择在奇数的情况下不让购物车按钮可点击,而在偶数的情况下让它可点击。此外,我在奇数的情况下显示了运行消息,这是我为感兴趣的人提供的解决方案。
{% comment %}----------------------Check if the product is a chair otherwise we do normally----------------{% endcomment %}
{% if product.tags contains 'Liquidation' and product.type contains 'Chaise' %}
{% comment %}----------------------END Check if the product is a chair otherwise we do normally----------------{% endcomment %}
<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 %}