Elbrus Release and Earlier – Menu List Scrolling Patch (iOS)

This section explains how to override the _mixins.scss to correct the iOS menu item scrolling issue for any Elbrus implementations of SuiteCommerce Advanced and earlier. Due to the structure of dependencies within these implementations, you cannot divide the entry point within the distro.json file. Therefore, you must override this file. You can download the code samples described in this procedure here: MixinsSassOverride-ElbrusAndEarlierSample.zip.

Important:

Be aware of any existing extensions or customizations to the existing file and familiarize yourself with the Best Practices for Customizing SCA before proceeding with any customizations.

Step 1: Override the _mixins.scss File

1. 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/MixinsSassOverride@1.0.0/

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

4. Copy the _mixins.scss file located in Modules > suitecommerce > BaseSassStyles@x.y.z and paste into your new Sass directory (where x.y.z represents the version of the module in your implementation of SuiteCommerce Advanced).

   For example, paste your copy of this into the following location:

   Modules/extensions/MixinsSassOverride@1.0.0/Sass/_mixins.scss

5. Open this file and remove the following line:

                   -webkit-overflow-scrolling: touch; 
   
                 

   When you are finished, your file should match the following code snippet:

                   /*
      © 2017 NetSuite Inc.
      User may not copy, modify, distribute, or re-bundle or otherwise make available this code;
      provided, however, if you are an authorized user with a NetSuite account or log-in, you
      may use this code subject to the terms that govern your access and use.
   */
   
   @mixin border-radius($radius) {
     -webkit-border-radius: $radius;
        -moz-border-radius: $radius;
         -ms-border-radius: $radius;
             border-radius: $radius;
   }
   
   %scroll-y{
       overflow-y: auto;
   }
   
   // avoid using BS mixin cause wont generate "-webkit-transform"
   @mixin transition-transform($duration...) {
   
      -webkit-transition: -webkit-transform $duration;
      -moz-transition: -moz-transform $duration;
      -o-transition: -o-transform $duration;
      transition: transform $duration;
   }
   
   @mixin appearance($appearance) {
     -webkit-appearance: $appearance;
     -moz-appearance: $appearance;
     appearance: $appearance;
   }
   
   //used for select arrow down
   @mixin angle-down-background($color){
     $color-local: remove-hash-from-color($color);
     background-image:url("data:image/svg+xml;utf8,<svg width='2000px' height='2000px' fill='%23#{$color-local}' xmlns='http://www.w3.org/2000/svg'><path d='M1075 352q0 -13 -10 -23l-50 -50q-10 -10 -23 -10t-23 10l-393 393l-393 -393q-10 -10 -23 -10t-23 10l-50 50q-10 10 -10 23t10 23l466 466q10 10 23 10t23 -10l466 -466q10 -10 10 -23z'/></svg>");
   }
   
   
   @function remove-hash-from-color($color) {
     @return str-slice(ie-hex-str($color), 4);
   }
   
   //All placeholders equal
   @mixin placeholder {
     ::-webkit-input-placeholder {@content}
     :-moz-placeholder           {@content}
     ::-moz-placeholder          {@content}
     :-ms-input-placeholder      {@content}  
   } 
   
                 

6. Save the file.

Step 2: Prepare the Developer Tools for Your Override

1. Open the MixinsSassOverride@1.0.0 module.

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

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

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

                   {
       "gulp": {
           "sass": [
               "Sass/**/*.scss"
           ]
       },
       "overrides": {
          "suitecommerce/BaseSassStyles@2.0.0/Sass/_mixins.scss" : "Sass/_mixins.scss"
       }   
   } 
   
                 

   Note:

   Replace the string x.y.z in the above example with the version of the module in your version of SuiteCommerce Advanced.

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 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/MixinsSassOverride": "1.0.0",
           "extensions/MyExampleCartExtension1": "1.0.0",
                   //... 
   
                 

7. Save the file.

Step 3: Deploy Your Override

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