Ad

Shopify Prevent Quantity Input Have Negative Numbers

- 1 answer

I have an issue with Shopify coding. I am using Shopify ajax and I don't understand why the input is accepting negative number as input.

Here's a gif on action.

Right now I've put a condition to reload page if quantity is less than 1 which works fine but I want to stop the input at 1 possibly.

The page I'm working at is this: sunfieldmusic.com/cart

Try adding anything to cart and try decreasing quantity to less than 1. (It should refresh the page as that's the current behavior.

My coding is as follows

HTML

      <button type="button"  class="update minusbt" data-id="{{ line_item.variant.id }}"> - </button>

      <input class=" cartquat quatinp" pattern="[0-9]*" min="1" name="updates[]" data-id="{{ line_item.variant.id }}" id="input_{{ line_item.variant.id }}" value="{{ line_item.quantity }}" type="text">

      <button type="button"  class="update plusbt" data-id="{{ line_item.variant.id }}"> + </button>

Jquery

$('body').on('click', '.plusbt', function () {


    var data_id = $(this).attr('data-id');
    var qty = $("#input_" + data_id).val();
    var qty = parseInt(qty) + parseInt(1);
    var variant_id = data_id;
    $("#input_" + data_id).val(qty);
    $.ajax({
        type: 'POST',
        url: '/cart/change.js',
        dataType: 'json',
        data: {
            quantity: qty,
            id: variant_id
        },
        success: function (cart) {
            $.each(cart.items, function (index, row) {
                if (variant_id == row.variant_id) $("#cartprice_" + variant_id).html('$' + parseFloat(row.line_price / 100).toFixed(2));
            });
            $("#cart_total").html('$' + parseFloat(cart.total_price / 100).toFixed(2));

        },
        error: function (response) {
            alert("error");
        }
    });
});

$('body').on('click', '.minusbt', function (e) {
    var data_id = $(this).attr('data-id');
    var qty = $("#input_" + data_id).val();
    var qty = parseInt(qty) - parseInt(1);
    var variant_id = data_id;
    $("#input_" + data_id).val(qty);

    $.ajax({
        type: 'POST',
        url: '/cart/change.js',
        dataType: 'json',
        data: {
            quantity: qty,
            id: variant_id,

        },

        success: function (cart) {

            if (qty < 1) {
                location.reload(); //Reload page as I don't know how to stop this from accepting negative numbers

            }

            $.each(cart.items, function (index, row) {
                if (variant_id == row.variant_id) $("#cartprice_" + variant_id).html('$' + parseFloat(row.line_price / 100).toFixed(2));
            });
            $("#cart_total").html('$' + parseFloat(cart.total_price / 100).toFixed(2));


        },
        error: function (response) {
            //alert(response);
        }
    });
});

Thank you in advance. I've tried to search before posting here but I came to no solution.

Ad

Answer

Return if quantity is less than zero

$('body').on('click', '.minusbt', function (e) {
        ...
        var qty = parseInt(qty) - parseInt(1);

        if (qty < 0) { return;}
        ....
Ad
source: stackoverflow.com
Ad