Facets Subtab

Facets as URL Parameters

This property applies to:

SuiteCommerce Advanced - Elbrus and later
SuiteCommerce

This Boolean specifies if facets are treated as URL query string parameters or as part of the URL path.

If checked, all facets are treated as parameters. If unchecked, all facets are treated as part of the URL path. This property applies behavior to all facets unless an individual facet’s isParameter property is specified. See Facets for details. This property is unchecked by default.

Note:

This can affect SEO. See Facets as Parameters for details.

facetsAsUrlParameters

UI location

Shopping Catalog > Facets

JSON file

Facets.json

Facets

More Information: Select and Configure Facet Fields

These settings configure the faceted navigation feature. Commerce web stores use modern faceted navigation to display product results. With faceted navigation, users can incrementally refine search queries based on specific item attributes defined within the facet configuration.

Each facet contains the following properties:

Item Field ID (string) – specifies the internal identifier of the facet being customized. The value must match the URL Component of the associated facet field as set up in NetSuite. If not specified in the object, the default is the facet field’s URL Component. If the URL Component is not set up in NetSuite, the default is the facet field’s Field ID.
Name (string) – specifies the display name for the facet as it appears in the browser. If not specified, the default equals the value of the id property.
URL (string) – specifies the URL fragment that identifies the facet in the URL. If no value is defined, SuiteCommerce web stores use the NetSuite list record ID.

This property only applies to pre-Vinson release of SCA.
Priority (string) – sets the display order for the list of facet choices. Facets display in descending order of the priority value (largest priority value displays on top followed by smaller values). The priority value must be between 1 and 10. The default value is 5.
Behavior (string) – sets type of facet editor as it appears in the browser. If not specified, the default is single. Possible values are:
- Single (string) – displays a list from which users select a single choice.
- Multi (string) – displays a list from which users select multiple choices.
- Range (string) – displays a double slider from which users select a start and end value.
Template (string) – specifies the template that defines the HTML source code for the facet. If not specified, the default is facets_faceted_navigation_item_tpl.
- facets_faceted_navigation_item_color_tpl (string) – defines the template for a color facet.
- facets_faceted_navigation_item_range_tpl (string) – defines the template for a ranged facet.
- facets_faceted_navigation_item_tpl (string) – defines the template for any other facet.
Color Palette (string) – sets the HTML color values displayed for the facet.
Collapsed (Boolean) – sets the default state of the facet. If selected, the facet renders in a collapsed state.
Non Collapsible (Boolean) – specifies if the facet is collapsible and expandable. If set to Yes, the user can collapse or expand the facet by clicking an up/down arrow icon. If set to No, the facet cannot be collapsed or expanded.
Show Heading (Boolean) – specifies if the facet heading displays in the browser. If set to Yes (checked/enabled), a heading matching the value set in the name property displays. If set to No (unchecked/disabled) or if left blank, the facet values display without a heading.
Title Format (string) – specifies the format for the facet title displayed when the facet is selected. This can be a string like from $(0) to $(1) for a range behavior or foo $(0) bar for others. Also, it can be a function that accepts the facet object as a parameter.
Title Separator (string) – specifies a string used to separate facets in the page title. If not specified, the default is , (comma space).
Parser (string) – includes the user’s currency symbol ($, £, etc.) to the price range. If this value is not set, SuiteCommerce web stores do not display a currency symbol.
Is URL Parameter? (Boolean) – specifies if the facet is treated as a parameter or as part of the URL path. If Facets as URL Parameters is checked for all facets, any facet with Is URL Parameter? set to false (unchecked) acts as part of the URL path. Likewise, if Facets as URL Parameters is unchecked, any facet with Is URL Parameter? set to true (checked) acts as a parameter.

This property is available in SuiteCommerce and on the Elbrus release of SCA and later.
Max (number) – Specifies the limit of options available for a facet. After this options limit is reached, a see more link appears. This applies to multi behavior. This is particularly useful for facets with a large amount of options to render.

This property is available in SuiteCommerce and the Elbrus release of SCA and later.

