Denali Release of SuiteCommerce Advanced

Welcome to Denali release of SuiteCommerce Advanced! With this release of SCA, NetSuite is bringing you a revamped SuiteCommerce platform that leverages the latest modern web technologies such as Gulp.js, Handlebars.js, and Node.js. We are also releasing new developer tools to enable efficient local development and deployment processes. The user experience takes a Mobile First approach with a redesigned user interface. Modules are versioned to provide simplified upgrades and customizations. And, we continue to provide advanced SEO solutions for site tracking and analysis.

This document details many of the changes included in the release. For complete documentation, blog posts, and other information visit the new SuiteCommerce Developer’s Portal.

Note:

For release notes on versions prior to Denali release of SuiteCommerce Advanced, see Release Notes Prior to SuiteCommerce Advanced Denali.

Previously, SuiteCommerce Advanced applications were separately bundled (ShopFlow, My Account, and Checkout). Now, SuiteCommerce Applications are bundled as a single SuiteApp to provide simplified customizations and migrations to future releases. The following bundles are available:

• SuiteCommerce Advanced Denali: Bundle ID — 90208

• Site Builder Extensions Denali: Bundle ID — 90205

• Site Builder Extensions Premium Denali: Bundle ID — 90206

Important:

This release is a complete re-architecture of the SuiteCommerce Advanced platform. For existing implementations, migration to this latest version requires a re-implementation.

Some of the highlights of this release include:

• New Developer Tools

• Logic-less Templating Using Handlebars

• Mobile First Design

• Restructure of Application Modules

• Converted from LESS to Sass CSS Pre-Processor

• Use of Composite Views Instead of Macros

• Updated Configuration Files

• Updated Content Delivery and Product Merchandising Bundles

• Translation Support

• Other Architectural Changes

New Developer Tools

With the Denali release of SuiteCommerce Advanced, new developer tools are supported to enable you to deploy SuiteCommerce Advanced applications directly to NetSuite. Using these tools you can edit and customize the application from your local development environment. You can then run tasks to compile, combine, and minify application files locally before deploying your customized application to NetSuite or a local environment for testing. You are no longer required to go into the NetSuite file cabinet to modify application files.

New Tools and Technologies include:

• Node.js: This is the JavaScript based application server. Node.js must be downloaded and installed in your local environment.

• Gulp.js: Gulp is a JavaScript task runner that uses Node.js. Gulp.js must also be downloaded and installed in your local environment. After your environment is set up with Node.js and Gulp.js, you can use a set of gulp tasks available from the SCA bundle to compile JavaScript and SASS files, deploy SCA code to NetSuite, and so forth. See

• SASS Compiler: compiles Sass style sheets used by template files.

For complete details on how to use the new developer tools, see Set Up SCA Developer Tools.

Logic-less Templating Using Handlebars

Previously, we used Underscore.js for front-end templating. Now we use Handlebars.js. Handlebars.js provides logic-less semantic templating. Templates contain the HTML used for each module view with placeholder areas defined by double-curly braces where JSON data is injected at run-time.

Note:

Although we no longer use Underscore.js for templating, it is still used for many other purposes.

Previously, SCA templates had a .txt extension. All templates now have a .tpl extension and have been moved to a Templates folder within each Module folder. Template files are also now combined locally when you run the Gulp deploy commands available with the new developer tools.

For example, the following section is from the address_list.tpl template located at suite_commerce/Address@x.x.x/Templates. Note the placeholder variables within the double-curly braces.

          <section class="address-list">
   <h2>{{pageHeader}}</h2>
   <div class="address-list-button-container">
      <a href="/addressbook/new"  class="address-list-button-info-cards-new" data-toggle="show-in-modal"> {{translate 'Add New Address'}}</a>      
   </div>

   <div class="address-list-default-addresses">
      <div data-view="Addresses.Collection"></div>
   </div>
</section> 

        

For more details on Handlebar templating, see Logic-less Templates and Handlebars.js

Mobile First Design

SCA is now designed with a Mobile First approach. Mobile First design results in faster and higher performing sites by prioritizing the most important elements for smaller devices first and then scaling the design for larger device sizes. This enhances the user experience by providing a more focused design that allows users to quickly accomplish their core task whether it be finding a product to purchase in a B2C environment or reordering in bulk in a B2B environment.

Using the Mobile First approach, CSS element styles are defined for mobile devices and then scaled progressively for tablet and desktop display.

