Can the Out of Stock error message be customized?

When a user clicks Add To Cart on a product with no remaining inventory, an alert is displayed: Unable To Add Item ... We do not have enough of that item available.

Is it possible to modify this message? Is it possible to modify it for only one store or product category? 

On 8/15/2020 at 4:37 PM, ceze said:

When a user clicks Add To Cart on a product with no remaining inventory, an alert is displayed: Unable To Add Item ... We do not have enough of that item available.

Is it possible to modify this message? Is it possible to modify it for only one store or product category? 

We want that, too.

(Oddly, the default message we get says "Sorry, that item is out of stock." Does the message vary with template or version? We're on 7.0/Montauk.)

But we would REALLY like to have control over the message, because we have different kinds of products, and the default message makes no sense for any of them. E.g., on one product page, we have workshops sign-ups, and that message should say "Sorry, no space left in this workshop." And on another product page we have one-of-a-kind products, where the message should say "Sorry, that piece has been sold."

So, I am very much looking forward to finding a way to wrangle the message!

28 minutes ago, LKW said:

Oddly, the default message we get says "Sorry, that item is out of stock." Does the message vary with template or version? We're on 7.0/Montauk.

It could be that. It could also be the version of the store.

51 minutes ago, LKW said:

So, I am very much looking forward to finding a way to wrangle the message!

Please post URLs to some of the pages you want to customize the out of stock dialogs on and details about what you want each of those product dialogs to say. That way we can try to work up a couple of examples.

If your site is not public please set up a site-wide password, if you've not already done so. Post the password here.

We can then take a look at your issue.

19 hours ago, creedon said:

Please post URLs to some of the pages you want to customize the out of stock dialogs on and details about what you want each of those product dialogs to say.

@creedon Kindly take a look at:
https://www.whitprint.com/testw
https://www.whitprint.com/testa
Password is "tada".

When a shopper clicks "Add to Cart" on a sold-out product on the "testw" page, the error message should say "Sorry, no space left in this workshop." But for products on the "testa" page, the message should say "Sorry, this piece has been sold."

Thanks!

ps: I do know how to customize the "Sold Out" badge for a single product page, but for this test I left that customization out. "Sold" is our site-wide default text.

On 10/31/2020 at 12:05 PM, LKW said:

We want that, too.

Please see Change Unable to Add Item to Cart Alert.

This code only works when the site is out of Preview mode and the page is reloaded once using the noredirect query parameter. So when you take the site out of Preview, you will see the URL in the address bar for the product page. Add "?noredirect" (without the quotes) to the end of the URL and type return. Now you can click on the Add To Cart button and see the new unable to add message.

Your customers won't have to do anything special as they of course don't have access to your site backend or Preview mode.

The data structure at the top of the code should be pretty easy to understand. The key to triggering a modified unable to add message is the SKU of the product. Then just put in a message and optionally a title. If you have a product with multiple variants you only need to get the first variant SKU as the key to change the message for all the variants of that product.

Let us know how it goes.

Thanks, @creedon. I didn't use your exact code, because of the hardcoded SKUs, but I was able to distill your nicely annotated code into a generalized per-product-page solution.

If someone would kindly tell me how to insert a formatted code snippet on this forum I will gladly post it here. 🤔 (On Stackexchange you just click '{}' to insert code examples. What the heck is the equivalent on this forum? It's probably staring me right in the face...)

10 hours ago, LKW said:

If someone would kindly tell me how to insert a formatted code snippet on this forum I will gladly post it here. 🤔

You have to make the editor wide enough to get the <> button to appear.

I wish the <> button were first as I use it much more than link or quote! 🙂

I'll be interested to see the code you came up with! Thanks in advance for posting it!

2 hours ago, creedon said:

You have to make the editor wide enough to get the <> button to appear.

Thanks, @creedon. (But good heavens, I had to make my browser window 20% wider than my screen size to reveal that button!) Anyway, here's my hack:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

  $( ( ) => {
         
    /* change out of stock alert message */
    
    if ( ! $( '#productWrapper' ).length ) return;
    if ( ! 'MutationObserver' in window ) return;
        
    const observer = new MutationObserver ( function ( mutations ) {
      mutations.forEach ( function ( mutation ) {
      
        if ( ! mutation.addedNodes.length ) return;
        
        let $e = $( mutation.addedNodes [ 0 ] );

		if ( $e.hasClass ( 'sqs-widgets-confirmation' ) ) {

          $( '.title', $e ).text ( 'Limited Enrollment' );
          $( '.message', $e ).text ( 'Sorry, no space left in this workshop.' );

		  }    
        } );
      } );
      
    // starts listening for changes in body
    observer.observe ( document.body, {
      childList: true
      } );
    } );
    
</script>

The code is injected  on each product page with text appropriate to that product collection. I'm very happy with the way it looks. For example:

It is not a great  solution, though, because it works only with the Add to Cart buttons that appear on the product page or on the product detail page. (Which is all we need right now, but it would be nice to nip that button in the bud everywhere it appears.)

So I'm wondering if I can use product categories to filter products in other contexts. So I applied categories 'workshop' and 'artwork' to my test products, and displayed all the products on whitprint.com/testcombo (pw 'tada'). On that page, none of the Add to Cart buttons show my desired text. Is there a way your code could be adapted for product categories instead of SKUs to work on that page?

Alternatively, what about the "data-collection-id" thingy I see here and there in the page source? Seems like it maps to product pages -- can it be used for what I want?

Thanks in advance for your guidance.

2 hours ago, LKW said:

But good heavens, I had to make my browser window 20% wider than my screen size to reveal that button!

It is crazy! I've had to do that sometimes.

3 hours ago, LKW said:

It is not a great  solution, though

True but we're trying to do stuff SS didn't intend for us to do.

The main problem is in other circumstances there isn't anything to key off of that I can see. I haven't spent a lot of time digging into this but if anyone sees some way getting this done, please pitch in!

For example the whitprint.com/testcombo page doesn't seem to contain any references to the categories you mentioned. The data-collection-id is a reference to the page itself but doesn't give us any context about what is happening on that page.

12 hours ago, creedon said:

True but we're trying to do stuff SS didn't intend for us to do.

Sigh... Customizing end-user-visible text should be Thing One of a point-and-click web dev platform like SS.

Anyway, I got what I needed out of this thread, thanks to your help. Our fundraiser went live today and you can see it here if you're curious: whitprint.com/rafwelcome

(This project left me with a list of SS bugs and gotchas as long as my leg! One the one hand, I learned so much that setup will be a breeze if we do this again next year. On the other hand, I am wondering if it's time for us to shop for another platform. Ugh.)

Sorry to raise this stale thread from the dead.. but I'm trying to do exactly this right now.

I'm using Utica. I want to modify the message but I'm using a Content page with Product blocks (not using the store page).

I tried adding the above generic JS into the header of the content page.. but no change.

Also.. the message pops up top right without a darkened overlay and would be easy to miss.. but I get if this is too tough to change. If I could change the heading to red, that would help I think.

-------

Figured it out. I needed to swap out 

#productWrapper

for

.product-block

4 hours ago, pnwpaddler said:

the message pops up top right without a darkened overlay and would be easy to miss.. but I get if this is too tough to change

Add the following to Design > Custom CSS.

.sqs-widgets-confirmation-overlay {

  opacity : 0.4 !important;
  
  }

This is for a v7.1 site.

This is a site-wide effect.

On 11/4/2020 at 9:41 AM, LKW said:

Thanks, @creedon. (But good heavens, I had to make my browser window 20% wider than my screen size to reveal that button!) Anyway, here's my hack:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

  $( ( ) => {
         
    /* change out of stock alert message */
    
    if ( ! $( '#productWrapper' ).length ) return;
    if ( ! 'MutationObserver' in window ) return;
        
    const observer = new MutationObserver ( function ( mutations ) {
      mutations.forEach ( function ( mutation ) {
      
        if ( ! mutation.addedNodes.length ) return;
        
        let $e = $( mutation.addedNodes [ 0 ] );

		if ( $e.hasClass ( 'sqs-widgets-confirmation' ) ) {

          $( '.title', $e ).text ( 'Limited Enrollment' );
          $( '.message', $e ).text ( 'Sorry, no space left in this workshop.' );

		  }    
        } );
      } );
      
    // starts listening for changes in body
    observer.observe ( document.body, {
      childList: true
      } );
    } );
    
</script>

The code is injected  on each product page with text appropriate to that product collection. I'm very happy with the way it looks.

LKW - could you pls share where exactly you inserted this code? I am unable to find a place to insert code on a specific product page. Thanks for your guidance.

2 hours ago, midwicket said:

could you pls share where exactly you inserted this code?

The code is my code and is cited in my November 1, 2020 post earlier in this thread.

It's fairly old code so if you have issues, let me know and I'll try to update it.

15 hours ago, midwicket said:

LKW - could you pls share where exactly you inserted this code? I am unable to find a place to insert code on a specific product page. Thanks for your guidance.

 

In the product page's Settings popup, look for Advanced>Page Header Code Injection. (This is for 7.0, which is the only version I know.)