Warning: When using Page or Component Templates remember to work with the provided code and instructions given in the various tabs. Hard coding website pages instead of using these templates can cause conflict with the site’s functionality. Where possible, and to further avoid any conflict, perform testing in a non-live environment to avoid any conflicts on your live sites.
Component Templates are specific components and modules, such as the header, footer, and slide-out cart summary that you can customize.
What We’ll Cover
- Finding the Page
- Accessing a Component Template
- Replacing the Default Directive Code
- Adding Ending Brackets
- Adding a CSS Change for Testing Purposes
- Saving the Component
- Testing the Component
- Customizing the Component
Finding the Page
In eCommerce Admin, navigate to: Advanced Customization > Custom Pages.
[CLIENTID].retailadmin.directscale.com/#/CustomPage
Accessing a Component Template

-
Click + ADD NEW and select Component Template. The Add Component Template configuration opens.
-
Click the dropdown to select Header.
-
Click CREATE.
-
The Custom Content Editor reveals.
-
Assign a Name for the template.
For example,
custom-Header
Replacing the Default Directive Code
Under the JAVASCRIPT tab, replace this code snippet (around lines 84-90):

dsCoreModule.directive('headerBar', [
function() {
return {
restrict: 'E',
scope: true,
templateUrl: 'Header/header.tpl.html',
controllerAs: 'ctrl',
With this:
(function () {
'use strict';
module.config(['$provide', function ($provide) {
$provide.decorator('customHeaderBarDirective', ['$delegate', '$RestService', '$compile', 'commonSetting', '$location','userService', function ($delegate, $RestService, $compile,commonSetting, $location,userService) {
var directive = $delegate[0];
console.log('directive',directive);
var link = directive.link;
console.log('link',link);
directive.compile = function () {
return function Link(scope, element, attrs, ctrls) {
commonSetting.commonSettingPromise.then(function () {
var custmerType = _.filter(commonSetting.commonData.CustomerTypes, function (item) {
return (item.CustomerTypeID == userService.customerTypeID); });
var req = {
'Url': 'custom-Header',
'CountryCode': commonSetting.commonData.selectedCountry,
'CustomerType': custmerType[0].CustomerTypeDescription,
'LanguageCode': commonSetting.commonData.selectedLanguageCode.split('-')[0],
'WebAlias': $location.path().split('/')[1] || 'www'
};
$RestService.GetClientPages(req).then(function (result) {
result = result.data.Data;
try {
if (result) {
if (result.Html !== null) {
element.html($compile(result.Html)(scope)).show();
} else {
element.html('There is no Template available').show();
}
} else {
element.html('There is no Template available').show();
}
} catch (ex) {
console.error('ex', ex);
element.html('There is no Template available').show();
}
});
});
return link.apply(this, arguments);
};
};
return $delegate;
}]);
}])
.directive('customHeaderBar', [
function() {
return {
restrict: 'E',
template: '<div></div>',
controllerAs: 'ctrl',
link: function () { },

Adding Ending Brackets
Scroll down to the end of the JAVASCRIPT editor and add })();
under the final ]);
.

Adding a CSS Change for Testing Purposes
Under the CSS tab, make a minor change (such as the background color (around line 226)). This will help test that the header has overridden successfully.

md-toolbar:not(.md-menu-toolbar) {
background-color: var(--color1) !important;
color: rgba(0, 0, 0, 1);
}
For testing purposes, you can change background-color: var(--color1) !important;
to background-color: var(--color2) !important;
. This changes the header’s background color from Main Color to Accent Color #1. These colors are configured in the Branding page.
Saving the Component
-
Click the Published toggle on to publish the header component now after you save the configuration.
Alternatively, you can publish the header component from the Pages and Components List by clicking the
Publish icon.
-
Under the MFC tab, you’ll find the Multi-Faceted Configuration (MFC) settings. Enter your specific configurations on who can view the header.
-
Click SAVE.
If there are no errors, then the pop-up will close and the header component will be added to the Pages and Components List under the Component Templates tab.
Testing the Component
Test if the header is overriding correctly by opening your eCommerce Shop.


Customizing the Component
Back in the Custom Pages admin page, under the Component Templates tab, click your header name to expand the section, then click the Edit icon to reopen the configuration pop-up.
In the pop-up, you can now make any customizations to the HTML, JAVASCRIPT, and CSS code. Once complete, click SAVE.
Comments
0 comments
Please sign in to leave a comment.