Page History

...

How does it work?

As the your customer types in their text into the Search field, they will see results displayed in a drop-down list. This drop-down list space can be configured. so that . You can rather than seeing a simple drop-down list of product names, you can enhance the enhanced search aids in their discovery by displaying additional rich search to display richer content such as product images, titles, and codes (configurable in CMS). You can restrict control that space by restricting the number of products that show listed in the results drop-down window, and if the customer does not see what they need in that list, then they can press Enter or click "View All" to go to the Search Results page where they can see more comprehensive results and filter on category and manufacturer.

Step-by-step guide

1. Open CMS
   
   

1. Navigate to Content → Pages & Templates

3.       Click on Theme Layout

4.       Select Theme Layout to Edit

...

9.       You can also change the number of products the search facility will display as your customer is typing in their text by changing the Number of products to display. The default (and maximum) is 9.

Image Modified

10.      Click Save to add the new Product Search with Preview widget to your theme layout.

11.      Effect the change to your CSS by clicking at the top-right of the page.

12.      Navigate to Content → Pages & Templates → Products.

13.      Verify that you have Product Search with Preview List Item Template and Product Search with Preview Template in the list.

14.      Click on Product Search with Preview Template. You should see four widgets in the layout:

• Product Search with Preview Product Category List
• Product Search with Preview List Title
• Product Search with Preview List Grid
• Product Search with Preview Show All Button.

You can customise the search return message in the first three widgets by clicking their title or their respective Edit button.

15.      You can customise the message that the system displays when it lists product results as the customer is typing text into the search field; the default is View All. In our example, we will use See More?

16.      Effect the change to your CSS by clicking  at the top-right of the page.

17.      Navigate back to the Content → Pages & Templates → Products page.

18.      Let's review the Product Search with Preview List Item Template content and customise if required.

19.      No option in the Product Search with Preview List Item Template widget layout list requires changing to facilitate the new product search with preview functionality.
However, you may want to tailor messages or button prompts to match your brand’s voice and tone.

20.      Effect the change to your CSS by clicking at the top-right of the page.

21.      Go to your website and verify that the Product Search with Preview and Filtering functionality works as expected:

a.      You should see your Product Search with Preview button underneath your Product Search prompt.

b.      You don't have to have both search facilities implemented; choose which one you and your customers prefer.

c.      In the Product List search (we have ours configured to only show the product name), type in a search text, such as “glove”, and note the results' list.

d.      Type the same term, glove, into the new Product Search with Preview field, and note the difference in the returned search results.

e.      Press ENTER or click your prompt  in our example, and the system will take you to the Search Results page.

f.       Click the Filter By button and review the Brands by which you can filter your search results. Do the same with categories if you classify your products by category.

g.      The previous views were in Grid mode. Click List to view in List mode.

h.      You can also sort your search results by Relevance or (reverse-) alphabetically by brand, description, or product-code. 

22.      If you view Search Results in List mode, note that the next Product Search With Preview search will display the results in the drop down in LIST format rather than GRID.

a.       Type a search term into the Product Search With Preview search box

b.      Click the "View All" prompt and press Enter to view all the search results.

c.      When the results come up, click List to display the results in List view

Image Modified

d.      Now return to the Product Search With Preview search box and type in a new search term. The resultant drop down list is in List view.

Image Modified

23.      Experiment with the customisation parameters under each of the Product Search with Preview widgets covered in this knowledge base to see what works best for your site.

Additional Information

Minimum Version Requirements	Multiexcerpt MultiExcerptName Minimum Version Requirements 4.13.00
Prerequisites	Multiexcerpt MultiExcerptName Pre reqs --
Self Configurable	Multiexcerpt MultiExcerptName Self Configurable Yes
Business Function	Multiexcerpt MultiExcerptName Business Function Searching
BPD Only?	Multiexcerpt MultiExcerptName BPD Only Yes
B2B/B2C/Both	Multiexcerpt MultiExcerptName B2B/B2C/Both Both
Ballpark Hours From CV (if opting for CV to complete self config component)	Multiexcerpt MultiExcerptName Ballpark Hours From CV (if opting for CV to complete self config component) Contact CV Support
Ballpark Hours From CV (in addition to any self config required)	Multiexcerpt MultiExcerptName Ballpark Hours From CV (in addition to any self config required) Contact CV Support
Third Party Costs	Multiexcerpt MultiExcerptName Third Party Costs n/a
CMS Category	Multiexcerpt MultiExcerptName CMS Category Pages & Templates

Related articles

Content by Label
showLabels false max 5 spaces KB showSpace false sort modified reverse true type page cql label in ("new","ver41300","how-to") and type = "page" and space = "KB" labels new ver41300 how-to

Multiexcerpt
hidden true MultiExcerptName Features List Headers
Macro Instructions for carrying Article Information through to Feature List Minimum Version Requirements BPD ONLY Business Function CMS Category B2B B2C BOTH Feature Feature Description (Written for our customers and can be pasted into comms sent to them) Additional info Pre-Reqs/ Gotchas Self Configurable Ballpark Hours From CV (if opting for CV to complete self config component) Ballpark Hours From CV (in addition to any self config required) Third Party Costs Instructions for carrying Excerpts through from this page to the Feature List Article Page: Add macro  / Multiexcerpt (or copy and existing excerpt and edit) or (Copy existing page and place content into existing excerpt macros) On Features List page: Click in the Cell to be populated  / add macro /  Multiexcerpt Include / Select the Article page and the excerpt (or copy another feature line and edit the 'Article page' source.