Configure Facet Fields

This example applies to pre-Vinson implementations of SuiteCommerce Advanced (SCA) only. For details about configuring SCA for Vinson or later releases, see Modify JSON Configuration Files.

You can customize facets by extending a frontend configuration file. Specifically, the SC.Shopping.Configuration.js file contains the facets , which contains an object for each facet field. You can customize these objects to determine how each associated facet field displays and behaves on your website.

To configure facet fields:

Configure how facet fields display on your site.

For example, suppose you want to configure the color facet field to display on your website in the following ways:

Display the facet title as Item Color
Appear expanded when loaded
Be collapsible
Appear first in the list of facets on your website

Your customized object might look like this:

                ,   facets: [
    {
      id: 'color'
,   name: _('Item Color').translate()
,   priority: 1
,   behavior: 'multi'
,   template: facets_faceted_navigation_item_color_tpl
,   collapsed: false
,   uncollapsible: false
,   showHeading: true
,   colors: colors
,   titleSeparator: ', '
   }

Modify URL components for each facet field.
1. Find the URL Component of the facet field you want to define.
  - In NetSuite, go to Commerce > Marketing > SEO > URL Components for Facets.
  - Note the URL Component of each facet you want to configure.
    
    See URL Components for Facets for detailed information. After indexing Facet Fields in your Commerce site record, you can modify the URL components for each facet field.
2. Create a custom module that includes the SC.Shopping.Configuration object as a dependency.
  
  Note:
  Do not edit the original SC.Shopping.Configuration.js source file directly. See Extend Frontend Configuration Files for information and best practices on customizing JavaScript within frontend configuration files.
3. Extend the facets , creating an object for each facet field you want to configure. Set the configuration properties as necessary.
  
  See Facets Subtab for detailed information about each property.

Customize color palettes for facets.

The SC.Shopping.Configuration.js file contains the colors object. This object maps a color label to its hexadecimal value. You can customize these color values by extending the colors object.

Extend the colors object within item options or facet object’s colors property.

Add any hexadecimal color values. The property’s name must match the corresponding color in the colors object.

For example, the colors object lists default name/value pairs:

                    var colors = {
         'black': '#212121'
      ,   'gray': '#9c9c9c'
      ,   'grey': '#9c9c9c'
      ,   'white': '#fff'
      ,   'brown': '#804d3b'
      ,   'beige': '#eedcbe'
      ,   'blue': '#0f5da3'
      ,   'light-blue': '#8fdeec'
      ,   'purple': '#9b4a97 '
      ,   'lilac': '#ceadd0'
      ,   'red': '#f63440'
      ,   'pink': '#ffa5c1'
      ,   'orange': '#ff5200'
      ,   'peach': '#ffcc8c'
      ,   'yellow': '#ffde00'
      ,   'light-yellow': '#ffee7a'
      ,   'green': '#00af43'
      ,   'lime': '#c3d600'
      ,   'teal': '#00ab95'
      ,   'aqua': '#28e1c5'
      ,   'burgandy': '#9c0633'
      ,   'navy': '#002d5d'
      }

For example, if you want to use a different color for blue and red in your site’s faceted navigation, you can specify, #0000FF, for blue and, #f63440, for red. As a best practice, do not edit the default colors object. Instead, extend the object in the colors property of the facet as shown in the following example:

                          ,   {
            id: 'color'
         ,   name: _('Item Color').translate()
         ,   priority: 1
         ,   behavior: 'multi'
         ,   template: facets_faceted_navigation_item_color_tpl
         ,   collapsed: false
         ,   uncollapsible: false
         ,   showHeading: true
         ,   colors: _.extend(colors,{'blue':'#0000FF', 'red':'#f63440'})
         ,   titleSeparator: ', '
         }

Configure facet delimiters.

The facetDelimiters object is defined in the global SC.Configuration.js file. This object specifies the characters within the URL that appear between facets, facet names, and their values. To configure facet delimiters:
1. Create a custom module that includes the SC.Shopping.Configuration object as a dependency.
  
  Note:
  Do not edit the original SC.Shopping.Configuration.js source file directly. See Extend Frontend Configuration Files for information and best practices on customizing JavaScript within frontend configuration files.
2. Extend the facetDelimiters object and set the configuration properties as necessary.
  
  See Facets Delimiters Subtab for detailed information about each property.

To configure facet fields:

Related Topics