Area and Scope

Areas are defined by adding div tags to the template. Site Management Tools (SMT) uses 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:

• All Pages Areas

• Page Type Areas

• This Page Areas

Each 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, main-header, or main-footer. For an area that you want to place in a sidebar, you might set the value of the data-cms-area to sidebar, sidebar-right, or 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.

  Note:

  The 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:

  Area Scope	data-cms-area-filters	Description
  All Pages	global	The All Pages area displays content on any page, provided the page has an area with the same data-cms-area.
  Page Type	page_type	The Page Type area displays content on any page of the designated type, for example, product list or product detail.
  This Page	path	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 place 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. Pages can have multiple areas.

Note:

Areas are displayed visually 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 div to 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, home.tpl, facets_facet_browse.tpl, and 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"></div> 

        

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 data-cms-area to item_info_bottom, and set the value of data-cms-area-filters to page_type. The div code for this area is as follows:

          <div data-cms-area="item_info_bottom" data-cms-area-filters="page_type"></div> 

        

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 data-cms-area-filters to 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 item_info and data-cms-area-filters equal to path.

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.

Related Topics

Site Management Tools Templates and Areas

Templates and Areas

General Notices