Jump to content

Customize Search Results

Go to solution Solved by paul2009,

Recommended Posts

Hello Squarespace Community,

Website Test: https://pigeon-cyan-pmfb.squarespace.com/
Goal: Display a summary excerpt Phone Numbers on search results
1. Enter Zip Code "29169" 
2. Search Results Page of Content is Midlands East Region
<how do I add in the phone number link insert included in the search results?>

Instead of users clicking through to the region they could immediately get the phone number to dial out immediately
I'm assuming the excerpt is purely a part of the summary block functionality. What code would it be to get this same thing to display on the search for searching just this blog? 

Thank you and open to suggestions of reconfiguring. I've never tried to do something this advanced before. 

Screenshot 2023-06-27 at 2.07.13 PM.png

Screenshot 2023-06-27 at 2.00.20 PM.png

Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

Squarespace search isn't a suitable solution for this.

Instead, I'd recommend using some custom code. If you create a table of telephone numbers and the zip codes they service, and store this JSON, you could write some JavaScript to check the list for a matching zip code and provide the corresponding telephone number. 

Here's a quick proof of concept that you could add to a Code Block on a page to prompt the user for a zip code and provide the required information. It isn't a finished example, but it should get you started.

<form id="zipform">
  <label for="zipCode">Enter your ZIP code:</label>
  <input type="text" id="zipCode" name="zipCode" placeholder="e.g., 12345" />
  <button type="submit">Submit</button>
</form>

<div id="result"></div>

<script>
  const telephoneNumbers = {
    "12345": "1-843-779-7513",
    "29053": "Call the Midlands East Region on 1-803-462-5243",
    "29160": "Call the Midlands East Region on 1-803-462-5243"
    // Add more zip codes and telephone numbers as needed
  };
</script>

<script>
  const myForm = document.getElementById('zipform');
  const resultDiv = document.getElementById('result');

  myForm.addEventListener('submit', function (event) {
    event.preventDefault();

    const zipCode = document.getElementById('zipCode').value;

    // Check if the zip code exists in the JSON table
    if (telephoneNumbers.hasOwnProperty(zipCode)) {
      const phoneNumber = telephoneNumbers[zipCode];

      // Display the telephone number to the user
      resultDiv.innerHTML = 'Telephone number: ' + phoneNumber;
    } else {
      resultDiv.innerHTML = 'Telephone number not found for this ZIP code.';
    }
  });
</script>

Add it to a Code Block wherever you want it to appear, like this:

image.thumb.png.8082e8994ea238e8a5dec7ac5b4afefe.png

And it should work something like this:

image.gif.e7c70d172733ffe8b3b258a470b90cb5.gif

Did this help? Please give feedback by clicking an icon below  ⬇️

About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too.

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.