Configure Feature Properties

This topic applies to

Applies to

SuiteCommerce Advanced

After setting up NetSuite for Faceted Navigation, the navigational area on your website automatically displays the facet. Configuring facet field properties is not required; however, facets may not display as you intend by default.

Note the following when configuring facets:

  • Facet fields must be set up in NetSuite to appear on the site.

  • If the facet’s URL Component is not set in NetSuite, the site will display the default field id.

  • Not specifying a set facet on the Facets subtab results in the default appearance for the associated facet.

  • Not specifying a property in the Facets subtab results in the default appearance for the associated property.

  • If using products that use a dash (-) in the product name, avoid using dashes in the id property. The Facets Router sees these dashes as separators, and the website will not load.

  • With Elbrus release of SCA and later, you can configure facets as URL parameters or as part of the URL path. This decision can impact SEO. See Facets as Parameters for details.

Follow the correct configuration procedures, depending on the version of SuiteCommerce Advanced you are implementing. For information on configurable properties, regardless of your implementation, see the following sections:

To configure Faceted Navigation properties:

  1. Select the domain to configure at Setup > SuiteCommerce Advanced > Configuration.

  2. In the SuiteCommerce Configuration record, navigate to the Shopping Catalog tab. This tab includes properties across various subtabs.

  3. Set feature properties as required.

  4. Save the Configuration record.

Example:

You want to configure the color facet field to display on your website in the following ways:

  • Display the facet title as Item Color

  • Display in the URL as a parameter

  • Appear expanded when loaded

  • Be collapsible

  • Appear first in the list of facets on your website

Your customized Facets entry might look like this:

Your resulting facet will display on your website like this:

To configure Faceted Navigation properties (pre-Vinson):

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.

      1. In NetSuite, click Setup > SuiteCommerce Advanced > URL Components for Facets.

      2. Note the URL Component of each facet you wish to configure.

      See URL Components for Facets for detailed information. After indexing Facet Fields in your SuiteCommerce 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 Customize and Extend Core SuiteCommerce Advanced Modules for information and best practices on customizing JavaScript.


    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.

      For example, your resulting facet will display on your website like this:

  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 Customize and Extend Core SuiteCommerce Advanced Modules for information and best practices on customizing JavaScript.


    2. Extend the facetDelimiters object and set the configuration properties as necessary.

      See Facets Delimiters Subtab for detailed information on each property.