This article outlines the implementation of a custom SuiteCommerce extension that dynamically classifies brand categories in the website header menu into “Our Brands” and “Partner Brands” based on a configuration-driven approach. This solution replaces hardcoded logic with a flexible method that can be managed via SC.CONFIGURATION.
Dynamically separate brands into “Our Brands” and “Partner Brands” using configuration fields.
Limit the number of device categories shown under “Devices” and provide a “SEE ALL” button.
Rename the “Shop by Phone Model” category to “Devices.”
Properly format iPhone subcategories.
Ensure scalability and maintainability of brand classification without code redeployment.
How It Works
A configuration entry headermenu.brands is added to SC.CONFIGURATION, where the brands to be classified as “Our Brands” are listed. The extension fetches this configuration at runtime and compares each brand category’s name. If it matches, it marks it as isOurBrand; otherwise, it’s marked as a partner brand.
Additionally, the extension:
- Renames the “Shop by Phone Model” category to “Devices”.
- Limits displayed device categories to 5 and adds a “SEE ALL” button.
- Properly formats “iPhone” brand subcategories for better presentation.
Required Configuration Example
{
"type": "object",
"subtab": {
"id": "headermenu",
"title": "Brand List",
"group": "extensions"
},
"properties": {
"headermenu.brands": {
"group": "extensions",
"subtab": "headermenu",
"type": "array",
"title": "Our Brand List",
"description": "added our brands name in this list",
"items": {
"type": "object",
"properties": {
"fieldname": {
"type": "string",
"title": "name",
"description": "added brand name for our brand ",
"translate": true
},
"fieldid": {
"type": "string",
"title": "Brand name",
"description": "added brand name for our brand ",
"translate": true
}
}
}
}
}
Extension Code (Header Menu View Override)
_.extend(HeaderMenuView.prototype, {
template: jj_header_menu_tpl,
getContext: _.wrap(HeaderMenuView.prototype.getContext, function wrappedInitialize(fn, options) {
var getContextRet = fn.apply(this, _.toArray(arguments).slice(1));
var categ = Configuration.navigationData || [];
_.map(categ, function (value) {
value.isbrands = false;
// Rename "Shop by Phone Model" to "Devices"
if (value.href === '/brands') {
value.text = 'Devices';
_.each(value.categories, function (deviceCategory) {
if (deviceCategory.categories && deviceCategory.categories.length > 0) {
var originalCategories = JSON.parse(JSON.stringify(deviceCategory.categories));
if (originalCategories.length > 5) {
deviceCategory.categories = originalCategories.slice(0, 5);
deviceCategory.hasMore = true;
deviceCategory.categories.push({
categories: [],
more: true,
class: "mobile-more-button",
"data-type": "commercecategory",
href: deviceCategory.href,
text: "SEE ALL " + deviceCategory.text.toUpperCase()
});
} else {
deviceCategory.hasMore = false;
}
} else {
deviceCategory.categories = [];
deviceCategory.hasMore = false;
}
});
}
// Fetch our brand names from SC.CONFIGURATION
var customFieldsArray = SC.CONFIGURATION.get('headermenu.brands') || [];
var ourBrands = customFieldsArray.map(function (item) {
return item.fieldname;
});
// Classify Brands
if (value.text === 'Brands' && value.categories) {
value.isbrandsParent = true;
_.each(value.categories, function (child) {
child.isbrands = true;
child.isOurBrand = ourBrands.includes(child.text);
child.isPartnerBrand = !ourBrands.includes(child.text);
child.categories = []; // remove subcategories
});
}
// Mark other brands as isbrands
if (value.href === "/shop-by-brands-balaji") {
_.map(value.categories, function (valuein) {
valuein.isbrands = true;
return valuein;
});
}
// Special formatting for iPhone categories
if (value.href === "/brands") {
_.map(value.categories, function (valuein) {
if (valuein.href === "/brands/iphone") {
_.map(valuein, function (valueeach, key) {
if (key === "categories") {
_.map(valueeach, function (valueeachin) {
try {
var text = valueeachin.text.trim().toLowerCase();
var text1 = text.substring(0, 6);
if (text1 === "iphone") {
var finalText = "iPhone " + self.titleCase(text.substring(6).trim());
valueeachin.text = finalText;
valueeachin.iphone = true;
}
} catch (err) {
console.log("iPhone format error", err);
}
return valuein;
});
}
return valueeach;
});
}
return valuein;
});
}
return value;
});
getContextRet.categories = categ;
return getContextRet;
})
});