Page Zones

Page Zones

Page Zones are areas of a page that you can put Components into.

Page Zones are defined via the Page Layouts screen. They are injected into a web page using jQuery selectors.

Here's an example of two page zones on our home page:

Page Zones belong to a Page Zone Group.

A Page Zone group may apply to one page, or could be shared across many pages.

For example you could have a group of page zones that apply to a page header. Those would need to apply to all pages.

Or you may have some page zones that apply to a "product" page. Those zones should only apply to specific types of page.

Defining a Page Zone Group

Page Zones must belong to a Page Zone Group. You will need to create a page zone group if one does not exist.

When creating a Page Zone Group, you must define a "selection expression". This is a boolean statement that determines if a Page Zone Group applies for a particular page. We recommend that your expression evaluates a page path, or looks for certain dom elements in a page.

Here's an example for a "search" page:

_extra.$("body").data("pagetype") === "search"

Here's an example for a home page:

window['location']['pathname'] === '/en/home'

Creating a page zone

When you add a Page Zone to a group, you have to tell it where on the page it needs to go.

This is done using a CSS selector. You select another element on the page and tell the Page Zone to append it's self before, after, or inside that other element.

When putting content inside an element, there are two options, Inside and Inside - Replace.

Inside just appends the page zone to the selected element. Inside - Replace replaces the selected element with the page zone.

Page Zone Markup

You have to define the markup for your container as a div.

This is the bare minimum markup that you need:

<div id="PAGEZONEID">test</div>

Depending on where the zone is going, you may need certain style attributes such as heightwidthpositionmargin or padding.

The id attribute PAGEZONEID must not be changed. It is a reserved word that gets replaced with a GUID when the pagezone is rendered.

The actual id will look like this:


You can setup javascript to be run prior to the rendering of the page zone. This may be useful if you are creating a page zone that uses absolute positioning. You can use this javascript to move other elements around, to make room for the new page zone.

Here's an example:

var $itemBelow = _extra.$("#itemBelow");
var originalMargin = parseInt($itemBelow.css("margin-top"));
$itemBelow.css("margin-top", originalMargin+100);

Tear down javascript can be used to call more javascript if the page zone is ever removed. This could be also be useful if your page zone uses absolute positioning. You may want to put elements back to their original positions if the page zone is ever removed from the page.

var $itemBelow = _extra.$("#itemBelow");
var currentMargin = parseInt($itemBelow.css("margin-top"));
$itemBelow.css("margin-top", currentMargin-100);

Previewing Page Zones

You can view how your page zones render on your page by appending i_pageZones to the url as a query string:

Module priorities

If multiple modules exist in a page zone then you will see them listed along with a priority value.

You can choose which module should have the highest priority. The larger the number, the higher the priority.

Still need help? Contact Us Contact Us