Search products by zip code

[mstanharris]

Hello, 

I would like customers to be able to search products and vendors by zip code on my site.  The existing search is only returning products when product attributes are searched.  When I enter a zip code, which is tied to the vendor, nothing is returned.  I was told I could use an app that would allow me to automatically or bulk load the zip code tag to each of the products based on the vendor's location.  That would allow me to pull the products by zip code, but that still does not allow me to vendors by zip code.  Ideally, I would like to be able to filter vendor by zip codes.  So, can someone tell me which (zip code search or vendors or a filter once on the vendor page) is easier to achieve?  Also, can you please tell me how I might do that?

Thanks!

[Starbadar · Accepted solution]

Hello mstanharris,

You can force the type of search using the Storefront Search and searching by vendors and tags (which represent zip codes) can be accomplished by editing the search.liquid template and add some javascript that changes the parameters sent depending on what the user selects: Product, Pages, Vendors, Tag, etc..

[mstanharris]

Thanks @Starbadar!  I am now able to search by the vendor name, product tags, and any product names, but it only returns the products.  I want to also be able to search vendors by zip as well.  Is there a way to specify the type of search I want to perform and return products or vendors?  I'd also like to be able to return the format used on product and vendor pages, if that makes sense.  

{% unless settings.breadcrumb_styles == 'none' %}{% include 'breadcrumb' %}{% endunless %}

<div class="container">
<div id="col-main" class="page-search">

{% if search.results_count == 0 or search.performed == false %}
{% capture search_title %}{{ search.terms | escape }}{% endcapture %}
<h4 class="title">{{ 'search.general.no_products' | t: title: search_title }}</h4>

<form class="search-form" action="/search">
<input type="hidden" name="type" value="product" />
<input type="text" name="q" class="search_box" placeholder="{{settings.search_placeholder}}" value="{{ search.terms }}" />

<button type="submit" class="search-submit" title="Search">
{% if settings.search_icon_type == 'font-icon' %}
<i class="demo-icon {{ settings.search_font_icon }}"></i>
{% else %}
<img src="{{ settings.search_icon | img_url: '20x' }}" alt="Search" />
{% endif %}
</button>
</form>

{% else %}
{% if search.performed %}
{% paginate search.results by 16 %}

{% capture search_title %}{{ search.terms | escape }}{% endcapture %}
<h4 class="title">{{ 'search.general.title' | t: title: search_title }} </h4>

<div class="cata-product cp-grid">
{% for product in search.results %}
{% if product.object_type == 'product,tag,vendor' %}
<div class="product-grid-item">
{% include 'product-item' %}
</div>
{% else %}
<div class="article-grid-item">
{% include 'article-result' %}
</div>
{% endif %}
{% endfor %}
</div>

{% if paginate.pages > 1 %}
{% include 'pagination' %}Quote
{% endif %}

{% endpaginate %}
{% endif %}

{% endif %}

</div>
</div>

[Starbadar]

Yes that makes sense and you can absolutely do that by changing your code a little but I'd need a bit more.

On line 30

<div class="cata-product cp-grid">
      {% for product in search.results %}
        {% if product.object_type == 'product,tag,vendor' %}
        <div class="product-grid-item">
          {% include 'product-item' %}
        </div>
        {% else %}
        <div class="article-grid-item">
          {% include 'article-result' %}
        </div>
        {% endif %}
      {% endfor %}
    </div>

You can change the if statement to return something else when the vendor is the product.object_type

like this

    <div class="cata-product cp-grid">
      {% for product in search.results %}
        {% if product.object_type == 'product' %}
          <div class="product-grid-item">
            {% include 'product-item' %}
          </div>
        {% elsif product.object_type == 'vendor'%}
          <div class="article-grid-item">
            {% include 'vendor-item' %}
          </div>
        {% else %}
          <div class="article-grid-item">
            {% include 'article-result' %}
          </div>
        {% endif %}
      {% endfor %}
    </div>

You'll have to create a new snippet for your vendor-item since it doesn't exist and you can use the product-item as a template and change the code within it to result the vendor in an elegant list.

[Bbeatty2021]

Hi,

is this a plug-in that needs to be downloaded?

[Starbadar]

No, just code

[Bbeatty2021]

Thank you so much for replying.  I’m trying to do the same thing with my website’s search feature and not having a lot of luck. Based on this coding you provided, would I also be able to use this without changing a lot?