Add To Cart Quantity Script - Overwriting quantity instead of adding.

New Member
5 0 0

Hi.

We have abserved that most of the times when customers press Add to Cart multiple times, they do it accidently with no intention to increase quantity. 

Is it possible that when clicking on Add to Cart, the cart quantity gets overwritten, instead of getting added.

Eg: When a customer adds three units to cart and then again adds two units to cart, the cart total is two units, instead of five units.

Code curently used:

product.liquid

{
    % if product.available %
}
<div class="product-add"> {
    % if settings.product_quantity %
}
{
    % if product.type contains "Fabrics" %
}
<h5> {
    {
        'products.product.length' | t
    }
}
</h5> <p>(in mtrs)</p> <a class="down" field="quantity"><i class="icon-minus"></i></a> <input min="1" type="text" name="quantity" class="quantity" value="1" /> <a class="up" field="quantity"><i class="icon-plus"></i></a><br><br> {
    % endif %
}
{
    % endif %
}
<input type="submit" name="button" class="add" value="{{ 'products.product.add_to_cart' | t }}" /> </div> <p class="add-to-cart-msg"></p> {
    % endif %
}



theme.js


function addToCartSuccess (jqXHR,
textStatus,
errorThrown) {
    $.ajax( {
        type: 'GET', url: '/cart.js', async: false, cache: false, dataType: 'json', success: updateCartDesc
    }
    );
    $('#crt').addClass('block');
    setTimeout(function () {
        $('#crt').removeClass('block');
    }
    ,
    3000);
    {
        % capture link %
    }
    <a href="/cart"> {
        {
            'products.product.add_to_cart_success_link' | t
        }
    }
    </a> {
        % endcapture %
    }
    $('.add-to-cart-msg').hide().addClass('success').html('Item added to Cart! <a href="/cart" title="view cart"><div class="clear"></div>Click here to view Cart and Check Out &raquo;</a>').fadeIn();
}
function addToCartFail(jqXHR,
textStatus,
errorThrown) {
    var response $.parseJSON(jqXHR.responseText);
    $('.add-to-cart-msg').hide().addClass('error').html('Your requested quantity exceeds what is currently available. </br> You may have already added all available quantity to your <a href="/cart" title="view cart"><div class="clear"></div> Cart</a>. If not, please reduce quantity and try adding again.<br>').fadeIn();
}

 

We shall be deeply obliged with any help on this.

Thanks.

Umang

0 Likes
New Member
5 0 0

Hi.

We did some more research on this and discovered this document:

https://help.shopify.com/themes/development/getting-started/using-ajax-api#change-cart

The update call mentioned in this documents seems to be doing exactly what we intend to do.

However, after editing our script, we cant get it to add product to cart.

We also found this document which says that update call doesnt work the way shopify has mentioned in the document:

https://ecommerce.shopify.com/c/ecommerce-design/t/cart-update-js-ajax-has-no-documentation-171567

We are attaching the edited script for reference:

function addToCart(e){
  
  if (typeof e !== 'undefined') e.preventDefault();
  
  var form      = $(this).parents('form');
  
  $.ajax({
    type: 'POST',
    url: '/cart/update.js',
    async: false,
    data: form.serialize(),
    dataType: 'json',
    error: addToCartFail,
    success: addToCartSuccess,
    cache: false
  });
  
}

function addToCartSuccess (jqXHR, textStatus, errorThrown){
  
  $.ajax({
    type: 'POST',
    url: '/cart/update.js',
    async: false,
    cache: false,
    dataType: 'json',
    success: updateCartDesc
  });

  $('#crt').addClass('block');

  setTimeout(function () { 
    $('#crt').removeClass('block');
  }, 3000);  

  
  {% capture link %}
  <a href="/cart">{{ 'products.product.add_to_cart_success_link' | t }}</a>
  {% endcapture %}


 $('.add-to-cart-msg').hide().addClass('success').html('Item added to Cart! <a href="/cart" title="view cart"><div class="clear"></div>Click here to view Cart and Check Out &raquo;</a>').fadeIn();
}

function addToCartFail(jqXHR, textStatus, errorThrown){
  var response = $.parseJSON(jqXHR.responseText);
 
  
$('.add-to-cart-msg').hide().addClass('error').html('Your requested quantity exceeds what is currently available. </br> You may have already added all available quantity to your <a href="/cart" title="view cart"><div class="clear"></div> Cart</a>. If not, please reduce quantity and try adding again.<br>').fadeIn();

}

 

We look forward to any help on this..

 

Thanks

Umang

0 Likes
Highlighted
Shopify Staff
Shopify Staff
81 0 11

I'll move this to Shopify Design

0 Likes