Areas are defined by adding
div tags to the template. Site Management Tools use the area
div tag to know where the areas are located on each page and also to determine the scope of any content placed within that area. The scope of an area determines on which website pages any assigned content displays. When you add content to a page, each area is labeled with its scope so you know how and when the content is displayed. The three scope types are:
div tag has the two following attributes that name the area and set its scope:
data-cms-area — The value of the
data-cms-area attribute is a user-defined name given to the area. For an area you want to add to the main part of the page, you might set the value of the
data-cms-area attribute to
main-footer. For an area that you want to place in a sidebar, you might set the value of the
sidebar-left, and so on. Remember, this is a user-defined value that names the area, so use the naming convention that works best for you. For example, name the area by its intended purpose or page location.
data-cms-area name is used only to define the area in template files. The name is not displayed on the website.
data-cms-area-filters — This attribute determines the scope of an area, meaning on which pages content in that area displays. Scope types are defined as follows:
The All Pages area displays content on any page, provided the page has an area with the same
The Page Type area displays content on any page of the designated type, for example, product list or product detail.
The This Page area is the most specific area with regard to when content displays. Content displays only on the page specified by the path in the page URL. This is the type of area to use if you want to display content for a specific product, facet, or home page.
Each page template can include multiple areas. For example, you may want to put one or more This Page areas and a All Pages area on your home page. You may want to include the same All Pages area on the Item Detail and Facet Browse pages. You may also want to include one or more This Page and Page Type areas on the Facet Browse and Item Detail pages. Here you see an example of a page with multiple areas.
Areas are displayed visually, as illustrated here, in edit mode when you add content to the page. The label for each area indicates the scope of that area.
All Pages Areas
You create an area with All Pages scope by setting the
data-cms-area-filters attribute in the area
global. All Pages areas display on any page on the site that contains a
global area with the same
data-cms-area name. For example, if you define an area with a
data-cms-area equal to
main in the,
item_details.tpl template file, any content you place in that area is displayed on the following pages:
The Home Page
All Facet Browse Pages
All Item Detail Pages
The content is displayed on those pages because each of the pages contains a global area named main. The following code sample illustrates this area:
<div data-cms-area="main" data-cms-area-filters="global">
By adding this area
div to one or more templates, you create a new All Pages area on the template. In the following screen shot, you see two All Pages areas.
These two area
divs are defined as follows:
<div data-cms-area="header_banner" data-cms-area-filters="global"></div>
<div data-cms-area="global_banner_footer" data-cms-area-filters="global"></div>
In this example, the
divs are added to the header and footer template files. By including them in those templates, the areas are available on all shopping pages without having to add them to each template file.
Page Type Areas
Areas with page type scope are identified by the type of page, for example Product Detail Pages or Facet Browse Pages. You create an area with page type scope by setting the value of the
data-cms-area-filters attribute to
page_type. The page type can be the home page, product detail page, or facet browse page. For example, you may want an area at the bottom of a product detail page that you can use for displaying text, merchandising zones, banners, etc. To do this, you modify the product details template file to add an area. Set the value of
item_info_bottom, and set the value of
div code for this area is as follows:
<div data-cms-area="item_info_bottom" data-cms-area-filters="page_type">
By adding this area
div to the product detail page template, the area will be available on every product detail page. Content placed in the area displays for every product. The area on the page appears similar to this:
Notice that in this example, the area is labeled with the type of page: Product Detail Pages. This lets you know that any content you add to that area displays on every product detail page.
This Page Areas
You create This Page areas by setting the value of the
path. The This Page area is the most specific of the three areas because the condition for its display is specific to the path of the page. The path is the URL, excluding host and query string parameters. For example, you modify the product detail template and include an area with the
data-cms-area equal to
data-cms-area-filters equal to
When you add content to the area it is tied to the path. For example, the URL to Reebok Pants is
http://website.name.com/pantsreebok. The path to this product is /pantsreebok. Even though the page is a product detail page, when you add content to that area it displays only when a visitor goes to /pantsreebok. The content does not display for any other product. The
div segment for this area can be defined as follows:
<div data-cms-area="item_info" data-cms-area-filters="path">
A more sophisticated use of a This Page area is to apply it to a facet search page. This makes it possible to display content specific to the facet the visitor is viewing. For example, the path to a facet search of black items is /color/black. When you place content in a This Page area, the content displays only when a visitor views items with a facet filter of black.
To take this example a step further, the path to a facet filter of black pants is /category/pants/color/black. When you place content in a This Page area, the content displays only when a visitor views the pants page with a facet filter of black.
Facet Order in URLs
When URLs for a search page that includes facet filters are constructed, the facets in the URL are always listed in the same order, regardless of the sequence in which the visitor selects the facets. For example if one visitor filters first on pants and then on black and another visitor filters first on black and then on pants, the URL for both visitors is identical. This means that the path for black pants is always /cateogry/pants/color/black regardless of the order the visitor applies the facet filters.