Filter forms
A filter form is a short “find products” form: the shopper picks a vehicle, a size or a price and presses the button, and the shop opens a category listing with that choice already applied. A typical example is “Find parts for your car” on the home page.
The forms are managed under Filters → Filter sets → Filter forms. The list shows each form’s Name, its State (draft, published version, changes not published), its Content (tabs and fields), the channels whose header opens it (In the header of) and when it was Changed. A row’s menu holds Open in the editor, Duplicate, Show in the header… and Delete.
New form asks for a name, which is for the administration only, and opens the form in the editor with one tab.
The form editor
Section titled “The form editor”The editor shows the form’s settings in a column and draws the form on a stage as the shop will draw it. The stage uses the skin and the texts of a sales channel, picked with the shop icon over the stage. The stage also lists problems. For example, it names a field whose filter is missing from the target’s set: that field’s choice does not narrow the listing.
| Setting | Effect |
|---|---|
| Title | Stands over the tabs. The header’s button and its window are named after it too. |
| Header icon | The icon of the header button that opens the form. Empty: the filters’ icon. |
| Button | The text of the submit button. Empty: the button counts the products the choice leaves (“Show 128 products”). |
| Link to all filters | A link beside the button to the target’s listing with the choice, where every filter of its set stands. On by default. |
| Link text | The link’s text. Empty: “More filters”. |
| Target category | The listing the form sends the shopper to. Empty: the channel’s root category. The filters of the target’s set are what the form’s fields narrow. |
| Columns | How many fields stand in a row, per device: 4 on a desktop, 2 on a tablet and 1 on a phone unless set, from 1 to 6. |
Tabs and fields
Section titled “Tabs and fields”With more than one tab, the form shows the tabs over its fields, each tab with fields of its own (cars, motorcycles, tyres). A form with one tab shows no tabs. A form has at most 8 tabs, and a tab at most 16 fields.
| Tab setting | Effect |
|---|---|
| Name | The tab’s name. Empty: “Tab 1”, “Tab 2” and so on. |
| Icon | Shown before the name. |
| Image | Shown before the name instead of the icon. |
| Target category | Where this tab leads, instead of the form’s target. |
Add fields adds filters from the sources, the same list the set builder offers. A composite filter and the search in results cannot be fields. A source the tab already has is left out.
| Field setting | Effect |
|---|---|
| Label | The field’s label. Empty: the group’s name as the panel shows it. |
| Empty choice | The text of a list with nothing chosen. Empty: “Any”. |
| Control | Auto draws the field as its source’s kind suggests: a range as its ranges, a yes/no as a switch, the others as a list. List shows one list of the values. Ranges lists the source’s ranges, both ends. From offers only the lower end (“from 2015”), Up to only the upper end (“up to 200 €”). Switch shows one box, on or off. Only the controls that suit the source are offered. |
| Several values | Off: the field takes one value, as most search forms do. Off by default. |
| Width | How many of the row’s columns the field takes, per device. A compatibility field takes one column per level. |
A compatibility catalogue in a form works as in the panel: its levels follow one another, and the next one opens once the one before has a choice. A level with one option takes it at once.
The Look tab changes the skin’s form elements for this form only: the form, its tabs, labels, fields, the button and the link. Anything not set here comes from The channel’s skin. See Skins.
Drafts and publishing
Section titled “Drafts and publishing”Every change goes to the draft. Save draft keeps it, Publish puts it in the shop as a new version, and Discard draft returns to the published version. The shop shows only the published version: a form that was never published shows nothing anywhere.
Showing the form
Section titled “Showing the form”In a page: the Filter form element
Section titled “In a page: the Filter form element”In Shopping Experiences, the block Filter form (in the commerce blocks) holds the element Filter form. Its setting Form picks the form, and Edit the form opens it in the editor. The element shows nothing where the form was deleted or is not published yet.
In the header
Section titled “In the header”Show in the header… in the forms list picks the sales channels whose header opens the form. A channel shows one form there: picking a form for a channel replaces the one it had.
The header then has a button among its actions, next to the search. It shows the form’s Header icon (empty: the filters’ icon), and its title is the form’s Title (empty: “Choose what the products should fit”). Pressing it opens the form in a window. The form loads on the first press, so the page itself does not carry it. Escape, the close button and a click beside the window close it.
The button shows only for a published form, and only in a channel where P2Lab Filter is switched on.
Elsewhere
Section titled “Elsewhere”A theme that draws its own header can place the same header button itself. Beyond the element and the header, the form has no placements of its own.
In the shop
Section titled “In the shop”- After each pick, the other fields’ lists are counted again under the choice so far, so each list keeps only the values that still have products in the target’s listing.
- The button counts the products the choice leaves (“Show 128 products”, “No products – change the filters”). While it counts, it says “Counting…”. A form with its own Button text keeps that text.
- The button and the “More filters” link both open the target’s listing with the choice. The form also works without the shop’s scripts.
- Each tab sends the shopper to its own target.
The remembered choice
Section titled “The remembered choice”A compatibility field takes the choice the shop remembers when its own levels are still empty, so a shopper who picked a vehicle earlier finds it in the form. The other fields and the button’s count follow that choice at once.
Where a remembered choice may come back, the levels wait as placeholders and the button says “Counting…” until the choice arrives, for up to 4 seconds. A choice kept in the cookie arrives at once. One kept only in the session arrives a moment later. The cookie is set only after consent to the comfort cookie Remember what my products should fit, unless Filters → System → Storefront filter → Remember the compatibility choice without asking for consent is on. See Compatibility in the shop.