In some cases, iOS users might encounter an issue where they cannot scroll through a long list of menu items if the list reaches beyond the device screen. If you experience this issue on your SuiteCommerce Advanced site, perform the updates described in the section corresponding to your implementation:

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.

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

              Prepare the Developer Tools for Your Customizations
Open the MixinsSassExtension@1.0.0 module.

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

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

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


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

              
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 it when you deploy.

Your code should look similar to the following example:


Copy
                {
    "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",
                //... 

              
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.

                //...
"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"
              ]
          },
               //...
            ]
   ]
},
//...