To support this Mobile First design, SASS styles are now organized in a hierarchy of reusable components. There are Base styles used across applications, template specific styles, and application specific styles. See Commerce Sass Style Definitions for details on how to work with design elements in your code base. Visit the SuiteCommerce Developer’s Portal design pages for detailed descriptions of all design elements and page flows.

Restructure of Application Modules

Source files for SCA are organized in multiple versioned modules. Each module directory now contains all of the files specific for that module. Previously, template and style sheet files were separated from the modules directories. When customizing a module, you can now create a copy of the module directory, rename with an applicable version, and then package the required versions for distribution using Node and Gulp.

When migrating to the next version of SCA, you can now migrate on a module by module basis. This will enable you to manage your customizations much more efficiently.

For complete details on the architecture of Modules, see SCA Module Architecture.

Converted from LESS to Sass CSS Pre-Processor

Sites are now designed using the Sass CSS extension language. With Sass, CSS syntax is fully supported in addition to features such as variables and imports. Sass styles are organized within a hierarchy that defines base styles, template specific styles, and application specific styles. Styles are define as reusable components and can be combined to create increasingly complex structures.

For more information on styling in SuiteCommerce Advanced, see Commerce Sass Style Definitions.

Use of Composite Views Instead of Macros

In this release of SuiteCommerce Advanced, all macros have been moved to Backbone Views. Parameters previously defined in macros are now within Views for each module and passed to a context object. Some Views in SuiteCommerce Advanced are Composite Views. Composite Views are views that contain child views or subviews.

For more details, see Views.

Updated Configuration Files

Previously, the same front-end configuration file was used for Shopping, Checkout, and My Account. That configuration file contained all of the same parameters, although some of those parameters were used only by certain applications. Now there is a BaseConfiguration object defined within the SCA.Configuration model that has global attributes shared across applications and a unique configuration file for each application. Each of the application specific configuration files has a dependency on the base configuration model.

The Backend.Configuration.js file has been renamed to Configuration.js and is now included in the SspLibraries module. This file can be used to set many of the same objects server-side as in prior releases as well as some additional objects specific to this release.

Updated Content Delivery and Product Merchandising Bundles

The Content Delivery and Product Merchandising bundles have been updated with new library files. If you have previously installed these bundles, you must upgrade them to the latest version to use them with this version of SuiteCommerce Advanced.

Multi-Currency Support

Multi-currency is supported for the Shopping and Checkout applications in SuiteCommerce Advanced. Multi-currency is not supported in the My Account application.

Translation Support

Language JavaScript files updated for changes in this release of SuiteCommerce Advanced are coming soon after the initial release. The language files currently available in the application modules are those used in prior releases and are not comprehensive.

Other Architectural Changes

The architectural changes in this release are extensive. Following are some key highlights:

• Update to Bootstrap 3

• All Models Inherit from SCModel

• Filter by Site ID

• ItemsKeyMapping File Converted to an Application Module

• Passing Fieldset Names as a Parameter

• Remove ItemDetails Module from Checkout

• Minimum Field Set Requirement Changes

• Facebook appId Configuration

• Updated 3rd Party JavaScript Libraries

Update to Bootstrap 3

SuiteCommerce Advanced has been upgraded from Bootstrap 2 to use Bootstrap 3 for its front-end framework.

All Models Inherit from SCModel

With this release, there is a new base class, SCModel, for all backend models. All models inherit from the SCModel and must define a name attribute to uniquely identify the model. Several common base functions for validation, authentication, and error handling are defined within the SC.Model.js file. In general, this model should not require customization.

