Storefront search

Search (vi: Ô tìm kiếm) and Suggested keywords (vi: Từ khoá gợi ý) live on the Storefront panel (vi: Gian hàng) — beside the filter elements, because they share one mechanism: what the shopper types, the lists narrow by.

The thing to know first: the default behaviour, Go to the search page, needs the site to have published a page of the Search type. Until it has, the configuration dialog says so plainly:

"This site has published no Search page, so 'Go to the search page' lands on a 404. Create and publish a Search-type page."

That page is always served at /search — it has no URL of its own to set.

The four behaviours

Everything lives in one dialog, opened from the Search row of the panel. Its first two questions are While typing and On Enter — genuinely different questions, which is why they are two selects:

Go to the search page — takes the shopper to the results page. Works even with JavaScript off, because the search box is a real form.

Filter this page — narrows the lists already on this page, without leaving it. A filtered result has its own address — bookmarkable and shareable, the same mechanism as the storefront filters.

Show suggestions — opens a results dropdown under the box as the shopper types.

Send an event — changes nothing by itself; for custom code listening to the query.

Leave On Enter at Same as above and Enter follows the typing behaviour. Split them when you want "suggestions while typing, results page on Enter".

The dropdown: composed, not configured

The dropdown is not a prebuilt list with settings. It is whatever you drag into the search box:

• Drag a Product list in — the dropdown becomes a list you design: real product cards, working add-to-cart buttons.
• Add a Heading above it to label the group.
• Add more lists for other data — articles, collections — each picking its own source. Every one narrows to what the shopper types.

Because the dropdown is yours, row counts and empty states are set on each list, like any other list — there is no separate dropdown settings table.

While typing, narrow decides the scope: Every list on the page (the default), or Only the dropdown's own lists — for when the shopper should see results change inside the suggestion panel while the shelves on the page stay put.

Three presentations

Presentation (vi: Kiểu hiển thị) offers three: Search bar (always open — the default), Expanding icon (clicking the magnifier opens it into the input), and Icon with a sheet (clicking the magnifier opens a sheet holding the input and your dropdown).

The two icon presentations require an Icon button name: without one, a screen reader announces only "button" — a control that exists for sighted shoppers and is a dead end for everyone else.

The Clear button (the × in the field) has three modes: shown beside the field, replacing the magnifier while typing (the pattern large stores use), or hidden. It needs a Clear button label for the same reason the icon needs a name.

A list may refuse

The switch deciding whether a list gets narrowed lives on the list itself, in its Can narrow this list group (vi: Được lọc danh sách này): one switch for the Search box, one for Filters.

Why on the list rather than on the search box: a search box usually sits in a global section that appears on every page, while a list belongs to one page — so only the list can answer for itself. A hand-arranged "Best sellers" shelf can turn both switches off and stand still through every query.

A list that turned Filters off also cannot be aimed at from the filter configuration dialog — its entry shows "(filters off)" and is disabled, rather than offering you a choice that would change nothing.

Suggested keywords

Suggested keywords is a row of clickable chips. At rest it shows your keywords — a "popular searches" block; placed inside a search box, the chips become live suggestions from your catalogue as the shopper types, and clearing the query brings your keywords back.

On click, a chip either goes to the search page or filters this page — the search box's own two behaviours. Every chip is a real link, so the row works with JavaScript off.

A keyword cannot contain a comma — the comma is the filter format's value separator, so the editor strips it as you type.

Typing without diacritics still finds it

Search matches after folding accents, in both directions: typing "ao thun" finds "Áo thun", and typing "Áo" finds products named without accents. The rule applies everywhere there is a search field — on the storefront and in the product management list.

Matching is by word start, not substring: "ao" finds "Áo thun" but not "Chảo" — which is what a shopper means when they type a word.