Page Zones are areas of a page that you can put
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 - 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:
Depending on where the zone is going, you may need certain style attributes such as
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:
Here's an example:
var $itemBelow = _extra.$("#itemBelow"); var originalMargin = parseInt($itemBelow.css("margin-top")); $itemBelow.css("margin-top", originalMargin+100);
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:
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.