Najiyya Posted January 11, 2021 Share Posted January 11, 2021 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
tuanphan Posted January 13, 2021 Share Posted January 13, 2021 Can you enable mobile info bar? We can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Najiyya Posted January 13, 2021 Author Share Posted January 13, 2021 Hey, it's enabled. Please check this on the mobile. Thank You Link to comment
creedon Posted January 13, 2021 Share Posted January 13, 2021 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
Najiyya Posted January 14, 2021 Author Share Posted January 14, 2021 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! Link to comment
creedon Posted January 15, 2021 Share Posted January 15, 2021 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment