Facet Fields Setup Tutorial

Purpose: add filter options that will display on the PLP in the webstore and allow users to refine their search results.

facet examples in SuiteCommerce

.

Create Item Fields

Make all of your item facet fields. You may put them under the Webstore subtab on the item record.

.

Add Fields as Facets in Website Setup

Go to Setup > SuiteCommerce Advanced > Set Up Web Site.

NetSuite Set Up Web Site Navigation

Click Edit next to your SuiteCommerce site.

edit SuiteCommerce site

Click the Search Index sub tab and then Facet Fields.

NetSuite search index facet fields

From the Facet Field Name dropdown, select the fields that you would like to use as facets and click Add.

Note: If you want to delete a Facet Field from the list, you can select the field and click Remove.
Adding Facet Fields in NetSuite

Once you have finalized the Facet Fields, click Save.

.

Configure Facets in Website Configuration

Go to Setup > SuiteCommerce Advanced > Configuration.

SCA configuration navigation in NetSuite

Select the site that you want to configure from the Select Website list. Select the specific domain that you want to configure from the Select Domain list.

Click Configure.

select website domain configure in NetSuite

On the SuiteCommerce Configuration record page, click the Shopping Catalog tab. Click the Facets subtab and configure your facet options as required.

shopping catalog facets SuiteCommerce

Add all of the fields you added in website Setup. Notice that you are referencing the field ID, not the name. You have to put the field ID in exactly for it to work.

The Name field is what you want to display on the PLP above the facet options. If you don’t click “Show Heading”, this will not display.

The Brand Name one above should be able to serve as a template for most of your facets – just choose the same options as I did. You can also look at the reference documentation below if you have any questions. 

Click Save to save the Configuration record.

.

Reference Documentation: Facet Properties

Each facet contains the following properties:

1. 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.

2. 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.

3. 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.

4. 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. Default value is 5.

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.

6. 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.

7. Color Palette (string)

Sets the HTML color values displayed for the facet.

8. Collapsed (boolean)

Sets the default state of the facet. If selected, the facet renders in a collapsed state.

9. 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.

10. 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.

11. 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.

12. Title Separator (string)

Specifies a string used to separate facets in the page title. If not specified, the default is , (comma space).

13. 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.

14. 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 individual 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 individual 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.

15. 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 mulit behavior. This is particularly useful for facets with a large amount of options to render. This property is available in SuiteCommerce and on the Elbrus release of SCA and later.


Hopefully, this post gives you something to work with while trying to understand NetSuite and what it can do for your business. If you have any questions and want some free consulting advice, feel free to contact our team at Anchor Group.

Contact us

Your cart
    Checkout