Can the "unable to add item" message be customized on 7.1?

Site URL: https://www.thefriendsofACE.org

Hi,

Is there a way to customize the pop-up message that displays when the stock of a service is at 0? Currently, it shows the attached image but I'd like it to read "THIS CLASS IS SOLD OUT - To add your name to the wait list, please email info@thefriendsoface.org"

Is that possible?

An example is when you click "add to cart" on this page: https://www.thefriendsoface.org/master-calendar/art-exploration-for-kids-wednesdays-85rel-xwezr-myggg-2hxaz-kj7gy

Hi. Have you found the solution yet?

Also, I see 3 buttons on tablet not align. Do you want to fix this? On this page. https://www.thefriendsoface.org/

and the site has huge border on right of screen.

Add the following to Settings > Advanced > Code Injection > HEADER. 

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

Add the following to Page Settings > Advanced > Page Header Code Injection for the page.

<script>

  $( ( ) => {
  
    // change unable to add item alert for some product blocks of a v7.1 site
    
    /*
    
      this code only works when you are not logged into your site. to test you
      need to log out of your site completely or view in an Incognito (Chrome),
      Private Window (Safari), InPrivate (Internet Explorer), and etc window.
      
      */
      
    const replacmentText = {
    
      /*
      
        if the message or title has single quotes in them then put a backslash
        before the single quotes. example: it's becomes it\'s.
        
        */
        
      message: 'THIS CLASS IS SOLD OUT - To add your name to the wait list, please email <a href="mailto:info@thefriendsoface.org">info@thefriendsoface.org</a>',
      title: null /* null means don't change the title, to change replace null
                     with text in single quotes */
      }
      
    /*
    
      enter product block ids for each product block for which you want to
      change the unavailable message
      
      */
      
    const productBlockIds = [
    
      // do not inlcude the # at the beginning
      
      // last or only item doesn't get a comma at the end
      
      'block-be5ef6fbbf1c41388ec4'
      
      ]
      
    // do not change anything below, there be the borg here
    
    window.alertDialogText;
    
    const selector = $.map ( productBlockIds, function ( v ) {
    
      return '#' + v + ' .sqs-add-to-cart-button';
      
      } )
      
      .join ( ', ' );
      
    function setAlertDialogText ( $alertDialog, message, title ) {
    
      $( '.message', $alertDialog ).html ( message );
      
      if ( replacmentText.title !== null )
      
        $( '.title', $alertDialog ).text ( title );
        
      }
      
    $( selector )
    
      .click ( function ( event ) {
      
        let $alertDialog = $( '.sqs-widgets-confirmation' );
        
        if ( $alertDialog.length ) {
        
          setAlertDialogText ( $alertDialog, replacmentText.message,
          
            replacmentText.title );
          
          } else {
          
            window.alertDialogText = replacmentText;
            
            }
            
        } );
        
    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' ) ) return;
        
        if ( typeof window.alertDialogText == 'undefined' ) return;
        
        let replacmentText = window.alertDialogText;
        
        setAlertDialogText ( $e, replacmentText.message, replacmentText.title );
        
        window.alertDialogText == undefined;
        
        } );
        
      } );
      
    // starts listening for changes in body
    
    observer.observe ( document.body, {
    
      childList: true
      
      } );
      
    } );
    
  </script>

This is for a v7.1 and there is a caveat about how it works.

Let us know how it goes.

I am trying to achieve the same. I can't figure out how to get hold of the product block ids though. With the chrome Squarespace ID finder there are no IDs shown for the single products… Also is there away to change the message for a selection (color/ size) not being made aswell? Thank you so much for your help!

@Franziska

A product block is different from a product detail page. Which one do you want to modify?

My code works on products blocks.

Oh maybe I misunderstood the post above. I wan't to modify the message that appears after clicking on "add to card" on a product detail page without having a) done all the selections (color/size) needed or b) if you want to order more than available/stocked. it's something like "unable to add item. reason…" – not sure about the exact text because I am seeing it in German 😉

@Franziska

I think the code could be adapted to work with product detail pages.

Please post the URL for a product detail page your site where you want the messages changed.

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

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

Thank you!

https://www.lupinion.eco/shop/p/lupinion-pure
PW: Lupinion2021

On 5/6/2021 at 12:45 PM, Franziska said:

a) done all the selections (color/size) needed

Not sure if this exactly what you need but I followed the style of your other dual language text.

You don't need to do this step. But for others following along who haven't done so, do this step.

Add the following to Settings > Advanced > Code Injection > HEADER.

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

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page.

