Unable to Select Item Options Within the SuiteCommerce Configuration Record in NetSuite

In some implementations of Elbrus, site administrators cannot choose item options when configuring a domain using the SuiteCommerce Configuration record in NetSuite (Shopping Catalog tab, Item Options subtab). This can occur using Goggle Chrome with Mac OS.

This patch extends the ProductDetails.Base.View.js file in the ProductDetails module to overwrite the optionBindEventByType object. This code change ensures that site administrators can select item options in the SutieCommerce Configuration record without error and then specify a default template to render the selected item option.

Step 1: Extend the ProductDetails.Base.View.js File

Open the Modules/extensions directory and create a subdirectory to maintain your customizations.

Give this directory a name similar to the module being customized.

For example: Modules/extensions/ProductDetails.Extension@1.0.0
In your new ProductDetails.Extension@1.0.0 module, create a subdirectory called JavaScript.
In your new JavaScript subdirectory, create a JavaScript file to extend the JavaScript in ProductDetails.Base.View.js.

Name this file according to best practices.

For example: Modules/extensions/ProductDetails.Extension@1.0.0/JavaScript/ProductDetails.Base.View.Extension.js

Open this file and extend the prototype of ProductDetailsBaseView with the optionBindEventByType object as shown in the following code snippet.

                define(
   'ProductDetails.Base.View.Extension'
,   ['ProductDetails.Base.View'
   ,   'jQuery'
   ,   'underscore'
]
,   function (
      ProductDetailsBaseView
   ,   jQuery
   ,   _
   )
{
   'use strict';

   _.extend(ProductDetailsBaseView.prototype, {optionBindEventByType: {
      'select': 'change'
   ,   'text': 'blur'
   ,   'date': 'change'
   }
});

Save the file.

Step 2: Prepare the Developer Tools for Your Customization

Open the ProductDetails.Extension@1.0.0 module.
Create a file in this module and name it ns.package.json.

For example: Modules/extensions/ProductDetails.Extension@1.0.0/ns.package.json

Build the ns.package.json file using the following code

                {
    "gulp": {
        "javascript": [
            "JavaScript/*.js"
        ]
    }
}

Save the file.
Open the distro.json file.

This file is located in the top-level directory of your SuiteCommerce Advanced source code.

Add your custom module to the modules object to ensure that the Gulp tasks include it when you deploy.

Your code should look similar to the following example:

                {
    "name": "SuiteCommerce Advanced Elbrus",
    "version": "2.0",
    "buildToolsVersion": "1.3.0",
    "folders": {
        "modules": "Modules",
        "suitecommerceModules": "Modules/suitecommerce",
        "extensionsModules": "Modules/extensions",
        "thirdPartyModules": "Modules/third_parties",
        "distribution": "LocalDistribution",
        "deploy": "DeployDistribution"
    },
    "modules": {
        "extensions/ProductDetails.Extension": "1.0.0",
        "extensions/MyExampleCartExtension1": "1.0.0",
                //...

Include the module definition (ProductDetails.Base.View.Extension) as a dependency within the JavaScript SC.Shopping.Starter entry point.

Your distro.json file should look similar to the following:

                "tasksConfig": {
//...
      "javascript": [
         {
             "entryPoint": "SC.Shopping.Starter",
             "exportFile": "shopping.js",
             "dependencies": [
                //...
              "StoreLocator",
              "ProductDetails.Base.View.Extension"
             ]
             //...
         }
//...

Save the distro.json file.

Step 3: Test and Deploy Your Customization

Test your source code customization on a local server (see Test SCA Customizations on a Local Server) or deploy them to your NetSuite account (see Deploy SCA Customizations to NetSuite). If you are currently running SCA on a local server, your changes should appear on your local site immediately.
Confirm your results.

Upon successful deployment, you should be able to configure item options using the SuiteCommerce Configuration record (Shopping Catalog tab, Item Options subtab).

Step 1: Extend the ProductDetails.Base.View.js File

Step 2: Prepare the Developer Tools for Your Customization

Step 3: Test and Deploy Your Customization

Related Topics