More Information: Select and Configure Facet Fields

IDs

facets

facets.id

facets.name

facets.url (pre-Vinson)

facets.priority

facets.behavior

facets.template

facets.colors

facets.collapsed

facets.uncollapsible

facets.showHeading

facets.titleToken

facets.titleSeparator

facets.parser

facets.isParameter (Elbrus and later)

facets.max (Elbrus and later)

UI location

Shopping Catalog > Facets

JSON file

Facets.json

Configuration file (pre-Vinson)

SC.Checkout.Configuration.js

Configuring Faceted Navigation

If your faceted navigation is not configured correctly, it may look similar to the example shown. To properly configure the faceted navigation, each title needs to be labeled correctly, a color swatch should be used for the second faceted navigation list, and a price slider should be used for the third list.

The following table provides tips on how to correctly configure each of the faceted navigation lists.

Item Number	Configuration
1	From the Configuration record on the Shopping Catalog > Facets subtab, enter custitem30 in the ItemID field, and Size in the Name field. The rest of the defaults are acceptable. You may want to set the Behavior field to multi to allow shoppers to refine by multiple values from the same navigation item. For example, for the Size facet, using the multi behavior allows users to select Medium and Large to see combined results for both.
2	From the Configuration record on the Shopping Catalog > Facets subtab, enter custitem31 in the ItemID field, and Color in the Name field. The rest of the defaults are acceptable. If you are refining by color, you may want to use a color swatch picker to offer a more visual and compact user experience. The setup requirements for this include: Setting up a custom list of colors, which is used as a matrix option list for your colors. Setting up a custom color palette, which is used to show the color swatches as facet navigation items. For more information, see Color Palettes Subtab.
3	From the Configuration record on the Shopping Catalog > Facets subtab, enter pricelevel5 in the ItemID field and Price in the Name field. When the items API returns search results, each item returns a price. If no further configuration is made, each value is shown as a text facet value, which the user can select from. To improve this experience, you can set up a slider for these values. The slider lets the user define upper and lower amounts, with all items outside of the price range removed. When configuring a price facet: Select range from the Behavior field. Select facets_faceted_navigation_item_range.tpl from the Template field. In the Title Format field, enter how you want the title to change when the facet is applied. For example, Price $(1) to $(0). Note: Default values are used when the Title Format field is left blank. You should enter a specific value when setting a price because the default price value incorrectly puts the upper value before the lower value.

Item Number

Configuration

From the Configuration record on the Shopping Catalog > Facets subtab, enter custitem30 in the ItemID field, and Size in the Name field. The rest of the defaults are acceptable. You may want to set the Behavior field to multi to allow shoppers to refine by multiple values from the same navigation item.

For example, for the Size facet, using the multi behavior allows users to select Medium and Large to see combined results for both.

From the Configuration record on the Shopping Catalog > Facets subtab, enter custitem31 in the ItemID field, and Color in the Name field. The rest of the defaults are acceptable.

If you are refining by color, you may want to use a color swatch picker to offer a more visual and compact user experience.

The setup requirements for this include:

Setting up a custom list of colors, which is used as a matrix option list for your colors.
Setting up a custom color palette, which is used to show the color swatches as facet navigation items.

For more information, see Color Palettes Subtab.

From the Configuration record on the Shopping Catalog > Facets subtab, enter pricelevel5 in the ItemID field and Price in the Name field.

When the items API returns search results, each item returns a price. If no further configuration is made, each value is shown as a text facet value, which the user can select from. To improve this experience, you can set up a slider for these values. The slider lets the user define upper and lower amounts, with all items outside of the price range removed.

When configuring a price facet:

Select range from the Behavior field.
Select facets_faceted_navigation_item_range.tpl from the Template field.
In the Title Format field, enter how you want the title to change when the facet is applied. For example, Price $(1) to $(0).

Note:
Default values are used when the Title Format field is left blank. You should enter a specific value when setting a price because the default price value incorrectly puts the upper value before the lower value.

Facets as URL Parameters

Facets

Configuring Faceted Navigation

Related Topics