<script>

  /*
  
    change unable to add item to cart alert for unselected variants
    
    Version         : 0.1d0
    
    SS Versions     : 7.0, 7.1
    
    v7.0 Templates  : Brine ( Aria, Blend, Cacao, Clay, Fairfield, Feed,
                      Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact,
                      Jaunt, Juke, Keene, Kin, Lincoln, Maple, Margot, Marta,
                      Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva,
                      Pedro, Pursuit, Rally, Rover, Royce, Sofia, Sonora,
                      Stella, Thorne, Vow, Wav, West )
                      
                      your template is not listed? then it is not currently
                      supported
                      
    Dependancies    : jQuery
    
    By              : Thomas Creedon < http://www.tomsWeb.consulting/ >
    
    */
    
    const removeDuplicatedText = ( message, title, unselected ) => {
    
      message = message.split ( '<br><br>' );
      
      $.each ( message, function ( i, v ) {
      
        $.each ( unselected, function ( j, v ) {
        
          const s = v.split ( ' / ' ) [ i ];
          
          message [ i ] = message [ i ].replace ( v, s );
          
          } );
          
        } );
        
      message = message.join ( '<br><br>' );
      
      return [ message, title ];
      
      };
      
  </script>

<script>

  $( ( ) => {
  
    /*
    
      change unable to add item to cart alert for unselected variants
      
      Version         : 0.2d4
      
      SS Versions     : 7.0, 7.1
      
      v7.0 Templates  : Brine ( Aria, Blend, Cacao, Clay, Fairfield, Feed,
                        Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact,
                        Jaunt, Juke, Keene, Kin, Lincoln, Maple, Margot, Marta,
                        Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva,
                        Pedro, Pursuit, Rally, Rover, Royce, Sofia, Sonora,
                        Stella, Thorne, Vow, Wav, West )
                        
                        your template is not listed? then it is not currently
                        supported
                        
      Dependancies    : jQuery
      
      Notes           : this effect is not active in SS Preview to test it use
                        private browsing < https://bit.ly/3f6lhq2 >.
                        
      By              : Thomas Creedon < http://www.tomsWeb.consulting/ >
      
      */
      
    const text = {
    
      /* use [unselected] and [plural] in message to insert the unselected
         variant(s) and add the plural form to the language equivalent of the
         english word option in the text being added */
      
      message : 'Please select the [unselected] option[plural].',
      
      title : 'Unable to Add Item', // leave empty for no title change
      
      plural : 's',
      
      conjunction : 'and'
      
      }
      
    /* set append to true if you want to add the text instead of replacing,
       useful for multi-language sites */
    
    const append = true;
    
   /* post processor for further manipulation of the alert text. replace
      undefined with the name of your custom function. three parameters will be
      passed to your function : message, title, and unselected. unselected is an
      array of strings of the titles of the unselected variants. your function
      must return message and title in an array */
      
    const postProcessor = removeDuplicatedText;
    
    // do not change anything below, there be the borg here
    
    if ( window.frameElement !== null ) return; // bail if in Preview
    
    // bail if not product detail page
    
    if ( ! $( '.ProductItem' ).length ) return;
    
    // bail if no mutation observer available
    
    if ( ! ( 'MutationObserver' in window ) ) return;
    
    const $unselected = $( '.product-variants' );
    
    const observer = new MutationObserver ( function ( mutations ) {
    
      // bail if all options selected
      
      if ( $unselected.attr ( 'data-unselected-options' ) == '[]' ) return;
      
      $.each ( mutations, function ( mutation ) {
      
        if ( ! this.addedNodes.length ) return;
        
        const $addedNode = $( this.addedNodes [ 0 ] );
        
        // bail if this mutation is not the alert dialog
        
        if ( ! $addedNode.hasClass ( 'sqs-widgets-confirmation' ) ) return;
        
        const $message = $( '.message', $addedNode );
        
        const $title = $( '.title', $addedNode );
        
        let message = $message.text ( );
        
        let title = $title.text ( );
        
        let unselected = $unselected.attr ( 'data-unselected-options' );
        
        unselected = JSON.parse ( unselected );
        
        let s = [ ...unselected ];
        
        // begin message
        
          // begin string unselected variants together
          
            const length = s.length - 1;
            
            if ( length > 0 ) {
            
              for ( let i = length; i; i-- ) {
              
                let conjunction;
                
                if ( i == length ) {
                
                  conjunction = ' ' + text.conjunction + ' ';
                  
                  } else {
                  
                    conjunction = ', ';
                    
                    }
                    
                s.splice ( i, 0, conjunction );
                
                }
              }
              
            s = s.join ( '' );
            
            text.message = text.message.replace ( '[unselected]', s );
            
            // end string unselected variants together
            
          // begin plural
          
            s = length ? text.plural : '';
            
            text.message = text.message.replace ( '[plural]', s );
            
            // end plural
            
          message = append ? message + '<br><br>' + text.message : text.message;
          
          // end message
          
        if ( text.title ) { // title
        
          if ( append ) {
          
            $title.after ( '<hr>' );
            
            title = title + '<br><br>' + text.title;
            
            } else {
            
              title = text.title;
              
              }
          }
          
        if ( postProcessor !== undefined ) // post processor
        
          [ message, title ] = postProcessor ( message, title, unselected );
          
        $message.html ( message );
        
        $title.html ( title );
        
        } );
        
      } );
      
    // starts listening for changes in body
    
    observer.observe ( document.body, {
    
      childList : true
      
      } );
      
    } );
    
  </script>

Let us know how it goes.

Item b is a second piece of code at which I plan to take a look.

Thank you so much for your work! Unfortunately nothing changes after adding your code.

@Franziska

