Kilimanjaro Release of SuiteCommerce Advanced

This topic applies to

Applies to

SuiteCommerce Advanced | Kilimanjaro

Welcome to the Kilimanjaro release of SuiteCommerce Advanced!

Important

You must install the Kilimanjaro release of SuiteCommerce Advanced in a NetSuite 2017.2 account. Many of the features and enhancements in this release have dependencies on NetSuite 2017.2. For details on enhancements and changes in NetSuite 2017.2, see Release Notes 2017.2.


This version includes the following enhancements:

The following bundles are available:

  • SuiteCommerce Advanced Kilimanjaro: Bundle ID – 194217

  • Site Builder Extensions Kilimanjaro : Bundle ID –  194218

  • Site Builder Extensions Premium Kilimanjaro : Bundle ID –  194219

  • SuiteCommerce Configuration: Bundle ID – 194222

  • Reference Product Lists Records: Bundle ID – 53051: This bundle is required even if Product Lists records are not leveraged for your implementation. If not installed, the following error is returned when shoppers navigate to the cart: The record type [CUSTOMRECORD_NS_PL_PRODUCTLIST] is invalid.

Important

To take advantage of new features in existing implementations, you must migrate the new code to your existing code base. For details, see Migrate SuiteCommerce Advanced to the Latest Release.


3D Secure Payments

With the Kilimanjaro release of SuiteCommerce Advanced, the use of 3D Secure authentication through payment provider accounts such as Cybersource or Merchant e-Solutions is supported. 3D secure authentication provides for additional fraud protection by allowing users to create and assign a password to their credit and debit cards. The password is then verified when a user processes a transaction through your store.

For more information, see 3D Secure Payment Authentication.

Change Email Address

With the Kilimanjaro release of SuiteCommerce Advanced, users can now change their registered email address in the My Account application. Once a user submits the change request, they receive an email to confirm the change. When the user clicks the confirmation link, a confirmation message is displayed within the login/checkout screen.

Note

This feature is available by default in the Kilimanjaro release of SuiteCommerce Advanced. For instructions on backporting the feature to previous releases of SuiteCommerce Advanced, see Change Email Address Patch.


For more details, see Change Email Address.

Custom Content Types

With the Kilimanjaro release of SuiteCommerce Advanced, users can create Custom Content Types.

To implement this feature, you create a custom module within your application source code. This is similar to any customization you implement in SCA. You must also set up the CCT in NetSuite and implement it into your SCA site using Site Management Tools.

Note

You must be using SMT Version 3 to implement CCTs.


For more information on building a custom CCT module for SCA, see Create a CCT Module.

For more information on implementing a CCT using Site Management Tools, see Create a CCT Module.

Display of VAT/GST/PST

With the Kilimanjaro release of SuiteCommerce Advanced, the display of VAT, GST, and PST tax amounts for Canadian, UK, and Australian editions of NetSuite is supported. For details, see Web Store Taxes — VAT, GST, PST.

Field Set Setup Script Changes

With the Kilimanjaro release of SuiteCommerce Advanced, you can now configure a custom matrix child item search field set using the SuiteCommerce Configuration record. This includes a default matrixchilditems_search field set. To account for this new functionality, the field set setup script now includes a default matrix child item field set.

For more information on the configurable properties related to this feature, see Shopping Catalog Tab.

For more information on how to implement the field set setup script, see Import Field Sets.

Node.js Requirement Changes

With the Kilimanjaro release of SuiteCommerce Advanced, the developer tools have been modified to support Node.js version 6.11.x (where x is the most current minor release). See Install Node.js for more information.

Sass Style Guide

With the Kilimanjaro release of SuiteCommerce Advanced, you can now use the developer tools to create a style guide automatically.

A style guide helps you document and use the various style elements defined for your site. Contributors can refer to a style guide to create new pages and elements or customize existing ones. A style guide can also ensure that your best practices for site design are being met by multiple contributors.

See Style Guide for details and instructions on how to build a style guide using the developer tools.

