Raj Kumar Bhardwaj Raj Kumar Bhardwaj - 1 year ago 90
Javascript Question

Allow customers to add product in to cart only one time?

I need some help customizing my BigCommerce store.

After a product is added to the cart, I want the "Add to Cart" button for that product to change and say "Already in Cart".

Also, I only want the user to be able to add a product one time into his/her cart.

Here is button code:

<div class="ProductActionAdd" style="display:%%GLOBAL_HideActionAdd%%;">
<a href="%%GLOBAL_ProductURL%%"><input id="btnCopy" class="btn icon-%%GLOBAL_ProductAddText%%" title="%%GLOBAL_ProductAddText%%" type="button" value="Add to cart" onclick="return change(this);" /></a>

Can you please give me some suggestions on how to achieve this?

My store URL is: https://deepak-diwan-s-store.mybigcommerce.com

Answer Source

Without writing out the specific code, you can follow these general steps to achieve what you are seeking:

  1. Upon product page load, have a JS script do the following:
    a. Grab the SKU from the current product page.
    b. Perform an Ajax GET request to the cart page, and load the cart contents.
    c. If the cart contents :contains the product SKU from step A, then the product is in cart.
    d. If product is in cart, then change the button text and disable it.
    e. Else if product not already in cart, do nothing.

As a followup to your comment, add a click handler to the button to check if the customer should be unable to add the product to the cart again.

$('#id_of_button_here').on('click', function(event) {
  event.preventDefault(); //Stop button from adding product to cart temporarily. 
  // Read the button value to see if it equals 'INCART'
  if ($(this).val() === 'INCART') {
    alert('This product has already been added to the cart. You may not add it again');
    return false;
  } else {
    $(this).click(); //Click the button to proceed with normal operations.