Facet Field Configuration for SuiteCommerce Customization

What is Facet Field Configuration?

Facets allow users to filter products within eCommerce sites, enhancing the shopping experience by providing multiple filtering options. Configuring these facets properly is crucial for a user-friendly interface.

How to Configure Facet Fields

To configure facet fields in SuiteCommerce, you'll be working primarily in the SC.Shopping.Configuration.js file to customize how each facet is displayed and behaves on your website. Here’s a step-by-step guide:

Step 1: Configure Display Settings

You can customize how facet fields display on your site. For example, if you want to display the color facet, you may set it up as follows:

• Title: Change the facet title to Item Color.
• Appearance: It should appear expanded upon loading, be collapsible, and be first in the list of facets.

Here is an example of what your custom facet configuration might look like:

1facets: [
2    {
3        id: 'color',
4        name: _('Item Color').translate(),
5        priority: 1,
6        behavior: 'multi',
7        template: facets_faceted_navigation_item_color_tpl,
8        collapsed: false,
9        uncollapsible: false,
10        showHeading: true,
11        colors: colors,
12        titleSeparator: ', '
13    }
14]

Step 2: Modify URL Components

To adjust how each facet field appears in the URL:

1. Navigate to Commerce > Marketing > SEO > URL Components for Facets.
2. Note the URL Component of the facets you wish to configure.
3. Create a custom module that includes the SC.Shopping.Configuration as a dependency.

Important: Avoid directly editing the original SC.Shopping.Configuration.js file. Always refer to the best practices for modifying JavaScript within frontend configuration files.

Step 3: Customize Color Palettes

To adjust the color options of your facets, extend the colors object to include your hexadecimal values:

colors: _.extend(colors, {'blue': '#0000FF', 'red': '#f63440'})

Customize colors according to specific requirements without altering the default colors object directly.

Step 4: Configure Facet Delimiters

To define the characters that separate facets in the URL:

1. In your custom module, extend the facetDelimiters object with necessary configuration properties.

Note: Again, do not edit the core SC.Shopping.Configuration.js file. Instead, create a custom module to encapsulate your changes.

Who This Affects

• Developers: Responsible for customizing the front end of eCommerce sites.
• Site Administrators: Overseeing eCommerce platform configurations and settings.

Key Takeaways

• Facet fields enhance product filtering for better user experiences.
• Configuration involves customizing both display properties and URL components.
• Use custom modules to ensure maintainability and adherence to best practices.

Source: This article is based on Oracle's official NetSuite documentation.