Save for Later Item not Moved to Cart

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

You can download the code samples described in this procedure here: Product.List.Extension@1.0.0.zip

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

To extend the ProductList.DetailsLater.View.js file, which is located in the ProductList module, create a directory to store your custom module.
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
In your new Product.List.Extension@1.0.0 module, create a subdirectory called JavaScript.

Modules/extensions/Product.List.Extension@1.0.0/JavaScript
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

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');
      }
    }

  }

  });
}
);

Save the file.

Step 2: Prepare the Developer Tools for Your Extension

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

Modules/extensions/Product.List.Extension@1.0.0/ns.package.json

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

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

Save the ns.package.json 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.

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",
               ...

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.

Save the distro.json file.

Step 3: Test and Deploy Your Extension

Deploy your customizations to your NetSuite account and test. See Deploy SCA Customizations to NetSuite.
Verify your changes.

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

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

Step 2: Prepare the Developer Tools for Your Extension

Step 3: Test and Deploy Your Extension

Related Topics