We have added a JSON file in a file cabinet. The below format we needed for the JSON file to show the SCMA website.
[
{
"categories": [
{
"categories": [
{
"categories": [],
"fullurl": "/shop/bags/totes",
"internalid": "10",
"level": "3",
"metadescription": "Shop high quality bags with Boulevard. Find the perfect size and style for you!",
"metakeywords": "boulevard, blvd, california, blvdca, handbags, leather, accessories, monogramming, personalized, handbags, totes, tote",
"name": "Totes",
"pageheading": "Totes",
"pagetitle": "Totes | Boulevard",
"parentIdPath": "|92|1|",
"sequencenumber": "1.0",
"urlfragment": "totes"
}
],
"fullurl": "/shop/bags",
"internalid": "1",
"level": "2",
"metadescription": "Shop Boulevard for the latest styles in women's bags, wallets & backpacks. Whether you need a going out clutch, or an everyday tote we've got it all.",
"metakeywords": "boulevard, blvd, california, blvdca, handbags, leather, accessories, monogramming, personalized, handbags, backpacks, clutches, crossbodies, totes, fanny packs",
"name": "Bags",
"pageheading": "Bags",
"pagetitle": "Bags | Boulevard",
"parentIdPath": "|92|",
"sequencenumber": "0.0",
"urlfragment": "bags"
}
],
"_debug_requestTime": 20,
"fullurl": "/shop",
"internalid": "92",
"level": "1",
"metadescription": "Shop all Boulevard products",
"metakeywords": "boulevard, blvd, california, blvdca, handbags, leather, accessories, monogramming, personalized, gifts",
"name": "SHOP ALL",
"pageheading": "Shop",
"pagetitle": "Shop All",
"parentIdPath": "",
"urlfragment": "shop"
}
]We need to extend the views Header.View, Header.Menu.View and Header.Menu.MyAccount.View.Also, need to read the JSON file in a file cabinet.
The reader file is needed to assign the variable of SC.CONFIGURATION.navigationData.
JJ.CommerceCategory.CommerceCategory.js
define(
'JJ.CommerceCategory.CommerceCategory'
, [
'JJ.CommerceCategory.CommerceCategory.SS2Model',
'Header.View',
'Utils',
'Header.Menu.View',
'jj_commercecategory_commercecategory.tpl',
'jj_header_header.tpl'
,'Header.Menu.MyAccount.View'
]
, function (
CommerceCategoryModel,
HeaderView,
Utils,
HeaderMenuView,
jj_commercecategory_commercecategory_tpl,
jj_header_header_tpl,
Header_Menu_MyAccount_View
) {
'use strict';
return {
mountToApp: function mountToApp(container) {
// using the 'Layout' component we add a new child view inside the 'Header' existing view
// (there will be a DOM element with the HTML attribute data-view="Header.Logo")
// more documentation of the Extensibility API in
// https://system.netsuite.com/help/helpcenter/en_US/APIs/SuiteCommerce/Extensibility/Frontend/index.html
/** @type {LayoutComponent} */
var layout = container.getComponent('Layout');
if (layout) {
_.extend(HeaderView.prototype, {
template: jj_header_header_tpl,
getChildViews: _.wrap(HeaderView.prototype.getChildViews, function (fn) {
var original_Ret = fn.apply(this, _.toArray(arguments).slice(1));
// condition to prevent showing the desktop menu in standalone
var Fields = SC.CONFIGURATION ? SC.CONFIGURATION.CommerceCategory.fileid : '';
this.CommerceCategory = new CommerceCategoryModel({ id: Fields });
var self = this;
SC.CONFIGURATION.navigationData = []
this.CommerceCategory.fetch().done(function (result) {
console.log(result, 'this.model')
SC.CONFIGURATION.navigationData = self.levelUpdate(self.CommerceCategory.get('CommerceCategory'))
self.render();
});
original_Ret['Header.Menu'] = function () {
const headerViewOptions = _.extend(
{
application: this.options.application
},
this.options.headerProfileViewOptions || {}
);
return new HeaderMenuView(headerViewOptions);
};
return original_Ret;
}),
getContext: _.wrap(HeaderView.prototype.getContext, function (fn) {
var context = fn.apply(this, _.toArray(arguments).slice(1));
// context.categories= this.model.get('CommerceCategory');
context.categories = SC.CONFIGURATION.navigationData || [];
context.isStandalone = false;
console.log(context,'context')
return context;
}),
//The function for add the class based on the category levels
levelUpdate: function (category) {
if (category) {
console.log(category,'category')
if (category.length && category.length > 0) {
_.each(category, function (Level1, index) {
if (Level1 && Level1.level && Level1.level == '1') {
category[index]['class'] = 'header-menu-level' + Level1.level + '-anchor';
}
if (Level1.categories && Level1.categories.length > 0) {
_.each(Level1.categories, function (Level2, index2) {
if (Level2.level && Level2.level == '2') {
category[index].categories[index2]['class'] = 'header-menu-level' + Level2.level + '-anchor';
}
if (Level2.categories && Level2.categories.length > 0) {
_.each(Level2.categories, function (Level3, index3) {
if (Level3.level && Level3.level == '3') {
category[index].categories[index2].categories[index3]['class'] = 'header-menu-level' + Level3.level + '-anchor';
}
});
}
});
}
});
}
}
return category;
}
});
_.extend(HeaderMenuView.prototype, {
template: jj_commercecategory_commercecategory_tpl,
getContext: _.wrap(HeaderMenuView.prototype.getContext, function (fn) {
var context = fn.apply(this, _.toArray(arguments).slice(1));
context.categories = SC.CONFIGURATION.navigationData || [];
context.isStandalone = false;
return context;
}),
});
_.extend(Header_Menu_MyAccount_View.prototype, {
getContext: _.wrap(Header_Menu_MyAccount_View.prototype.getContext, function (fn) {
var context = fn.apply(this, _.toArray(arguments).slice(1));
context.showMyAccountMenu=true;
return context;
}),
});
}
}
};
});