Javascript not working for mobile information bar

Site URL: https://www.stonesthrowsc.com/

Hey there all,

I hope you are doing well, I am trying to change the Email text on Mobile Information Bar, I successfully changed the Email Icon to my custom icon using the following CSS:
 

/* Change the Email icon in mobile information bar to plate icon */
.sqs-mobile-info-bar-trigger[data-type="contactEmail"] .sqs-mobile-info-bar-trigger-icon {
  background-image: url(//static1.squarespace.com/static/573f135159827e68d0f8b018/t/57408d3607eaa04caaa22bea/1463848246956/plate-fork-icon.png)!important;
}

I then used the JS to change the Link behind email:

<script>
$(window).bind("load", function() {
  $('.sqs-mobile-info-bar-trigger[data-type="contactEmail"] .sqs-mobile-info-bar-trigger-label').text('Book');
  $("a[href='mailto:xxx@test.com']").attr('href', '/book')
});
</script>

The issue is, JS is not changing the EMAIL text to BOOK.

Thanks in advance :-)

Best, Najiyya
 

Can you enable mobile info bar? We can check easier

Hey, it's enabled. Please check this on the mobile.

Thank You

On 1/11/2021 at 3:57 AM, NajiyyaYounas said:

The issue is, JS is not changing the EMAIL text to BOOK.

It appears to be working to me. The actual code in Settings > Advanced > Code Injection > HEADER is as follows.

<script>
$(window).bind("load", function() {
  $('.sqs-mobile-info-bar-trigger[data-type="contactEmail"] .sqs-mobile-info-bar-trigger-label').text('Book');
  $("a[href='mailto:xxx@test.com']").attr('href', '/reservations')
});
</script>

And clicking on it goes to the reservations page. If you do want to go to a page called book then change reservations to book and make a page for book.

I suggest replacing the code with the following.

<script>

  $( ( ) => {
  
    // change mobile bar email link to reservations link
    
    const label = "Book";
    
    const url = '/reservations';
    
    let $e = $( '.sqs-mobile-info-bar-trigger[data-type="contactEmail"]' );
    
    $( 'a', $e ).attr ( 'href', url );
    
    $( '.sqs-mobile-info-bar-trigger-label', $e ).text ( label );
    
    } );
    
  </script>

This is for a v7.0 using a custom template.

It accomplishes the same goal just organized differently.

Let us know how it goes.

Hey creedon,

Thank you so much for your response. I tried both codes again, but the EMAIL is not changing at any cost.

I don't know whats an issue.

Thank You!

13 hours ago, NajiyyaYounas said:

I don't know whats an issue.

As I said I see the code working without doing anything on my end. I load your site I see a BOOK icon and when I click it goes to < https://www.stonesthrowsc.com/reservations >.

What happens if you go into Full Preview? You can also try looking at your site in a private browsing window. Does it work then?

Although not related to your issue I suggest you remove the following from Settings > Advanced > Code Injection > HEADER.

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

You only need to load jQuery once. You have multiple instances of it loading currently.