As a prerequisite for a style guide, SCA uses Knyle Style Sheet (KSS) notation to document and define elements within source Sass files. As a best practice when customizing SCA Sass files, use KSS notation.

See KSS Notation for details.

Style Definition Changes

To help you maintain and develop Sass variables, SuiteCommerce Advanced introduces the following Sass style definitions with the Kilimanjaro release. This provides better optimized Sass and more comprehensible variable definitions. These enhancements include the following:

  • Redefined color palette, typography, and spacing definitions

  • Human-readable, standardized variable definitions

  • More elegant element definition through Sass code nesting

For details, See Style Definitions.

Colors

Neutral shades and theme colors are handled differently from previous releases. Both neutral shades and theme color pallets now use a shading scale from 1000 (dark) to 0 (light).

Example: Kilimanjaro Release and Later
$sc-color-primary: #e23200;
$sc-color-secondary: #15607b;

//...

$sc-neutral-shade-base: #222426;
$sc-neutral-shade-900: $sc-neutral-shade-base;
$sc-neutral-shade-600: lighten($sc-neutral-shade-base, 18);
$sc-neutral-shade-300: lighten($sc-neutral-shade-base, 55);
$sc-neutral-shade-0: lighten($sc-neutral-shade-base, 100);

//...

$sc-color-theme-base: $sc-color-secondary;
$sc-color-theme-900: $sc-color-theme-base;
$sc-color-theme-400: desaturate(lighten($sc-color-theme-base, 45), 18);
$sc-color-theme-300: desaturate(lighten($sc-color-theme-base, 60), 22);
$sc-color-theme-200: desaturate(lighten($sc-color-theme-base, 68), 22);
Example: Previous Releases
$sc-color-theme:#5b7f8c;
$sc-color-theme-light:#9cb6bf;
$sc-color-theme-background:#e4eff5;
$sc-color-theme-background-light: lighten($sc-color-theme-background, 3.5);
$sc-color-theme-background-lightest: lighten($sc-color-theme-background, 6);
$sc-color-theme-border: desaturate(darken($sc-color-theme-background, 8), 3);
$sc-color-background-list:#f1f8fa;

$sc-color-primary: #f15c28;
$sc-color-secondary: #15607B;
$sc-color-tertiary: #ffffff;

$sc-color-success: #4a7f35;
$sc-color-success-background: #eef7e4;
$sc-color-warning: #8e7728;
$sc-color-warning-background: #f9f5cd;
$sc-color-error: #C33C48;
$sc-color-error-background: #FFE9F1;
$sc-color-info: $sc-color-theme-light;
$sc-color-info-background: $sc-color-theme-light;

Typography

Typography variables now employ a more familiar sizing method of extra-small (xs) through triple-extra-large (xxxl) within the variable definition. Each of these sizes is calculated from a base font size ($sc-font-size-base) expressed as rem units (relative em).

Example: Kilimanjaro Release and Later

In the following example, the value for $sc-font-size-m (medium) equals 15px (1 x 15px):

$sc-font-size-base: 15px;

$sc-font-size-xxs: 0.75rem;
$sc-font-size-xs: 0.87rem;
$sc-font-size-s: 0.93rem;
$sc-font-size-m: 1rem;
$sc-font-size-l: 1.067rem;
$sc-font-size-xl: 1.2rem;
$sc-font-size-xxl: 1.47rem;
$sc-font-size-xxxl: 1.73rem;
Example: Previous Releases
$sc-base-font-size: 15px;
$sc-smallest-font-size: 11px;
$sc-small-font-size: 13px;
$sc-h1-font-size: 26px;
$sc-h1-font-size-mobile: 22px;
$sc-h2-font-size: 22px;
$sc-h2-font-size-mobile: 18px;
$sc-h3-font-size: 22px;
$sc-h3-font-size-mobile: 18px;
$sc-h4-font-size: 18px;
$sc-h4-font-size-mobile: 15px;
$sc-h5-font-size: $sc-base-font-size;
$sc-button-large-font-size: $sc-base-font-size * 1.067;
$sc-button-medium-font-size: $sc-base-font-size;
$sc-button-small-font-size: $sc-small-font-size;

