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

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


KatherineSwetman

Question

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 post
  • Answers 19
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

@Franziska This should take care of item c). 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 > Advance

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

Posted Images

19 answers to this question

Recommended Posts

  • 0

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.

Link to post
  • 0

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 best , and see my profile. Thanks for your support!

Link to post
  • 0

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

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

@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 best , and see my profile. Thanks for your support!

Link to post
  • 0
Posted (edited)
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 best , and see my profile. Thanks for your support!

Link to post
  • 0

@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 best , and see my profile. Thanks for your support!

Link to post
  • 0

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.

Bildschirmfoto 2021-05-11 um 08.59.40.png

Link to post
  • 0

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 post
  • 0
Posted (edited)
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 best , and see my profile. Thanks for your support!

Link to post
  • 0

@Franziska

This should take care of item c).

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 only n available
      
      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
      
      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 [n] in message to insert the quantity in stock
      
      message : 'Sorry, we only have [n] 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 observer = new MutationObserver ( function ( mutations ) {
    
      $.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;
        
        let selectedVariant = $( '.product-variants' )
        
          .attr ( 'data-selected-variant' );
          
        // bail if no selected variant
        
        if ( selectedVariant === undefined ) return;
        
        selectedVariant = JSON.parse ( selectedVariant );
        
        const quantity = $( '.product-quantity-input input' ).val ( );
        
        const quantityInStock = selectedVariant.qtyInStock;
        
        if ( quantity <= quantityInStock ) return;
        
        const $message = $( '.message', $addedNode );
        
        const $title = $( '.title', $addedNode );
        
        let message = $message.text ( );
        
        let title = $title.text ( );
        
        // begin message
        
          text.message = text.message.replace ( '[n]', quantityInStock );
          
          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 );
          
        $message.html ( message );
        
        $title.html ( title );
        
        } );
        
      } );
      
    // start listening for changes in body
    
    observer.observe ( document.body, {
    
      childList : true
      
      } );
      
    } );
    
  </script>

Let us know how it goes.

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

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...