Save for Later Item not Moved to Cart

This topic applies to

Applies to

SuiteCommerce Advanced | Mont Blanc

 

In Mont Blanc releases of SuiteCommerce Advanced, when users set an item as Save for Later and then return to move that item to the cart an error is returned. To correct this error, apply the patch described here to extend the addItemToCartHandler() method in the ProductList.DetailsLater.View.js file.

Note

Before proceeding, familiarize yourself with the Best Practices for Customizing SuiteCommerce Advanced.


Step 1: Extend the ProductList.DetailsLater.View.js File

This step explains how to extend the ProductList.DetailsLater.View.js file, which is located in the ProductList module. You can download the code samples described in this procedure here: Product.List.Extension@1.0.0.zip

  1. If you have not done so already, create a directory to store your custom module.

  2. Open this directory and create a subdirectory to maintain your customizations.

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

    Modules/extensions/Product.List.Extension@1.0.0

  3. In your new Product.List.Extension@1.0.0 module, create a subdirectory called JavaScript.

    Modules/extensions/Product.List.Extension@1.0.0/JavaScript

  4. In your new JavaScript subdirectory, create a JavaScript file to extend ProductList.DetailsLater.View.js .

    Name this file according to best practices. For example:

    ProductList.DetailsLater.View.Extension.js

  5. Open this file and extend the addItemToCartHandler() method as shown in the following code snippet.

    define('ProductList.DetailsLater.View.Extension' , [ 'ProductList.DetailsLater.View' , 'underscore' ] , function ( ProductListDetailsView , _ ) { 'use strict'; _.extend(ProductListDetailsView.prototype, { addItemToCartHandler : function (e) { e.stopPropagation(); e.preventDefault(); if (this.application.getConfig('addToCartBehavior') === 'showCartConfirmationModal') { this.cart.optimistic = null; } var self = this , selected_product_list_item_id = self.$(e.target).closest('article').data('id') , selected_product_list_item = self.model.get('items').findWhere({ internalid: selected_product_list_item_id.toString() }) , selected_item = selected_product_list_item.get('item') , selected_item_internalid = selected_item.internalid , item_detail = selected_product_list_item.getItemForCart(selected_item_internalid, selected_product_list_item.get('quantity'), selected_item.itemoptions_detail, selected_product_list_item.getOptionsArray()) , add_to_cart_promise = this.addItemToCart(item_detail) , whole_promise = jQuery.when(add_to_cart_promise, this.deleteListItem(selected_product_list_item)).then(jQuery.proxy(this, 'executeAddToCartCallback')); if (whole_promise) { this.disableElementsOnPromise(whole_promise, 'article[data-item-id="' + selected_item_internalid + '"] a, article[data-item-id="' + selected_item_internalid + '"] button'); } } } }); } );
  6. Save the file.

Step 2: Prepare the Developer Tools for Your Extension

  1. Open the Product.List.Extension@1.0.0 module.

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

    Modules/extensions/Product.List.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 ns.package.json 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.

    This ensures that the Gulp tasks include your extension when you deploy. In this example, the extensions/ProductList.DetailsLater.View.Extension module is added at the beginning of the list of modules. However, you can add the module anywhere in the modules object. The order of precedence in this list does not matter.

    { "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/ProductList.DetailsLater.View.Extension": "1.0.0", "suitecommerce/Account": "2.3.0", "suitecommerce/Address": "2.4.0", ...
  7. Include the module definition (“ProductList.DetailsLater.View.Extension”) in the dependencies array of the Checkout application JavaScript object.

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

    "tasksConfig": { //... "javascript": [ //... { "entryPoint": "SC.Checkout.Starter", "exportFile": "checkout.js", "dependencies": [ //... "CMSAdaptor", "Sensors", "ProductList.DetailsLater.View.Extension" ], //...

    Note

    Best practice is to place any new modules at the bottom of the list in the dependencies array.


  8. Save the distro.json file.

Step 3: Test and Deploy Your Extension

  1. Deploy your customizations to your NetSuite account and test. See Deploy to NetSuite.

  2. Verify your changes.

    An error should not be returned when items set as Save for Later are later moved to the cart.

Related Topics