Custom Page Title in SMT Does Not Display Correctly

creating a title for a custom facets page using Site Management Tools does not display the correct title. In these cases, editing the page name on a custom page results in the page title inheriting the facet path instead of the custom title

Step 1: Extend CMSadapter.Page.Router.js

  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 similar to the module being customized.For example: Modules/extensions/CMSadapterExtension@1.0.0.
  3. Open your new CMSadapterExtension@1.0.0 module and create a subfolder titled JavaScript.For example: Modules/extensions/CMSadapterExtension@1.0.0/JavaScript
  4. In your new JavaScript subdirectory, create a JavaScript file to extend CMSadapter.Page.Router.Extend.js.Name this file according to best practices.For example: CMSadapter.Page.Router.Extend.js
 define(
   'CMSadapter.Page.Router.Extend'
,   [
      'CMSadapter.Page.Router'
   ,   'underscore'
   ,   'Backbone'
   ]
,   function (
      CMSadapterPageRouter

   ,   _
   ,   Backbone
   )
{
   'use strict';

   _.extend(CMSadapterPageRouter.prototype,
        {
         getPageForFragment: function getPageForFragment(fragment, allPages)
         {
            fragment = fragment || Backbone.history.fragment || '/';
            fragment = fragment.split('?')[0]; //remove options

            var collection = allPages ? this.allPages : this.landingPages;
            return collection.find(function(page)
            {
               return ((page.get('url') === fragment) || (page.get('url') === '/' + fragment));
            });
         }
    });
}); 



  1. Save the file.

Step 2: Prepare the Developer Tools For Your Customization

  1. Open your new CMSadapterExtension@1.0.0 module directory.
  2. Create a file in this directory titled ns.package.json.Modules/extensions/CMSadapterExtension@1.0.0/ns.package.json
  3. Paste the following code into your new ns.package.json file:
{
    "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/CMSadapterExtension": "1.0.0",
            "extensions/MyExampleCartExtension1": "1.0.0",
            ... Save the file.

Step 2: Prepare the Developer To {
    "gulp": {
        "javascript": [
            "JavaScript/*.js"
        ]
    }
} 
  1. Open the distro.json file. This is located in your root directory.
  2. Add your custom module to the modules object.Your code should look similar to:
"tasksConfig": {
//...
"javascript": [
         //...
         {
               "entryPoint": "SC.Shopping.Starter",
               "exportFile": "shopping.js",
               "dependencies": [
                  //...
                     "ProductDetailToQuote",
                     "StoreLocator",
                     "CMSadapter.Page.Router.Extend"
               ],
                           //... 

               "entryPoint": "SC.MyAccount.Starter",
               "exportFile": "myaccount.js",
               "dependencies": [
                  //...
                    "StoreLocatorAccessPoints",
                    "StoreLocator",
                    "SC.CCT.Html",
                    "CMSadapter.Page.Router.Extend" 
               ],
                           //...

                           "entryPoint": "SC.Checkout.Starter",
               "exportFile": "checkout.js",
               "dependencies": [
                  //...
                    "StoreLocatorAccessPoints",
                    "StoreLocator",
                    "SC.CCT.Html",
                    "CMSadapter.Page.Router.Extend" 
               ],
                           //...

Test and deploy

Leave a comment

Your email address will not be published. Required fields are marked *