Configure Facet Fields

This topic applies to

Applies to

SuiteCommerce Advanced

 

This section applies to pre-Vinson implementations for SuiteCommerce Advanced (SCA) only. For details on configuring SCA for Vinson release or later, see Modify JSON Configuration Files.

To configure facet fields:

You can customize facets by extending a frontend configuration file. Specifically, the SC.Shopping.Configuration.js file contains the facets array, 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.

  1. 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: ', ' }
  2. Configure how facet fields display on your site.

    1. Find the URL Component of the facet field you want to define.

      • In NetSuite, click Setup > SuiteCommerce Advanced > 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 array, creating an object for each facet field you want to configure. Set the configuration properties as necessary.

      See Facets Subtab for detailed information on each property.

  3. Customize Facet Color Palettes.

    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.

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

    2. 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, you want to use a different color for blue and red in your site’s faceted navigation, swapping #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:

      , { 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: ', ' }
  4. 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 on each property.