Warning: The Custom Pages page is an advanced feature. Only an admin with AngularJS web development experience should attempt.

With Custom Pages, you can create eCommerce Shop pages built with your own HTML, CSS, and JavaScript code. When you create a custom page you are given An essentially blank slate that only includes the header and footer. The body of the page is up to you to add your own HTML, CSS, and JavaScript.

What We’ll Cover

• Finding the Page
• Creating Custom Pages
• Custom Content Editor
• Razor Syntax
• NG-Controller
• Setting the Custom Page’s Title
• Linking to Internal Pages

---

---

Finding the Page

In eCommerce Admin, navigate to: Advanced Customization > Custom Pages.

[CLIENTID].retailadmin.directscale.com/#/CustomPage

---

---

Creating Custom Pages

1. Click + ADD NEW and select Custom Page.

   The Add Custom Page configuration opens.

2. Enter a Name.

3. As you type the Name, the Page URL populates with a suggested URL.

   If you want, you can edit the Page URL by typing in the field; it’s not necessary to click EDIT URL.

4. Use the Custom Content Editor to input your HTML, JavaScript, and CSS.

5. Under the MFC tab, you can customize for whom the page will display using Multi-Faceted Configuration (MFC).

6. Toggle the Published switch to publish the page after saving.

7. Click SAVE when finished.

---

---

Custom Content Editor

The Custom Content Editor provides a blank space to add your HTML, JAVASCRIPT, and CSS. You can also use CSharp (C#) to call CUSTOM API logic.

---

---

Razor Syntax

Razor is a view engine supported in ASP.NET MVC that allows you to mix HTML with server-side code using C#.

This engine has integrated this syntax into the Custom Content Editor.

Read more: Using the Razor Syntax Integration with Custom Pages and Widgets

---

---

NG-Controller

The eCommerce Shop is built with AngularJS. So, although not necessarily required, it’s a good idea to define your ng-controller in your opening <div>.

<div ng-controller="{CustomPageName}Ctrl">

This allows you to take advantage of available objects. Here’s a complete list of them.

aboutCtrl.$inject = ['$scope', 'companyDetails', '$window', 'itemsService', '$state', '$RestService', '$filter', 'userService', '$location', 'titleService'];

function aboutCtrl($scope, companyDetails, $window, itemsService, $state, $RestService, $filter, userService, $location, titleService) {

Here’s an example of a function you can use under the JavaScript tab.

Note: To use this function, update the controller name (i.e., aboutCtrl) and setTitle (pagetitle_about) to your own.

(function () {
    'use strict';
    module.controller('aboutCtrl', aboutCtrl);

    aboutCtrl.$inject = ['$scope', '$window', 'userService', 'titleService'];

    function aboutCtrl($scope, $window, userService, titleService) {

        $window.scrollTo(0, 0);
        titleService.setTitle('pagetitle_about');
        
        // This is the way to build a function with a link, that includes the Web alias. 
        // It is called like this: <button ng-click="GoToLink()">Click It</button> or ticket.  
        $scope.navigateToLink = function (path) {
          $location.path(path.replace('{webalias}', userService.WebAlias));
        };
        
        // This makes the userService collection available for the HTML element
        // that looks like this: <a ng-href="/{{userService.WebAlias}}/home">link1</a>
        $scope.userService = userService;

        // These can be added to all custom pages, using the same pattern. Just know that the HTML needs the 
        // scope to be defined in an element that wraps the rest of the page.
    }
})();

---

---

Setting the Custom Page’s Title

In the Angular function, to set the custom page’s title that appears on your browser’s tab, you need to define the titleService object.

The following is the important snippets that need to be included:

Note: To use this function, update the controller name (i.e., aboutCtrl) to your own.

(function () {
    'use strict';
    module.controller('aboutCtrl', aboutCtrl);

    aboutCtrl.$inject = ['titleService'];

    function aboutCtrl(titleService) {

        titleService.setTitle('pagetitle_about');

    }
})();

titleService.setTitle(''); is where you enter a string key.

For example: titleService.setTitle('pagetitle_whoWeAre');

Then navigate to Content Management > Localization and add the string.

For more information, see: Localizing Static Content.

---

---

Linking to Internal Pages

When linking to internal pages, you’ll want to make sure include an associate’s {webalias} in the URL in order to keep everything under their shop context; however, because a {webalias} is dynamic you’ll have to write your URLs in a specific way.

Dynamically pulling in an associate’s {webalias} into Custom Content Editor is supported through invoking the User Data model via Razor syntax.

So, if you want to include the following URL in your custom page:

https://www.[CLIENTID].shop.directscale.com/samspace/Application/

You would structure your <a> element like this:

<a href="/@User.AssociateWebAlias/Application">Linked Text</a>