Jump to content

Make spyglass icon in search bar link to a different website?

Go to solution Solved by creedon,

Recommended Posts

Posted

Hi everyone, weird question here, but is it possible to force the spyglass icon in the main navigation to link to a different website entirely? I work for a nonprofit that uses a Squarespace-based site for most of our content: https://www.strongtowns.org/ However, there is an auxiliary website we want to direct users to when they click the spyglass icon: https://actionlab.strongtowns.org/hc/en-us Is there a way to accomplish this (with code or otherwise)?

 

I'd also love for the actual /search URL on our site to redirect to https://actionlab.strongtowns.org/hc/en-us. Right now, I have a code on the /search page that disables the search function, so it just appears as a blank page--which isn't ideal.

 

Any advice would be greatly appreciated. Thank you!

Posted
On 12/22/2022 at 11:38 PM, ShinaShayesteh said:

Yes, precisely: we want that icon to link to actionlab.strongtowns.org/hc/en-us

We're using the basic commerce plan (and we're on 7.0)

Hi,

Can you enable search icon? I don't see it now

we can use script code to force search icon open a custom url

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted
On 12/27/2022 at 10:38 PM, ShinaShayesteh said:

Yes, sorry about that; we had disabled the icon temporarily over the holiday weekend. It should be visible now!

Add this to Last Line in Code Injection > Footer

<script>
$(document).ready(function() { 
		$(".tweak-header-search-style-icon-only .Header-search").click(function() {
			var link = $(this).text(),
				href = "https://actionlab.strongtowns.org/hc/en-us";
			window.location.href=href;
		});
});
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted

Update! I've gotten it to sort of work by making these changes to the code:

<script>
$(document).ready(function() { 
		$(".tweak-header-search-style-icon-only .Header-search").click(function() {
         window.open("https://actionlab.strongtowns.org/hc/en-us", "_blank");
		});
});
</script>

The spyglass does open the "Action Lab" website now, but in a new tab... Meanwhile, on the old tab, the user gets directed to a blank page (our old search page, now deactivated). Any ideas on how I can get the link to open in the same tab, instead of opening a new one?

  • Solution
Posted
Quote

Tried it, and it didn't work

Ah ha. The following should do the trick.

<script>

  $( ( ) => {
  
    const selector = '.tweak-header-search-style-icon-only .Header-search';
    
    $( selector ).click ( function ( event ) {
    
      location = 'https://actionlab.strongtowns.org/hc/en-us';
      
      event.preventDefault ( );
      
      } );
      
    } );
    
  </script>

The trick here is that you need to prevent the events from the built-in SS code from firing.

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.

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.