Jump to content

how to change the text on a "product unavailable" message

Recommended Posts

  • Replies 20
  • Created
  • Last Reply

Please give us the URL for the specific page where this dialog is appearing.

I'm not sure if we can help but I just created some code that addresses a similar 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
15 hours ago, creedon said:

Please give us the URL for the specific page where this dialog is appearing.

I'm not sure if we can help but I just created some code that addresses a similar issue.

 

Hi Creedon,  the page is https://lychee-lanternfish-y5ft.squarespace.com/design-your-own

Scroll down to step #5: Choose your cake. 

There are some variant combinations I don't offer, like this one (attached). So the message pops up when you add to cart. Thank you for your help!

Screen Shot 2020-11-02 at 10.48.49 AM.png

Link to comment

This looks to be a bit more complex than the other solution I mentioned. I've played with it a bit and I need to cogitate.

In the mean time if anyone else has a solution please contribute!

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

This is more experimental than a full solution. If you're willing to give it a go and report odd behaviour.

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

<script src="//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 item variant unavailable alert for v7.1 site */
    
    const data = {
    
      message: 'Sorry, we don\'t offer the combination you selected.',
      title: null /* null means don't change the title, to change title
                       replace null with text in single quotes */
      }
      
    const selector = '#block-yui_3_17_2_1_1603339579439_35196 .sqs-add-to-cart-button, ' +
    
      '#block-yui_3_17_2_1_1603400280103_36123 .sqs-add-to-cart-button';
      
    $( selector )
    
      .click ( function ( event ) {
      
        let s = $( this )
        
          .parent ( )
          
          .prevAll ( '.product-price' )
          
          .text ( );
          
        if ( s != 'Unavailable' ) return;
        
        let $alertDialog = $( '.sqs-widgets-confirmation' );
        
        if ( ! $alertDialog.length ) return;
        
        $( '.message', $alertDialog ).text ( data.message );
        
        if ( data.title !== null )
        
          $( '.title', $alertDialog ).text ( data.title );
          
        } );
        
    } );
    
  </script>

This is for a v7.1 site and specific to AndreaGC's products.

The selectors target the two cake related product blocks on the page.

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
On 11/4/2020 at 4:14 PM, creedon said:

This is more experimental than a full solution. If you're willing to give it a go and report odd behaviour.

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


<script src="//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 item variant unavailable alert for v7.1 site */
    
    const data = {
    
      message: 'Sorry, we don\'t offer the combination you selected.',
      title: null /* null means don't change the title, to change title
                       replace null with text in single quotes */
      }
      
    const selector = '#block-yui_3_17_2_1_1603339579439_35196 .sqs-add-to-cart-button, ' +
    
      '#block-yui_3_17_2_1_1603400280103_36123 .sqs-add-to-cart-button';
      
    $( selector )
    
      .click ( function ( event ) {
      
        let s = $( this )
        
          .parent ( )
          
          .prevAll ( '.product-price' )
          
          .text ( );
          
        if ( s != 'Unavailable' ) return;
        
        let $alertDialog = $( '.sqs-widgets-confirmation' );
        
        if ( ! $alertDialog.length ) return;
        
        $( '.message', $alertDialog ).text ( data.message );
        
        if ( data.title !== null )
        
          $( '.title', $alertDialog ).text ( data.title );
          
        } );
        
    } );
    
  </script>

This is for a v7.1 site and specific to AndreaGC's products.

The selectors target the two cake related product blocks on the page.

Let us know how it goes.

Awesome, Thank you! Just seeing this now. I'll paste it into the site and let you know if it works!!

 

Link to comment
On 11/4/2020 at 4:14 PM, creedon said:

This is more experimental than a full solution. If you're willing to give it a go and report odd behaviour.

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



<script src="//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 item variant unavailable alert for v7.1 site */
    
    const data = {
    
      message: 'Sorry, we don\'t offer the combination you selected.',
      title: null /* null means don't change the title, to change title
                       replace null with text in single quotes */
      }
      
    const selector = '#block-yui_3_17_2_1_1603339579439_35196 .sqs-add-to-cart-button, ' +
    
      '#block-yui_3_17_2_1_1603400280103_36123 .sqs-add-to-cart-button';
      
    $( selector )
    
      .click ( function ( event ) {
      
        let s = $( this )
        
          .parent ( )
          
          .prevAll ( '.product-price' )
          
          .text ( );
          
        if ( s != 'Unavailable' ) return;
        
        let $alertDialog = $( '.sqs-widgets-confirmation' );
        
        if ( ! $alertDialog.length ) return;
        
        $( '.message', $alertDialog ).text ( data.message );
        
        if ( data.title !== null )
        
          $( '.title', $alertDialog ).text ( data.title );
          
        } );
        
    } );
    
  </script>

This is for a v7.1 site and specific to AndreaGC's products.

The selectors target the two cake related product blocks on the page.

Let us know how it goes.

Hi, Just tried it and it didn't produce any changes.... 

 

 

 

Link to comment

I'm not seeing the code on your page. Did you uninstall it? If so, could you put it back and leave there a bit? I can then take a look at it and see if I can figure out what is happening.

I did test it here and just tested it again and it works for me.

883563350_ScreenShot2020-11-09at3_40_40PM.thumb.png.d135c801d257d1ce1979e79ca3188dfc.png

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

First I designed the code only to work with the page from the image in your second post. Which I think is the Design Your Own Wedding page. It may work in other locations, I don't know. We need to get the code going in one place first.

The code appears to be working from your site on the design your own wedding page.

2144283347_ScreenShot2020-11-10at7_08_03PM.thumb.png.7acc9cd81693a434dad3730772893363.png

When you did your test were you on the design your own wedding page?

You'll want to remove the code from the pages for which it wasn't intended.

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
28 minutes ago, creedon said:

I have an idea what is happening. Let me see if I can come up with some code that will help us confirm.

Thanks. Yes, I just spent alot of time on the phone w/ squarespace trying to figure out if this is a browser issue but I dont think it is.

 

Link to comment
On 11/11/2020 at 12:25 PM, AndreaGC said:

Thanks. Yes, I just spent alot of time on the phone w/ squarespace trying to figure out if this is a browser issue but I dont think it is.

 

Yes! It works on both Safari and Chrome in incognito! The message comes up in the upper left corner, however. Not a big deal, but if theres a way to get it more to the center that would be ideal.  Thank you so much!!

Screen Shot 2020-11-11 at 9.56.06 AM.png

Link to comment
20 minutes ago, AndreaGC said:

Yes! It works on both Safari and Chrome in incognito! The message comes up in the upper left corner, however. Not a big deal, but if theres a way to get it more to the center that would be ideal.  Thank you so much!!

1138583671_ScreenShot2020-11-12at2_28_57PM.thumb.png.41d8a5e9feac6b53314f52eb6740a90d.png

Screen Shot 2020-11-11 at 9.56.06 AM.png

On 11/11/2020 at 12:25 PM, AndreaGC said:

Thanks. Yes, I just spent alot of time on the phone w/ squarespace trying to figure out if this is a browser issue but I dont think it is.

 

Yes! It works on both Safari and Chrome in incognito! The message comes up in the upper left corner, however. Not a big deal, but if theres a way to get it more to the center that would be ideal.  Thank you so much!!

Link to comment

Archived

This topic is now archived and is closed to further replies.

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