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. This guide will show you the steps involved in overriding eCommerce Shop footer component with your own custom code.

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

3. Click CREATE.

4. The Custom Content Editor reveals.

5. Assign a Name for the template.

   For example, custom-Footer

---

---

Replacing the Default Directive Code

Under the JAVASCRIPT tab, replace this code snippet (around lines 85-91):

dsCoreModule.directive('footer', [
    function() {
        return {
            restrict: 'E',
            scope: true,
            templateUrl: 'Footer/footer.tpl.html',
            controllerAs: 'ctrl',

With this:

(function () {
    'use strict';
      module.config(['$provide', function ($provide) {
       $provide.decorator('customFooterDirective', ['$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-Footer',
                       '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('customFooter', [
    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 that will help test that the footer has overridden successfully.

---

---

Saving the Component

1. Click the Published toggle on to publish the footer component now after you save the configuration.

   Alternatively, you can publish the footer 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 footer.

3. Click SAVE.

   If there are no errors, then the pop-up will close and the footer component will be added to the Pages and Components List under the Component Templates tab.

---

---

Testing the Component

Test if the footer 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 footer 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.