If you move the following from Settings > Advanced > Code Injection > FOOTER to Settings > Advanced > Code Injection > HEADER. That should take care of the issue.

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

Let us know how it goes.

Thank you so much! Works like a charm. The only issue is that stock-error-message now displays the same English text as the option-not-selected-message.

If I understand what you want. Instead of the following.

You want something like the following?

@Franziska

I have updated my code post. The new code adds support for an optional user post processing alert text function. I wrote the user function which I think will do what you want.

No, the code was fine for the "options not selected" error! The only problem was, that with the code the same message was shown for another type of errors aswell – "sorry, we only have one item left" (when trying to order more items than stocked). I would need to be able to change the text for each error. Is what I wrote understandable? 

@Franziska

Ah. Now I see! I'll look into the issue.

The updated code I posted I think will take care of the issue of the wrong message showing.

On 5/6/2021 at 12:45 PM, Franziska said:

b) if you want to order more than available/stocked. it's something like "unable to add item. reason…" – not sure about the exact text because I am seeing it in German 😉

You don't need to do this step. But for others following along who haven't done so, do this step.

Add the following to Settings > Advanced > Code Injection > HEADER.

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

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page.

<script>

  $( ( ) => {
  
    /*
    
      change unable to add item to cart alert for out of stock variants
      
      Version         : 0.1d2
      
      SS Versions     : 7.0, 7.1
      
      v7.0 Templates  : Brine ( Aria, Blend, Cacao, Clay, Fairfield, Feed,
                        Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact,
                        Jaunt, Juke, Keene, Kin, Lincoln, Maple, Margot, Marta,
                        Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva,
                        Pedro, Pursuit, Rally, Rover, Royce, Sofia, Sonora,
                        Stella, Thorne, Vow, Wav, West )
                        
                        your template is not listed? then it is not currently
                        supported
                        
      Dependancies    : jQuery
      
      Notes           : this effect is not active in SS Preview to test it use
                        private browsing < https://bit.ly/3f6lhq2 >.
                        
      By              : Thomas Creedon < http://www.tomsWeb.consulting/ >
      
      */
      
    const text = {
    
      message : 'Sorry, we do not have enough of that item available.',
      
      title : 'Unable to Add Item' // leave empty for no title change
      
      }
      
    /* set append to true if you want to add the text instead of replacing,
       useful for multi-language sites */
    
    const append = true;
    
   /* post processor for further manipulation of the alert text. replace
      undefined with the name of your custom function. two parameters will be
      passed to your function : message and title. your function must return
      message and title in an array */
      
    const postProcessor = undefined;
    
    // do not change anything below, there be the borg here
    
    if ( window.frameElement !== null ) return; // bail if in Preview
    
    // bail if not product detail page
    
    if ( ! $( '.ProductItem' ).length ) return;
    
    // bail if no mutation observer available
    
    if ( ! ( 'MutationObserver' in window ) ) return;
    
    const $productVariants = $( '.product-variants' );
    
    const observer = new MutationObserver ( function ( mutations ) {
    
      const isInStock = $productVariants.attr ( 'data-variant-in-stock' );
      
      if ( isInStock == 'true' ) return; // bail if variant in stock
      
      $.each ( mutations, function ( mutation ) {
      
        if ( ! this.addedNodes.length ) return;
        
        const $addedNode = $( this.addedNodes [ 0 ] );
        
        // bail if this mutation is not the alert dialog
        
        if ( ! $addedNode.hasClass ( 'sqs-widgets-confirmation' ) ) return;
        
        const $message = $( '.message', $addedNode );
        
        const $title = $( '.title', $addedNode );
        
        let message = $message.text ( );
        
        let title = $title.text ( );
        
        // message
        
        message = append ? message + '<br><br>' + text.message : text.message;
        
        if ( text.title ) { // title
        
          if ( append ) {
          
            $title.after ( '<hr>' );
            
            title = title + '<br><br>' + text.title;
            
            } else {
            
              title = text.title;
              
              }
          }
          
        if ( postProcessor !== undefined ) // post processor
        
          [ message, title ] = postProcessor ( message, title );
          
        $message.html ( message );
        
        $title.html ( title );
        
        } );
        
      } );
      
    // starts listening for changes in body
    
    observer.observe ( document.body, {
    
      childList : true
      
      } );
      
    } );
    
  </script>

This code covers the out of stock alert.

We'll need to add an item c) which handles when the user tries to order more items than are in stock.

@Franziska

This should take care of item c).

Please see Change Unable to Add Item to Cart Alert for Only N Available.

Let us know how it goes.

It woooorks 🎉 Thank you so much for your work and your patience! 

It does not work for me please help as my store page is this https://ellipse-ellipsoid-wkd6.squarespace.com/shop

Squarespace 7.0 brine template

@Lalat

Is the code currently installed?

Your site is not public please set up a site-wide password.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

Hi its ellipse-ellipsoid-wkd6.squarespace.com and password demo123

22 hours ago, Lalat said:

It does not work for me

It appears to be working to me.

Did you see the following note in the code?

Quote

this effect is not active in SS Preview to test it use private browsing < https://bit.ly/3f6lhq2 >

Hi whenever i change the text it does not change