HTML List Styles Do Not Display (Kilimanjaro)

Apply the changes in this patch using the override method, as described in this section. The following table lists the files to be overridden and their locations in the source code:

Module Location	File
BaseSassStyles	_base.scss
ProductDetails	_product-details-information.scss

You can download the code samples described in this procedure here: HtmlListStyleNotDisplaying-Kilimanjaro.zip

Step 1: Create the Override File

1. Create an extensions directory to store your custom module. Depending on your implementation, this directory might already exist.

2. Within this directory, create a custom module with a name that is unique, but similar to each module being customized. Give these new modules a version of 1.0.0.

   Your implementation should look like this:

   • Modules/extensions/BaseSassStylesExtension@1.0.0

   • Modules/extensions/ProductDetailsExtension@1.0.0

3. Open your new BaseSassStylesExtension@1.0.0 module and create nested subfolders titled Sass and base.

   For example: Modules/extensions/BaseSassStylesExtension@1.0.0/Sass/base

4. Open your new ProductDetailsExtension@1.0.0 module and create a subfolder titled Sass.

   For example: Modules/extensions/ProductDetailsExtension@1.0.0/Sass

5. Copy the following source files and paste into the correct location, where X.Y.Z represents the version of the module in your implementation of SuiteCommerce Advanced:

   Copy This File:	Place a Copy Here:
   Modules/suitecommerce/BaseSassStyles@X.Y.Z/Sass/base/_base.scss	Modules/extensions/BaseSassStyles@1.0.0/Sass/base
   Modules/suitecommerce/ProductDetails@X.Y.Z/Sass/_product-details-information.scss	Modules/extensions/ProductDetails@1.0.0/Sass

6. Open your new copy of _base.scss and add the following lines to the end of file:

                   .cms-content ul, .cms-content ol {
      margin-left: $sc-margin-lv4;
   }
   
   .cms-content ul li {
      list-style: circle;
   }
   
   .cms-content ol li {
      list-style: decimal;
   } 
   
                 

7. Save the file.

8. Open your new copy of _product-details-information.scss and add the following lines to the end of file:

                   .product-details-information-tab-content-container ul, .product-details-information-tab-content-container ol  {
      margin-left: $sc-margin-lv4;
   }
   
   .product-details-information-tab-content-container ul li {
      list-style: outside;
   }
   
   .product-details-information-tab-content-container ol li {
      list-style: decimal;
   } 
   
                 

9. Save the file.

Step 2: Prepare the Developer Tools For Your Customization

1. Open your Modules/extensions/BaseSassStyles@1.0.0 module.

2. Create a file in this directory titled ns.package.json.

   For example: Modules/extensions/BaseSassStyles@1.0.0/ns.package.json

3. Paste the following code in your new ns.package.json file:

   Important:

   You must replace the string X.Y.Z with the version of the module in your implementation of SuiteCommerce Advanced.

                   {
      "gulp": {
         "sass": [
            "Sass/**/*.scss"
         ]
      },
      "overrides": {
         "suitecommerce/BaseSassStyles@X.Y.Z/Sass/base/_base.scss" : "Sass/base/_base.scss"
      }
   } 
   
                 

4. Save the file.

5. Open your Modules/extensions/ProductDetails@1.0.0 module.

6. Create a file in this directory titled ns.package.json.

   For example: Modules/extensions/ProductDetails@1.0.0/ns.package.json

7. Paste the following code in your new ns.package.json file:

   Important:

   You must replace the string X.Y.Z with the version of the module in your implementation of SuiteCommerce Advanced.

                   {
      "gulp": {
         "sass": [
            "Sass/**/*.scss"
         ]
      },
      "overrides": {
         "suitecommerce/ProductDetails@X.Y.Z/Sass/_product-details-information.scss" : "Sass/_product-details-information.scss"
      }
   } 
   
                 

8. Open the distro.json file. This file is located in your root directory.

9. Add both custom modules to the modules object.

   Your code should look similar to:

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

   This step ensures that the Gulp tasks include your module when you deploy. In this example, the custom modules are added at the beginning of the list of modules. However, you can add the modules anywhere in the modules object. The order of precedence in this list does not matter.

10. Save the distro.json file.

Step 3: Test and Deploy Your Customization

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

2. Confirm your results.

   Upon successful deployment, the HTML list (<li> and <ul>) styles should display on your webstore.

Related Topics

HTML List Styles Do Not Display

General Notices