Product Search Field

CMS > eCommerce
1

We need to setup a Search Field just for Products only.

Is this possible out-of-the-box or would it require us to ‘disable from site search’ all other pages, blog posts, gallery images and custom module items on the site so only products listed in search results?

Also, can search results list on the same page as the search box or do they need to go on a new dedicated ‘Site Search’ results page?

2

Yes, this should be possible, although not quite out-of-the-box at the moment.

Start off with a Custom Module search form as a base to work from and replace/remove properties/fields as needed - and be sure to change the hidden moduleID to your products module ID.

<form>
    <input type="hidden" name="prop_ModuleId" value="YOUR PRODUCT MODULE ID" >
    <label>Keywords</label>
    <input type="text" name="prop_KeyWords" maxlength="255" value="{{request.request_url.params.prop_KeyWords}}" >
    <input type="submit" value="Search" >
</form>

Then on your search results page you’ll need a Liquid condition to detect which result to display. Which will have either you standard site search component or your product specific component (ensuring you add isSearchResult: "true" parameter).

Also note, that the product results will use a different search list so you’ll probably want to create a List layout for this purpose too.

Something like:

{% if request.request_url.params.prop_ModuleId == 'YOUR PRODUCTS MODULE ID' %}

{% component source: "Products", layout: "YOUR SEARCH LIST", isSearchResult: "true", type: "module" %}

{% else %}

{% component source: "Page", layout: "Site Search List", displayPagination: "true", type: "site_search" %}

{% endif %}

There is probably a way to do this just using the normal Site Search and filtering by parentID as well, but I’d need to run some tests to ensure that works first.

3

@Adam.Wilson this gives me somewhere to start. Stupid question… how do I find out the ModuleID for all the products to add to the ‘name’ and ‘value’ fields?

4

Module ID you’ll see in the URL when viewing the products list in the admin, ie the 1844 below:
/admin/module/1844/list-view
(your ID may be different)

For the search field names (if you want to add additional properties to search on) should be the same as their Liquid equivalents, just with prop_ prepended to them.
So if you have a custom filed called “PDF Resource”, the Liquid object for this would be {{this.pdfResource}} and the search field name would be prop_pdfResource.

Hope that makes sense.

5

@Adam.Wilson Got it working with the following -

 <form action="">
            <div>
                <input type="hidden" name="prop_ModuleId" value="3441" >
                    <input type="text" name="prop_KeyWords" maxlength="255" value="{{request.request_url.params.prop_KeyWords}}" >
                <input type="submit" value="Search" />
            </div>
        </form>

{% if request.request_url.params.prop_ModuleId == '3441' %}
{% component source: "Products", layout: "Search List", isSearchResult: "true", displayPagination: "true", type: "module", limit: "12" %}
{% else %}
{% component source: "Page", layout: "Site Search List", displayPagination: "true", type: "site_search" %}
{% endif %}

But I can’t get this field to work on-page as it just shows blank -
Showing {{this.pagination.totalitemscount}} items

6

@SiroccoDigital the pagination object is within the search result data so is not within the scope of this (which would be the page item).
You’d need to create a collectionVariable to access the search data.
So adding that to your product search module:

{% component source: "Products", collectionVariable: "searchData", layout: "Search List", isSearchResult: "true", displayPagination: "true", type: "module", limit: "12" %}

Then you can output it like:

{{searchData.pagination.totalitemscount}}
7

I can see that this code needs to be in between the component source too for it to work so thanks for the pointer @Adam.Wilson!

8

Other than just searching for ‘Keywords’ (which searches product name, description and site search keywords) I have a client wanting to search through Products by content added to the ‘custom’ field content within the Product. For example if we added a size in ‘Custom1’ field for each product and then have a radio button on-page where you can click on a size and it shows all products that are that size.

I am guessing that this may be possible by adding the size to the Site Search Keywords too.

Does this sound doable?

Also, would we be able to apply this to searching through catalogs for similar types of attributes?

9

You can add a custom field to the search form, but it may not work well in conjunction with the keyword field since the search will be looking for both (AND) matches and i think the custom field would need to be an exact match too.

But if you’re only looking to use the custom field by itself for searching then it could work fine if you’re providing the exact values via radio buttons.
I would probably look at using Tags or Categories for this type of search/filtering as it helps with consistency plus you can then dynamically output all those values, but either way could work.

And yes, Catalogs are just modules too so the same approach can be used.