Spacing

SuiteCommerce Advanced now introduces levels to indicate the added or reduced space for a class relative to a base padding or margin style. Each level designation in the named variable equals the multiplier.

In the following example, the value for $sc-padding-lv2 equals 10px (2 x 5px):

Example: Kilimanjaro Release and Later
$sc-padding-base: 5px;
$sc-padding-lv1: $sc-padding-base;
$sc-padding-lv2: $sc-padding-base * 2;
$sc-padding-lv3: $sc-padding-base * 3;
$sc-padding-lv4: $sc-padding-base * 4;
$sc-padding-lv5: $sc-padding-base * 5;
$sc-padding-lv6: $sc-padding-base * 6;
$sc-padding-lv7: $sc-padding-base * 7;
$sc-padding-lv8: $sc-padding-base * 8;
Example: Previous Releases
$sc-base-padding:5px;
$sc-base-margin:5px;

$sc-small-margin:$sc-base-margin * 2;
$sc-medium-margin:$sc-base-margin * 4;
$sc-large-margin:$sc-base-margin * 8;
$sc-xlarge-margin:$sc-base-margin * 12;

$sc-padding-small: $sc-base-padding * 5 $sc-base-padding * 3;
$sc-padding-medium: $sc-base-padding * 6;

$button-safe-margin:$sc-base-margin * 2;

SuiteCommerce Configuration Updates

With the Kilimanjaro release of SuiteCommerce Advanced, the following configuration properties have been added. Refer to the appropriate section for more information.

Property Label (SuiteCommerce Configuration Record)

Property ID

More Information

Property Location (SuiteCommerce Configuration Record)

Tab > Subtab

Require a Phone Number With Addresses

addresses.isPhoneMandatory

Require a Phone Number With Addresses

My Account > Addresses

(new subtab)

Enable 3D Secure Payments

isThreeDSecureEnabled

Enable 3D Secure Payments

Checkout

If the Information is Available to your Country, shows detailed taxes in the Cart

showTaxDetailsPerLine

If the Information is Available to your Country, shows detailed taxes in the Cart

Shopping Catalog

Allow custom matrix child search in the item list

matrixchilditems.enabled

Matrix child items fieldset for search

If the Information is Available to your Country, shows detailed taxes in the Cart

matrixchilditems.fieldset

If the Information is Available to your Country, shows detailed taxes in the Cart

Favicon of the Website

faviconPath

Favicon of the Website

Advanced > Favicon Path

(new subtab)

SuitePromotions Enhancements

With the Kilimanjaro release of SuiteCommerce Advanced, the following promotions enhancements are available:

  • Auto-Apply Promotions – You can configure promotions to be automatically applied when certain criteria are met.

  • Best Offer Promotions – Automatically configured for promotions where auto-apply is enabled. For example, if a user has applied multiple promotions to an order including a promotion that is defined as exclusive, the best combination of promotions is automatically determined.

  • Audit and Visibility of Promotions – Shows if a promotion was added by the user or by best offer. If a promotion is not applied, it also displays the reasons why it was not applied.

Note

Due to dependencies on enhanced Commerce APIs, to use these promotions enhancements you must have the Kilimanjaro release of SuiteCommerce Advanced installed in a 17.2 NetSuite account. For details, see Support for Auto-Apply Promotions and Best Offer in the Commerce API.


To get started with using Auto-Apply promotions, you must do the following:

  • Enable the SuitePromotions feature.

  • Enable This Promotion Can Be Automatically Applied on the promotions record and define any promotions requirements.

  • Enable Auto-Apply Promotions on the shopping tab of the web site setup record.

For detailed information on setting up and configuring SuitePromotions in SuiteCommerce Advanced, see Promotions.

Note

These features are available by default in the Kilimanjaro release of SuiteCommerce Advanced. For instructions on backporting to the Elbrus release of SuiteCommerce Advanced, see Auto-Apply Promotions for Elbrus.