Product Comparison

This topic applies to

Applies to

SuiteCommerce Web Stores | Site Management Tools

The SuiteCommerce Product Comparison extension lets users see a side-by-side comparison of web store items. Users can select up to four products to compare at one time and can use the information to make a quicker and easier purchasing decision. You can configure the comparison page and select the item fields to include in the comparison table.

Important

SuiteCommerce extensions are only available if provisioned, installed, and activated for a selected domain in your account. For more information, see NetSuite SuiteCommerce Extensions.


Note

If you are a SuiteCommerce Advanced customer, you must be implementing the Aconcagua release or later to take advantage of extensions.


To enable Product Comparison for your website, perform the following steps after installing and activating the extension:

  1. Configure Properties

  2. Add Field Sets

For further customization, you can select the background and font colors for the product comparison preview page and comparison chart using the Theme Customizer in Site Management Tools. For more information on how to use this tool, see Theme Customizer.

Configure Properties

Use the SuiteCommerce Configuration record to set up the comparison page, choose which product details to include, and determine how to display the selected fields.

To configure properties:

  1. In NetSuite, go to Setup > SuiteCommerce Advanced > Configuration.

  2. Select the website and domain where the Product Comparison extension is activated and click Configure.

  3. Navigate to the Extensions tab.

  4. In the Product Comparison subtab, fill out the listed fields for each category, using the tables below as references.

  5. In the Item Fields – Comparison Page table, add each field you want to display in the comparison chart.

    You can add both standard or custom fields.

    For each field, include the following information:

    • Field ID — sets the internal field ID of the field to display.

    • Label — sets the label for the field to display on the left side of the comparison chart.

    • Show As — determines how the field displays.

      Possible options include:

      • Text — determines that the value is in a text format.

      • Date — displays the value as a date. You can determine the format of the date in the Placeholder field.

      • Check — displays a check for items that meet the field criteria.

      • Check/Cross — displays a check for items that meet the field criteria and an X for items that do not.

      • Image — displays the value as an image. To display the value for the item field as an image, the Type field must be set to Image on the Custom Item Field record.

        If the image is not displaying, verify that the URL Component field is blank on the image File record located in the File Cabinet.

      • Swatch — displays the values as sample swatches.

      • Link — displays the value as a link. To display the value for the item field as a link, the Type field must be set to Hyperlink on the Custom Item Field record.

    • Placeholder — provides additional information about how the value displays.

      The following fields allow for placeholders:

      • Text — The placeholder [[value]] is replaced by the field value automatically. This field supports basic HTML format tags.

      • Date — The placeholder is used to specify the format of the date.

        You can choose from the following formats, listed below with examples:

        Placeholder Value

        Example Date Display

        d mmm

        7 Oct

        d mmmm

        7 October

        d/m

        7/10

        dd/mm/yy

        07/10/19

        dd/mm/yyyy

        07/10/2019

        mmm d

        Oct 7

        mmmm d

        October 7

        m/d

        10/7

      • Link — The placeholder is used as the label for the link in the comparison chart. This field supports basic HTML format tags.

    • Group — determines the category under which the field will be listed in the comparison chart.

      For example, all fields with the Group field listed as General are displayed together in the comparison chart under the General heading. Uncategorized fields appear in the comparison chart without a category, in the order they are listed on the SC Configuration record.

  6. For each field added to the SC Configuration record, ensure that the field is exposed to the web store with a corresponding field set.

    For more information on how to add the fields to your site’s field sets, see Add Field Sets.

  7. Click Save.

Product Comparison Landing Page Fields:

Field

Description

URL Path

Sets the URL path for the product comparison landing page.

Page Title

Sets the title for the product comparison landing page.

Page Description - Landing Page

Determines the description for the product comparison landing page.

This field supports basic HTML format tags.

Search Settings Fields:

Field

Description

Item Search Label - Comparison Page

Sets the label for the search input.

This field supports basic HTML format tags.

Item Search Placeholder - Comparison Page

Sets the placeholder for the search input.

Item Search Helper Text - Comparison Page

Specifies instructions for the search input.

Add Item to Comparison - Product Listing Page

Sets the label for the Add to compare box.

Item Limit Message - Product Listing Page

Determines the message to explain the maximum of four items to compare at one time.

Item Comparison Fields:

Field

Description

Show Rating

If checked, adds the rating to the comparison chart.

Rating Label - Comparison Page

Sets the label for the rating section of the comparison table.

Show Price

If checked, adds the price to the comparison chart.

Price Label - Comparison Page

Sets the label for the price section of the comparison table.

Require Login for Pricing Message - Comparison Page

Determines the label for the link to the login page.

This link only displays if you have checked the Require Login for Pricing field (located in the Shopping tab, Shopping Basics subtab of the Web Site Setup record).

If you have checked the Require Login for Pricing field, but the Show Price field is cleared, then the link does not appear.

Show SKU

If checked, adds the SKU to the comparison chart.

SKU Label - Comparison Page

Sets the label for the SKU section of the comparison table.

Show Add to Cart Button

If checked, adds the  Add to cart button to the comparison chart.

Add to Cart Button Label - Comparison Page

Sets the label for the Add to cart button in the comparison table.

Remove Item Helper Text - Product Listing Page

Includes a description for the option to remove an item from the comparison table.

Compare Button - Product Listing Page

Sets the label for the compare button to add an item for comparison.

Add Field Sets

To employ the Product Comparison feature, you must verify the fields selected in the Item Fields – Comparison Page table on the SuiteCommerce Configuration record are listed in the site’s details field set. Most standard fields are listed in the field sets prior to activation of the Product Comparison extension, but it is necessary to confirm that these fields are included. For more information on field sets, see Define Field Sets.

To verify or add a Product Comparison field to the Web Site Setup Record:

  1. In NetSuite, go to Setup > SuiteCommerce Advanced > Set Up Web Site.

  2. Click Edit next to the website to which you are adding Product Comparison.

  3. Navigate to the Field Sets subtab.

  4. Verify that the necessary fields are listed in the Fields Included in Field Set column of the details field set.

  5. If any fields are missing, add them to the details field set by performing the following steps:

    1. Locate the Fields Included in Field Set column and click the Set button.

    2. Select the fields from the Field Name list and click Add.

    3. In the Field Set window, click Submit.

    4. In the Field Set row, click OK.

  6. After adding the fields to all of the field sets, click Save.