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.
-
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.
-
-
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.
-
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 thecolors
object.-
Extend the
colors
object within item options or facet object’scolors
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 defaultcolors
object. Instead, extend the object in thecolors
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:-
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.
-
Extend the
facetDelimiters
object and set the configuration properties as necessary.See Facets Delimiters Subtab for detailed information about each property.
-
Related Topics
- Example SCA Customizations
- Create a Custom Module
- Modify JSON Configuration Files
- Extend Frontend Configuration Files
- Extend the Backend Configuration File
- Add a Child View to a Composite View
- Override a Template File
- Extend a Sass File
- Add a Sticky Button
- Customizing the Loading Icon
- Adding a Custom Web Font
- Extending Font Awesome
- Displaying Device-Specific Carousel Images