Adding an alert / code to add to cart function

[Jentsch]

Hi,

Might be posted in the wrong sub forum. 

I've noticed on our website that when the quantity added to cart is > the available quantity the cart isn't updated and no alert is given to the customer - basically the cart fails.

Checking the API in Shopify the cart does return a 422 error because there isn't the inventory available to add to the cart. Makes sense but without the logic to notify that is a bad CX.

I am wondering if/how/has anyone managed to add an alert or add additional functionality to the add to cart function and if so where this might be located? The below is what I've found in our theme.js (I assume its js triggering this):

 addItemFromForm: function(data) {
      return this._updateCart({
        type: 'POST',
        url: theme.routes.cartAdd,
        data: data,
        dataType: 'json'
      });
    }

Is that the best place to code the alert ? If anyone has a resource happy to read.

Thanks,

Jake

[EcomGraduates]

hello there  

Yes, you can add an alert or additional functionality to the "add to cart" function in your Shopify store to notify the customer if the available quantity is less than the requested quantity. You can modify the code in your theme.js file to achieve this.

Here's a general outline of how you can do it:

1. In the "addItemFromForm" function in your theme.js file, you can add a callback function to handle the response from the Shopify API when a customer attempts to add an item to their cart. This function will be called after the API response is received.

2. Inside the callback function, you can check the API response to see if there was an error due to insufficient inventory. If there was, you can display an alert to the customer using JavaScript.

Here's an example of what the modified code might look like:

addItemFromForm: function(data) {
  return this._updateCart({
    type: 'POST',
    url: theme.routes.cartAdd,
    data: data,
    dataType: 'json'
  }, function(response) {
    if (response.status === 422) {
      alert("Sorry, there isn't enough inventory to add this item to your cart.");
    }
  });
}

In this example, we added a callback function to the "_updateCart" method that checks if the API response status is 422 (which indicates an inventory error). If it is, an alert is displayed to the customer informing them of the issue.