Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

Can the Out of Stock error message be customized?


ceze

Question

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? 

Screen Shot 2020-08-15 at 7.24.47 PM.png

Link to comment
  • Answers 12
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

12 answers to this question

Recommended Posts

  • 0
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? 

Screen Shot 2020-08-15 at 7.24.47 PM.png

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!

Link to comment
  • 0
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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0
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.

Link to comment
  • 0
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.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

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...)

 

Link to comment
  • 0
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.

1790064607_ScreenShot2020-11-03at1_54_53PM.png.3c6b42aff05af7d0ed9fe747968374ed.png

 

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!

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0
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:

sold-out-pop-up-1.png.0a336c68e84d8d9a4d4f35bbfc52473d.png

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.

Link to comment
  • 0
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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0
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.)

Link to comment
  • 0

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
Edited by pnwpaddler
update with solution
Link to comment
  • 0
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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...