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

This topic applies to

Applies to

SuiteCommerce Advanced | Elbrus


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

  1. 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

  2. In your new ProductDetails.Extension@1.0.0 module, create a subdirectory called JavaScript.

  3. 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

  4. 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' } });
  5. Save the file.

Step 2: Prepare the Developer Tools for Your Customization

  1. Open the ProductDetails.Extension@1.0.0 module.

  2. Create a file in this module and name it ns.package.json.

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

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

    { "gulp": { "javascript": [ "JavaScript/*.js" ] } }
  4. Save the file.

  5. Open the distro.json file.

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

  6. 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", //...
  7. 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" ] //... } //...
  8. Save the distro.json file.

Step 3: Test and Deploy Your Customization

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

  2. 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).

Related Topics