Jump to content

ZIP CODE plugin

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
  • 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  ⬇️

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
  • 3 months later...

Hey hey!

I have a client who wants to add a plugin to their site that will allow the ability to plug in a zip code and have the user alerted as to whether or not they currently service that area. 

Has anyone had experience with this? Any good solutions out there?

I am attaching a screenshot with the needed result below

Thanks in advance,

Screenshot 2023-10-28 at 11.05.35.png

Link to comment
20 minutes ago, iamyouroleksii said:

I have a client who wants to add a plugin to their site that will allow the ability to plug in a zip code and have the user alerted as to whether or not they currently service that area. 

I published some simplified code in June that would allow a user to type in a zip code and receive a response. You didn't say what you wanted to happen after they click the button, but this may help to get you started 🙂

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

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
9 minutes ago, iamyouroleksii said:

I want it to say if service is available in that area or not. 

Then the code I provided should get you started.

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

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.