Edit 'You can only add 1 XXXX to the basket' error message on product page - Brooklyn theme

New Member
6 0 0

Hello,

 

Can anyone help? - I've been playing with product quantities on certain products and testing how this works if you try to add more product than I have in stock.

 

If I try to add more products to the cart, it gives me an error message under the button.

 

I just need to be able to edit the message which appears when I do this. At the moment it gives me a red outlined error message box with the copy (for example - 'You can only add 1 XXXX to the basket'). I would like to change this message and edit the styling slightly.

 

I've found the div with class "errors qty-error" in the 'theme.js.liquid' file. This is serving some data...

 

 

  itemErrorCallback = function(XMLHttpRequest) {
    var data = eval('(' + XMLHttpRequest.responseText + ')');
    $addToCart.removeClass('is-adding is-added');

    if (data.message) {
      if (data.status === 422) {
        $formContainer.after(
          '<div class="errors qty-error">' + data.description + '</div>'
        );
      }
    }
  };

 

 

but I believe this is what I need to edit to put in a new message. But I have no idea how to do this.

 

I've tried the language settings under 'Themes > Actions', as I know this is where I can edit other error messages, but no joy.

 

Any help would be most appreciated.

 

Thanks

Marianne.

0 Likes
Astronaut
834 94 177

console.log(data) so that you can see what methods the object has. It may have the quantity amount in there and you can serve up a custom message instead of data.description

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
New Member
6 0 0

Hi Ninthony,

 

Thanks for the response. But I'm pretty new to Shopify and only just getting my head around how the liquid files work.

I'm not really sure where to find the console log (data). Is that a file I need to edit? Where should I look?

 

Thanks for the help.

M

0 Likes
Astronaut
834 94 177

If you are just trying to give a more ambiguous message you could just put it in place of data.description:

 

  itemErrorCallback = function(XMLHttpRequest) {
    var data = eval('(' + XMLHttpRequest.responseText + ')');
    $addToCart.removeClass('is-adding is-added');
    console.log(data)
    if (data.message) {
      if (data.status === 422) {
        $formContainer.after(
          '<div class="errors qty-error">This message will come up instead of data.description</div>'
        );
      }
    }
  };

Just make sure you get rid of the single quotes and plus signs.

 

console.log() is javascript, which is what the code you posted above is. I don't quite understand your code because I'm sure that's not all of it. But I see they are declaring a variable data, and evaluating it. Then they are using methods of data: "data.message" and "data.description" -- So I assume there are other methods. So data probably looks something like this:

 

//this is probably roughly what the data object looks like:

{
message: "This is whatever message is stored in data",
description: "This is whatever description is stored in data"
}

// for all I know it may have more methods than those which you can access like quantity_available perhaps:

{
message: "This is whatever message is stored in data",
description: "This is whatever message is stored in description",
quantity_available: 2,
}

// So doing something like:

data.quantity_available

// the output would be 2

So if you do console.log(data) inside that function, when you get that error if you right click and inspect your page, the object will be logged in the console and you can see what methods you can access. 

 

  itemErrorCallback = function(XMLHttpRequest) {
    var data = eval('(' + XMLHttpRequest.responseText + ')');
    $addToCart.removeClass('is-adding is-added');
    console.log(data)
    if (data.message) {
      if (data.status === 422) {
        $formContainer.after(
          '<div class="errors qty-error">' + data.description + '</div>'
        );
      }
    }
  };

 

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
New Member
6 0 0

Hi, 

I think I've sussed this now.

A little more digging and I've found the 'en.default.json' file in the 'Locales' folder, and managed to edit the message in here.

 

Thanks

M

0 Likes
New Member
6 0 0

Thanks for the help Ninthony.

 

Unfortunately I don't really understand Javascript, so I don't really get what this is doing, but I worked out that it was referencing this json file.

I wanted to keep the quantity and name of the product, not just have a generic message. I was just wanting to edit the message slightly, so it read a little clearer for the customer.

 

Thanks again.

M

0 Likes
Astronaut
834 94 177

Thats great, I'm glad you got it figured out.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
New Member
6 0 0

Hi Ninthony,

 

Thanks for that.

I'm just curious too...

 

So the message I was wanting to edit was on my product page and was regarding stock issues. If someone tried to add more product than was available, then they see a message telling them they can't add any more stock to the cart.

 

I'm wanting a similar message on my 'cart drawer', for example if they have already added the product, and this is the last one in stock, but the customer then tries to add more in the quantity picker, I want a similar message to appear. At present it doesn't give any feedback, but just doesn't allow the customer to add any more to the quantity.

 

Anyway, I was just wondering how easy it is to add a similar message. Do you have any idea how I might accomplish this? Is it a case of copying some javascript to another area of the site - more json files?

 

Thanks if you can help.

 

Regards

Marianne

0 Likes
Astronaut
834 94 177

I messed around with the javascript on brooklyn for about an hour this morning trying to get it to work, unfortunately I didn't have any luck. I almost had it,  but I can't get the inventory quantity with ajax, it just tells me it's tracked by shopify but not the amount left. Does anyone else know if you can get the inventory through javascript somehow?

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
New Member
6 0 0

Thanks so much Ninthony, for your help on this. I really appreciate it.

I'm thinking that it is much more complicated than I originally thought it might be.

 

It seems like that functionality should be present in the cart, if it is there on the product page, but I guess not.

I was looking in that json file, but not very clear where that might be.

 

This is where it gets really frustrating to use Shopify. It isn't that user friendly, when it come to adding basic functionality.

 

Hoping somebody might be able to help with this?

 

Thanks again

M

0 Likes