Shopping Cart Not Scrolling (Mobile)

In some cases, mobile users encounter an issue where their Cart ceases to scroll after removing an item from the Saved for Later product list. This issue can occur in the following scenario:

The user adds more than one item to their Cart.
The user adds items to their Saved for Later product list.
The user later removes an item from the Saved for Later product list and returns to their Cart.
The user can no longer scroll their Cart.

If you experience this issue on your SCA site, perform the following steps to correct. Best practices require customizing the existing source code using the .extend method, as detailed below.

Note:

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

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/ProductListExtension@1.0.0
In your new ProductListExtension@1.0.0 module, create a subdirectory called JavaScript.

Modules/extensions/ProductListExtension@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 deleteListItemHandler method to include the following line:

                self.$('[data-action="pushable"]').scPush();

Assuming that you have followed best practices outlined in this procedure, your extension should look like this:

                define('ProductList.DetailsLater.View.Extension'
,   [
      'ProductList.DetailsLater.View'
   ,   'underscore'
   ,   'jQuery'   
   ]
,   function (
      ProductListDetailsLaterView
   ,   _
   ,   jQuery
   )
{
   'use strict';

      _.extend(ProductListDetailsLaterView.prototype,
      {
         deleteListItemHandler: function (target)
         {
            var self = this
            ,   itemid = jQuery(target).closest('article').data('id')
            ,   product_list_item = this.model.get('items').findWhere({
                  internalid: itemid + ''
               })
            ,   success = function ()
            {
               if (self.application.getLayout().updateMenuItemsUI)
               {
                  self.application.getLayout().updateMenuItemsUI();
               }

               self.deleteConfirmationView.$containerModal.modal('hide');
               self.render();
               self.$('[data-action="pushable"]').scPush();
               self.showConfirmationMessage(_('The item was removed from your product list').translate(), true);
            };

            self.model.get('items').remove(product_list_item);      
            self.deleteListItem(product_list_item, success);
         }
      });
}
);

Save the file.

Step 2: Download the jQuery.scPush.js File

Download the following file:

jQuery.scPush.zip
Open the .zip file and extract jQuery.scPush.js to the JavaScript subdirectory of your custom module.

Modules/extensions/ProductListExtension@1.0.0/JavaScript/jQuery.scPush.js

Step 3: Prepare the Developer Tools for Your Customizations

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

Modules/extensions/ProductListExtension@1.0.0/ns.package.json

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

                {
   "gulp": {
      "javascript": [
         "JavaScript/*.js"
      ]
         }
         "overrides": {
            "Modules/suitecommerce/jQueryExtras@x.y.z/JavaScript/jQuery.scPush.js":"JavaScript/jQuery.scPush.js"
         }
}

Note:

In the above code example, replace the string x.y.z with the current version of your source module.

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 to ensure that the Gulp tasks include your extension when you deploy.

In this example, the extensions/ProductListExtension 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/ProductListExtension": "1.0.0",
               "suitecommerce/Account": "2.3.0",
               "suitecommerce/Address": "2.4.0",
               ...

Include the file definition (“ProductList.DetailsLater.View.Extension”) in the dependencies array of the Shopping and MyAccount applications of the JavaScript object.

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

                "tasksConfig": {
//...
"javascript": [
         //...
         {
               "entryPoint": "SC.Shopping.Starter",
               "exportFile": "shopping.js",
               "dependencies": [
                  //...
                     "Newsletter",
                     "ProductDetailToQuote",
                     "ProductList.DetailsLater.View.Extension"
               ],
         //...
         {
               "entryPoint": "SC.MyAccount.Starter",
               "exportFile": "myaccount.js",
               "dependencies": [
                  //...
                     "Location.Model",
                     "StoreLocator.Model",
                     "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 4: Test and Deploy Your Extension

Test your source code customizations 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 can remove items from the Save for Later list, return to the Cart, and scroll through your list of items using a mobile interface.

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

Step 2: Download the jQuery.scPush.js File

Step 3: Prepare the Developer Tools for Your Customizations

Step 4: Test and Deploy Your Extension

Related Topics