Jump to content

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

Recommended Posts

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

Screen Shot 2020-12-16 at 2.08.08 PM.png

Link to comment

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 4 months later...

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!

Link to comment

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 😉

Link to comment

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

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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

Edited by creedon
version 0.2d4

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

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

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

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

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

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? 

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

Edited by creedon
version 0.1d2

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

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

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 10 months later...

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

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
22 hours ago, Lalat said:

It does not work for me

It appears to be working to me.

1634263805_ScreenShot2022-04-05at10_24_23AM.png.c735a330b3e845063311985208fcd6e0.png

 

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 >

 

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.