Search code examples
javascriptsymfonytwigshopwareshopware6

Symfony & js : button not working in certain conditions

I have a simple "plus/minus" functionality for the product quantity on the product detail page on a shopware6 site (version 6.4.8.1) (See attached image) enter image description here

See here my code in /views/storefront/page/product-detail/buy-widget-form.html.twig.

{% block page_product_detail_buy_quantity_container %}
<div class="col-12 quantity-container">
    <div class="row">
        <div class="col-5 col-md-3 label-quantity">
            <span>{{ "detail.labelQuantity"|trans|sw_sanitize }}</span>
        </div>
         <div class="col-7 col-md-9 quantity-input-panel">
                    {% block page_product_detail_buy_quantity %}
                            <div class="quantity-inner">
                                    <span class="min button" id="moins" {#onclick="minus()"#}> {% sw_icon 'minus' %} </span>
                                    <input id="amountToBasket" type="text" name="lineItems[{{ page.product.id }}][quantity]" value="{{product.minPurchase}}" autocomplete="off" maxlength="2" class="form-control">
                                    <input id="minPurchase" type="hidden" name="minPurchase" value="{{product.minPurchase}}" autocomplete="off" class="form-control">
                                    <input id="maxRange" type="hidden" name="maxRange" value="{{product.calculatedMaxPurchase}}" autocomplete="off" class="form-control">
                                    <input id="purchaseSteps" type="hidden" name="purchaseSteps" value="{{product.purchaseSteps}}" autocomplete="off" class="form-control">
                                    <span class="plus button" id="plus" {#onclick="plus()"#}> {% sw_icon 'plus' %}</span>
                            </div>
                    {% endblock %}
        </div>
    </div>
</div>
{% endblock %}

And here's my js file related to the plus/minus buttons.

var minPurchase = $("#minPurchase").val();
var maxRange = $("#maxRange").val();
var count = $("#amountToBasket").val();

$("#plus").click(function () {
    if (count < maxRange){
        count++;

        $("#amountToBasket").val(count);
    }
});

$("#moins").click(function () {
    if (count > minPurchase){
        count--;

        $("#amountToBasket").val(count);
    }
});

PROBLEM : This works perfectly for ALL products where the minimum purchase quantity is equal to 1. BUT if we click on the plus or the minus for every product having the minimum purchase quantity greater than 1, it's doing nothing. It gives the impression that the buttons are deactivated in this case.

Do you have any clue on what is going on?

Solution

  • as replied by @DarkBee, I simply needed to specify the value type of the "count" function.

    var count = parseInt($("#amountToBasket").val());