Jump to content

NotACoder404

Member
  • Posts

    1
  • Joined

  • Last visited

NotACoder404's Achievements

Level 1

Level 1 (1/20)

1

Reputation

  1. A couple disclaimers before the post: 1. I do not know how to code. Everything was done by following different guides and by brute force trial and error. 2. I’ll post the links to everything that helped me at the appropriate point in the guide. 3. Block out a few decent chunks of time to get this done. The guide will be broken up into sections, so the ‘breaks’ can be built in. 4. I made this because I’ve been looking for a solution to Squarespace’s search box issue for over a year [a lot of waiting and hoping they’d fix it], and I wish a had a step-by-step guide to walk me through fixing it myself. Really hope this helps. Part 1 : Built Your Own Search Engine [see post above by ‘addcontext’] 1. Create a Microsoft Account 2. Go to the website customsearch.ai 3. Follow this guide to built a search engine for your specific website: https://docs.microsoft.com/en-us/azure/cognitive-services/bing-custom-search/tutorials/custom-search-web-page 4. One thing I found unclear in the guide: You can build and tinker with the search engine and see the search results it will provide for different searches in the ‘configurations' tab. However, it will not work on your site until you purchase/enter an activation key. The simplest way to get the activation key: At the bottom of the ‘configuration -> hosted ui’ tab on your search engine there will be a section called ‘subscription keys’ At the bottom of that section, there will be two links, ‘click to issue free trial key,’ ‘click to issue paid tier key.’ Either link will take you to portal.azure — you might have to sign in again with Microsoft account It will ask you for a name, which subscription you want [can see a list of pricing here:https://www.microsoft.com/en-us/bing/apis/pricing]. Every option is relatively cheap, choose whichever works best for you. For the section titled ‘resource group’ click ‘create new’ underneath — I just made it the name of my site. Once you create it, you should be able to go to ‘Dashboard’ -> ‘Search’ [under 'All Resources’] -> ‘Keys and Endpoint’ [under 'research management'] -> Show Keys Enter those keys for your subscription keys Part 2 : Integrating the Search box onto your Website If you only need the search box on a specific page: just follow step 1 -4 below. If you want the search bar at a specific part of EVERY page, keep going. 1. For the search engine you created, leave the ‘configuration’ tab and go to the ‘production’ tab. 2. You’ll be in a section called ‘Endpoints.’ Click the bottom tab in that section called ‘Hosted UI’ 3. You’ll see some text followed by ‘option 1: Javascript snippet.’ Copy the full snippet in the grey box. 4. Go to your Squarespace Website and find the page you want your search box on. Edit the page -> add element -> code [in the 'more' section] Paste the code. KEEP THE CODE IN ‘HTML’ FORM, AND KEEP DISPLAY SOURCE UNCHECKED. While you are editing the site you won’t be able to see the search box, but if you open up a new browser and go to the site, it will be there. Part 3: Getting the Search Box to the header of your website Follow this guide for reference : https://www.will-myers.com/articles/adding-a-search-bar-to-your-header-in-squarespace-71 1. Add the code block to the footer of your website. 2. Find the ‘id’ of your code block [I’d recommend watching this whole video, but skip to 2:30 to see https://www.youtube.com/watch?v=l-6CWVx2NW4&t=151s . If you don’t want to watch the video, follow these steps: Open up a new browser window and go to your website. Scroll to the footer of your website and right click on the search block and click ‘Inspect Element’ [this is at least how you do it on a Mac]. A bunch of developer code will pop up. You should see as your mouse passes over different code, that different sections of the site are highlighted. If you inspected your search box, the code pertaining to the box should be highlighted. Move your mouse up the code until the element above the search box is highlighted. The first lines of code underneath should contain your box id. Looks something like ‘block_yui_1234567890987654321.’ Copy that. 3. Go to the Code injection area of your website [Settings -> Advanced -> Code Injection]. In the header area, paste the following code [Again, I don’t know code. This was taken directly from https://www.will-myers.com/articles/adding-a-search-bar-to-your-header-in-squarespace-71, so again, props to him for creating this.]: <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script> $(function(){ let searchBlock = $(‘#BLOCK-ID-HERE) .attr('id', '') .addClass('header-search-bar'); $(searchBlock).insertAfter($(‘header-title-nav-wrapper’)); $(searchBlock).clone().addClass('mobile-header-search-bar').appendTo($('[data-folder="root"] .header-menu-nav-folder-content')); }) </script> 4. Where it says ‘block-id-here’ in bold, paste your block id. Leave the ‘#’ in before your id. 5. Where it says ‘header-title-nav-wrapper’ in bold, insert the place you want your search bar to go. Again, this could take a little bit of work/trial and error. I found that when I put it underneath my navigation bar, the search wouldn’t work, but when I put it underneath the site info, it would. Same process as getting your block id. Inspect the element on your webpage you want the search bar to follow [I ended up using ‘div.site-info’ but I really couldn’t tell you what will work for your site. Part 4: Edit the Search Box to Look nice 1. Go to Design -> CustomCSS 2. Follow the Code on https://www.will-myers.com/articles/adding-a-search-bar-to-your-header-in-squarespace-71 to make adjustments to the width of the box. Two notes: the code on the website didn’t work for me until I replaced ‘input’ with ‘.bcs-container-searchbox’ [inspected the search box at the top of the page and used the class id.]. Also, you can change the '33%' to whatever you want to adjust the size of the box. 33% was just the size I chose to use : .header-search-bar input{ margin-left: auto; width:33% !important; } 3. The rest of the adjustments, you should be able to make on your customsearch.ai site under Configuration -> Hosted UI -> Configure Color Theme -> Search Box Configurations Hope this helped! If you have any questions, I probably can’t answer them!
×
×
  • 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.