Kilimanjaro – Menu List Scrolling Patch (iOS)

In your Kilimanjaro implementation of SuiteCommerce Advanced, you can extend the _mixins.scss file to overwrite the %scroll-y selector as described in this section. You can download the code samples described in this procedure here: MixinsSassExtension-KilimanjaroSample.zip

Step 1: Extend the _mixins.scss File

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

   Following best practices, name this directory extensions and place it in your Modules directory. Depending on your implementation and customizations, this directory might already exist.

2. Open your extensions directory and create a custom module to maintain your customizations.

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

   Modules/extensions/MixinsSassExtension@1.0.0/

3. In your new module, create a subdirectory named Sass.

4. In your Sass subdirectory, create a new .scss file.

   Give this file a unique name that is similar to the file being modified. For example:

   Modules/extensions/mixinsSassExtension@1.0.0/Sass/_mixinsExtension.scss

5. Open this file and overwrite the %scroll-y selector.

   Your file should match the following code snippet:

                   %scroll-y{
       overflow-y: auto;
   } 
   
                 

6. Save the file.

Step 2: Prepare the Developer Tools for Your Customizations

1. Open the MixinsSassExtension@1.0.0 module.

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

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

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

                   {
       "gulp": {
           "sass": [
               "Sass/**/*.scss"
           ]
        }
   } 
   
                 

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

   Your code should look similar to the following example:

                   {
       "name": "SuiteCommerce Advanced Kilimanjaro",
       "version": "2.0",
       "isSCA": true,
       "buildToolsVersion": "1.3.1",
       "folders": {
           "modules": "Modules",
           "suitecommerceModules": "Modules/suitecommerce",
           "extensionsModules": "Modules/extensions",
           "thirdPartyModules": "Modules/third_parties",
           "distribution": "LocalDistribution",
           "deploy": "DeployDistribution"
       },
       "modules": {
           "extensions/MixinsSassExtension": "1.0.0",
           "extensions/MyExampleCartExtension1": "1.0.0",
                   //... 
   
                 

7. Split the BaseSassStyle entry in the sass object of each application (Shopping, MyAccount, and Checkout) and add your custom module (MixinsSassExtension) between them. This ensures that the Sass variables are loaded in the correct order.

   Note:

   You do not need to wrap your custom module in an include array. The compiler adds all files within your new module by default.

                   //...
   "sass": {
     //...
     "applications": [
         {
           "name": "Shopping",
           "exportFile": "shopping.css",
           "dependencies": [
           //...
             {
                 "module": "BaseSassStyles",
                 "include": [
                     "main-variables",
                     "main-base"
                 ]
             },
   
                 "MixinsSassExtension",
   
             {
                 "module": "BaseSassStyles",
                 "include": [      
                     "main-atoms",
                     "main-molecules",
                     "molecules/datepicker"
                 ]
             },
                  //...
               ]
           },
           {
           "name": "MyAccount",
           "exportFile": "myaccount.css",
           "dependencies": [
           //...
             {
                 "module": "BaseSassStyles",
                 "include": [
                     "main-variables",
                     "main-base"
                 ]
             },
   
                 "MixinsSassExtension",
   
             {
                 "module": "BaseSassStyles",
                 "include": [      
                     "main-atoms",
                     "main-molecules",
                     "molecules/datepicker"
                 ]
             },
                  //...
               ]
           },
           {
           "name": "Checkout",
           "exportFile": "checkout.css",
           "dependencies": [
           //...
             {
                 "module": "BaseSassStyles",
                 "include": [
                     "main-variables",
                     "main-base"
                 ]
             },
   
                 "MixinsSassExtension",
   
             {
                 "module": "BaseSassStyles",
                 "include": [      
                     "main-atoms",
                     "main-molecules",
                     "molecules/datepicker"
                 ]
             },
                  //...
               ]
      ]
   },
   //... 
   
                 

8. Save the distro.json file.

Step 3: Deploy Your Extension

1. Deploy your source code customizations to your NetSuite account and test the functionality using a phone running iOS. See Deploy SCA Customizations to NetSuite for details.

2. Confirm your results.

   Upon successful deployment, iOS mobile users should be able to scroll through long menu lists.

General Notices