For example, in the following code sample from Product.List.Model.js, you can see that first the SCModel dependency is defined and then the ProductList.Model extends from SCModel. Also, the name attribute is set as ProductList.

          define(
   'ProductList.Model'
,   ['SC.Model', 'Application', 'ProductList.Item.Search', 'Utils']
,   function(SCModel, Application, ProductListItemSearch, Utils)
{
   'use strict';

   return SCModel.extend({
      name: 'ProductList'
.
.
. 

        

Filter by Site ID

When you have multiple sites set up for a single account, you can now configure Reference My Account to display orders from specified sites only. This is done by editing the filter_site setting in the backend Configuration.js file at SspLibraries/SuiteScript/Configuration.js.

          SC.Configuration = {
...
   ,   filter_site: 'current'
...
} 

        

The following settings are available:

• filter_site: 'current': all orders created for the current site,plus orders created in NetSuite or not assigned to any site are returned

• filter_site: all: all orders from all sites in the current account plus orders created in NetSuite or not assigned to any site are returned

• filter_site: [1,2,3]: all orders from sites specified by site ID in the array plus orders created in NetSuite or not assigned to any site are returned

Note:

Currently, when your account is configured to display orders from multiple sites, those orders are not differentiated by site on the front end.

ItemsKeyMapping File Converted to an Application Module

Previously, the ItemsKeyMapping class containing the logic that provided mapping of what is returned from the search API and Commerce API was instantiated in the application object. Now, the ItemKeyMapping logic has been made available as an independent ItemsKeyMapping module. This improves performance by allowing the class to be instantiated only when a method uses it. For example, the ItemDetails.Model now has a dependency on the ItemsKeyMapping module and the ItemsKeyMapping class is called within the get method.

          define('ItemDetails.Model', ['Backbone.CachedModel', 'ItemOptionsHelper', 'Session', 'ItemsKeyMapping', 'SCA.Configuration', 'underscore', 'Utils']
,   function (BackboneCachedModel, ItemOptionsHelper, Session, ItemsKeyMapping, Configuration, _)
{
   'use strict';
         .
         .
         .
,   get: function (attr, dont_cache)
   {
      var configuration = (this.application && this.application.Configuration) || {}
      ,   keyMapping = _.defaults(configuration.itemKeyMapping || {}, ItemsKeyMapping.getKeyMapping(configuration)); 

        

Passing Fieldset Names as a Parameter

Previously, only fieldset names predefined in the site configuration could be returned in functions used to retrieve and store item information. Now a fieldset_name parameter has been added to these functions. You can leverage this logic to create backend services that specify a specific fieldset name, instead of relying on the site fieldset configuration.

Note:

Passing a fieldset_name parameter to item functions is not required. If a fieldset_name parameter is not passed, the fieldset names as defined in the configuration are used.

For example, note the fieldset_name parameter in the preloadItems function:

• Previously:

                preloadItems: function (items)
     {
        'use strict';
        
        var items_by_id = {}
        ,   parents_by_id = {}
        ,   self = this
        ,   is_advanced = session.getSiteSettings(['sitetype']).sitetype === 'ADVANCED';
           .
           .
           .
  } 
  
              

• Updated Code:

                ,   preloadItems: function (items, fieldset_name)
     {
        var self = this
        ,   items_by_id = {}
        ,   parents_by_id = {};
  
        items = items || [];
  
        this.preloadedItems = this.preloadedItems || {};
           .
           .
           .
  } 
  
              

Remove ItemDetails Module from Checkout

Previously, the entire ItemDetails module was included in the Reference Checkout application when only the ItemDetails model is required. There is no need for the Router or the entire module definition..

Minimum Field Set Requirement Changes

The isfulfillable field must now be defined for the Matrix Child Items field set. Definition is no longer required for the Details field set.

Facebook appId Configuration

With this release, the Facebook sharing feature requires you to set the appId in the SC.Shopping.Configuration.js file in the ShoppingApplication module. Configuration is no longer set in the Configuration.js file. To set the appId, customize the module or create a custom file override. For more information on the SuiteCommerce Advanced Facebook Share and Like features, see Facebook Share.

For more information on customizing a module, see Develop Your SCA Customization.

Updated 3rd Party JavaScript Libraries

In this release, JavaScript libraries have been migrated to newer releases as detailed in the following table.

Libary	Prior Version	Current Version
almond	0.3.0	0.3.0
Backbone	1.0.0	1.1.2
Backbone.stickit	—	0.8.0
bignumber	1.4.1	1.5.0
bootstrap	2.3.1	3.3.1
bootstrap-datepicker	-	1.3.1
font-awesome	-	4.3.0
handlebars	—	2.0.0
html5shiv	3.6.1	3.7.2
jquery.bxslider	4.1.1	4.1.2
jquery.cookie	1.3.0	1.4.1
jquery.zoom	1.7.1	1.7.13
jquery	1.10.2	1.11.1
json2	2.0.0	2.0.0
require	2.1.1	2.1.15
twitter-bootstrap	-	3.3.1
twitter-typeahead	-	0.10.5
underscore	1.6.0	1.7.0
Respond.js	-	1.4.2
jasmine	1.2.0	2.1.3

General Notices