Jump to content

Javascript not working for mobile information bar

Recommended Posts

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
 

Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

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.

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

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.