Incorporate a Page Designer Page into the Storefront

You can use a storefront controller to create a URL to Page Designer pages. You can use the URL, for example, to link to a page from a marketing email. You can also use the URL to add a link to the page from the global header or footer or main navigation of the storefront.

Create the storefront controller using the dw.experience API. The following example controller, PDPage.js, exports a Show function that passes in the ID of the Page Designer page. The controller checks whether to make the page visible based on schedule and customer group. If the page is visible, the controller renders it. Otherwise, the user is redirected to the home page.

         PDPage.js
'use strict';

var PageMgr = require('dw/experience/PageMgr');
var URLUtils = require('dw/web/URLUtils');

exports.Show = function () 
{
    var page = PageMgr.getPage(request.httpParameterMap.cid.stringValue);

    // Render only if the page is currently visible (as driven by the
    // online flag for scheduling and customer segmentation that the merchant
    // configured for the page)
    if (page != null && page.isVisible())  
    {
        response.writer.print(PageMgr.renderPage(page.ID, ""));
    } 
    else 
    {
        response.redirect(URLUtils.httpsHome().toString());
    }
};
exports.Show.public = true;

When this controller is uploaded to the site, any Page Designer page can be accessed by passing in its page ID in a URL as follows:

<urlToTheStorefront>/PDPage-Show?cid=<pageID>

For example, if you have a page with ID loyalty-rewards, the following URL accesses that page:

<urlToTheStorefront>/PDPage-Show?cid=loyalty-rewards

To add a link to your page from the storefront's global header or footer, add the URL to the ISML file for the header or footer. For example:

<a href=$url('PDPage-Show','cid','loyalty-rewards')"title="Loyalty Program">Loyalty Program</a>

You could also add a link to the page from the storefront main navigation using the Business Manager to set up a new category. Configure the alternative URL for the category as follows:

$url('PDPage-Show','cid','loyalty-rewards')$