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

1. Click + ADD NEW and select Component Template. The Add Component Template configuration opens.

2. Click the dropdown to select Header.

3. Click CREATE.

4. The Custom Content Editor reveals.

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

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

2. Under the MFC tab, you’ll find the Multi-Faceted Configuration (MFC) settings. Enter your specific configurations on who can view the header.

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