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

Site URL: https://lychee-lanternfish-y5ft.squarespace.com/

Hi, does anyone know how to change the text on the pop up notification pictured here?  This pops up when the variant combination on a product is not available

I'd like it say  "sorry, we don't offer the combination you selected" instead.

Thank you!

I'm using version 7.1

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.

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!

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!

ok, thank you! I'll keep an eye out for any updates. 🙂

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.

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

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

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.

Hi, Yes, I took it out but I'll put it back now...  Thank you!

Ok, I added all the code. The page setting code I added to the following pages marked in red

I still get the same template reply.

Thank you looking into the issue now.

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.

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.

Hi again, for some reason its still not working on my end. I have been trying it on the design your own wedding page, in both Chrome and Safari. Do you think this might be an issue with my browser? 

Hi Thomas, I can see the code is working on my phone, but I think I'm having a browser issue b/c I can't see it on my desktop. But it looks like the code is good! Thank you, thats amazing!

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

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.

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

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

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