smootify-search-page
Full search results page driven by the query in the url or its text inputs (2.0: type="search" too), filled with the query, with count and pagination.
Where it can go
- Anywhere on the page.
- Must contain
smootify-product. - Out of place, Smootify removes it from the page.
What it requires
- The Search extension (lite or server plan, or the extension activated in the Smootify dashboard). Without it, the element does nothing.
Fields in the form
Each field’s name attribute tells Smootify what the field holds.
| Name | Field | What it does |
|---|---|---|
every input[type="text"] (any name) | input type="text" | Renamed q, prefilled from ?q=; the first filled one is the query. |
Attributes on the element
- It reads
data-wait,limit,disable-scroll,disable-scroll-on-load-more,auto-close-details,avoid-webflow-restart,page-range,animation,easing,duration,stagger,unavailable-products. avoid-webflow-restart: the results render of this block fires nosmootify:render(the other renders still can). There is no generic-named twin. See Render event.
Attributes inside it
| Group | Attribute name | Values |
|---|---|---|
| Loading | skeleton | 5 |
| Search page | search | 5 |
State classes
Smootify toggles inited, is-empty, is-filtered, has-pagination, has-page-numbers, has-query, is-single-result on it: style them in the site’s CSS for each state. See State classes.
Loading
Its code loads only on pages that have smootify-search-page.