Table of Contents

System features

This chapter contains information about structure, functions and features of the Bitrix Site Manager. This information helps to understand general logic of the product functioning as well as the basic principles of the system integration in a web site.

The product structure

The Bitrix Site Manager consists of two sections. These sections differ by their functions and management tools sets:

Click to enlarge Administrative section: this section contains tools for system general parameters management, site and content management, and other operations.
Click to enlarge Public section: this section is intended for displaying all public pages and materials to site visitors.

The Bitrix Site Manager has module structure. Each module is "responsible" for the management of definite data and implementing exact set of operations. The number of modules available for exact copy of product is defined by using license. More detailed information about the system modules is available in product documentation.

The Bitrix Site Manager framework is designed to separate the visual aspect from the software kernel of a site. This feature allows:

  • to avoid unexpected kernel modification during work with the system files;
  • to exclude the possibility of public file modification during the product update.

The software kernel is located in the folder /bitrix/ relative to the site root. Subdirectories of this folder contain the following files:

/activities/actions of business processes;
/admin/administrative interface. Provides forms for managing the system modules;
/cache/cache files created while caching the dynamic information;
/components/components included in the product package;
/gadgets/all gadgets;
/images/images for the system modules;
/modules/class libraries of the system modules;
/php_interface/auxiliary system files (database connection preferences, other information);
  • /include/ - subdirectory containing module helper user-editable scripts;
  • dbconn.php - database connection parameters;
  • init.php - portal-wide additional parameters;
  • after_connect.php - included right after the database connection is established;
  • dbconn_error.php - included when a database connection error occurs;
  • dbquery_error.php - included when a SQL query execution error occurs;
  • /site ID/init.php - additional parameters for the site; the file is included right after a special constant SITE_ID is defined.
templates/site design templates; components used by the templates. Basically, the integration process affects files in this directory only; contains the following subdirectories:
  • /.default/ - subdirectory with common files used by default templates; has the structure similar to the site template directory described below;
  • /site template ID/ -subdirectory with site template; contains the following subdirectories and files:
    • init.php - portal-wide additional parameters;
    • /module ID/ - directory containing components of a specific module;
    • /lang/ - language files used by this template and components;
    • /images/ - directory containing images used by this template;
    • /page_templates/ - directory containing page templates and their description (stored in file .content.php);
    • /header.php - prologue of this template;
    • footer.php - epilogue of this template;
    • styles.css - CSS used by this template;
    • .menu type.menu_template.php - template used to display a menu of the corresponding type;
/tools/here the installation procedure copies additional files that may be used with any pages of the site: help, calendar, image slideshow etc.;
/updates/used for the updates downloads;
header.phpa standard file which in its turn includes the current site template prologue; this file must be used with all pages of the public section;
footer.phpa standard file including the current site template epilogue; this file must be used with all pages of the public section;
license_key.phpthis file contains the license key;
spread.phpthis file is used by the Kernel module to spread user cookies among additional site domains;
redirect.phpused by the Web Analytics module to register link redirect events;
stop_redirect.phpused by the Web Analytics module to display a message to a visitor currently in the stop-list;
activity_limit.phpused by the Web Analytics module to emit a message to the robot if it exceeds the activity quota;

Sites and templates

The Bitrix Site Manager supports the multiple sites concept, which allows creating several sites using a single copy of the product. Each site has its own domain name, design, interface language and content.

Note! Following the license agreement by default within one copy of product can be created only two web-sites. To create more then two sites within on copy of product (three or more sites) it is necessary to purchase Additional site licenses.

The design of a site is the subject of a design template. Each site can be assigned an unlimited number of templates. The use of templates opens up vast possibilities in the site design customization depending on your needs and various conditions.

The software provides means for flexible design customization for different sites and site sections. For example, it allows using special holiday design for the specified period of time, assign certain design templates to different site visitor groups or depending on a parameter in the site URL etc.

Condissions of assigning templates to site pages are set for each site individually on the "Edit site" page:

Settings -> System settings -> Websites -> Websites.

This form allows to define a set of conditions that will regulate the site design selection, in the site settings.

In case for one of templates there is chosen no condition, this template will be used as the default site template.

Visual components

The Bitrix Site Manager allows managing sites using the intuitive visual user interface. This possibility is realized due to using visual components on site pages and in design templates.

Visual component is logically completed source code, implementing operations with data of exact modules. Virtually any script can be shaped as a component.

Visual components can be used for such purposes as:

  • creating frequently used areas in site template or on site pages (e.g. search form, authorization or subscription form);
  • publishing frequently renewal information (e.g. news list, field with random photo);
  • implementing any other operations.

 

Utilization of visual components allows eliminate users, who do not have special knowledge in web-programming, from need to work directly with source code. A distinctive feature of components is the ability not only to be controlled on the source code level, but also through the use of parameters that define the component behavior.

To add component to pages and adjust its properties use the visual editor. All components are grouped according to modules they belong to. Dropdown list, located on the Component panel, allows to choose a proper module:

All components are displayed as pictures. To insert a component into a page, simply select it in the list and drag and drop it to the desired position within the page.

After you have added a component, you can customize its parameters. To do so, select an existing component in the page. As the result the list of available component parameters will appear in the bottom of the screen:

Besides that a component parameters can be adjusted in page source code editing mode. To switch to this mode use the button , located on the left panel of the visual editor.

Using visual component parameters you can easily adjust it on implementing necessary operations.

Also any arbitrary PHP code can be added to page in the similar manner. In this case, it could be modified in the text editor in the bottom of the screen:

Click to enlarge

Note: Any arbitrary php code, placed on a page, in the visual editor mode will be displayed as the picture .

The Bitrix Site Manager allows to use on pages almost any php code without damage to visual editing mode.

Each visual component can be customized according to site requirements. For example, you can adjust form and size for buttons used in a component, change font, background color or even component work logic.

      

Site administrators are allowed to create their own components.

Site structure management

This section contains information about structure of web-projects functioning on the Bitrix Site Manager base. Also it include description of tools utilized for site sections, pages and their properties management.

Site structure

Web-site is a group of sections, web-pages and other files. According to the system concept, initially site section is a folder that contains files, belonging to the corresponding site section.

Click to enlarge  Click to enlarge

Every folder can have its own properties, allowing:

  • to manage information section information showing;
  • to manage section pages properties (including keywords and descriptions);
  • to manage other section page properties and etc.

Site sections and pages management is implementing in administrative section with the help of File Manager (module "Site Explorer")

Content -> Site Explorer.

File Manager allows:

  • to create, copy, edit and remove site folders and pages;
  • to upload files from local computer;
  • to manage user permissions to access site sections and pages;
  • to manage section (folder) and page properties;
  • to manage site menu.

To proceed to folder or page creation or editing from the public section use the administrative panel (the panel is shown only for authorized users having permissions to manage site elements):

- creates a new page in the current site section;
- creates a new folder in the current site section;
- edits a current page.
- opens a form for editing the current section properties;

The site pages can contain information of both static and dynamic nature:

  • The static is information that remains constant in time. Examples of static information are advertising text, company history, contact information etc. Static information is usually created, edited or deleted manually by users who have enough permissions to perform such operations.

    Click to enlarge  Click to enlarge
  • The dynamic information can be changed or developed with time by using the special system facilities. Examples of dynamic information are the selection of the latest news, product catalogue, photo gallery, random photo of the day etc.

    Click to enlarge  Click to enlarge

Being a well-know user interface concept, menus deliver a great effortlessness of the site navigation experience to visitors. With the Bitrix Site Manager, you can easily create menus for your site and manage them.

A common page contains the following menus:

  • main menu (usually at the top), used to guide visitors through the site sections:

  • complementary menu (usually at the left or right), used to navigate through pages and subsections of a site section:

Link on a page can be added to menu during editing this page in the visual editor mode.

During a new section creation link on it can be added to menu of the parent section.

The same operations can be implemented in menu editing form.

Properties of pages and folders

The Bitrix Site Manager allows to assign properties to pages and sections. This enables to flexibly manage the information show.

By setting properties to the site pages, you can:

  • assign the metadata values for different pages;
  • change the visual aspect of the site design on the fly depending on the active section or page;
  • manage advertising show;
  • and so on.

Folders and pages properties creating

To create a new page property open the Site Explorer module settings page:

Settings -> System settings -> Module settings -> Site Explorer.

Then find the group of fields Property types (Website Parameters section):

In this form, you will find properties types in the form of text strings (title, keywords_inner etc.) and names (short descriptions) of these types.

The product has several reserved types of properties used by some system functions. Reserved properties include:

  • title – used to set the additional page title;
  • adv_desired_target_keywords – used to set the desirable keywords for the advertisement shows;
  • not_show_nav_chain – used to disable the navigational chain (breadcrumb navigation) for page or section.

Property types intended for managing and using properties values in source code. It is strongly recommended to not modify types of reserved properties. They could already be used in the product code.

Propery names are intended for properties values management through the system visual interface. You can edit the property names, if you want.

Properties values can be assign through the system visual interface as well as in the source code.

You can create your own page property types by using the empty form fields. For example, you can create a keyword property (the HTML equivalent keywords), a page description property (description), an author property (author). Only the Roman letters are allowed in the property names.

A set of properties can be assigned individually for one site or for all sites simultaneously.

Note! Properties "keywords" and "description" are used as the page metadata. Therefore, their names must be the same as the HTML meta tag attribute values (KEYWORDS and DESCRIPTION).

Page property values management

You can change page property values in the special form when editing a page in the visual HTML editor or in the plain text editor in Administrative section.

  • Text editor mode:

  • Visual HTML editor mode:

From the public section using the Page title and properties button, located on the administrative panel. This button opens editing form for current (opened at this moment) page.

Also page property values can be assigned during the page source code editing. To assign a property values use SetPageProperty() function:

< ?
…
$APPLICATION->SetPageProperty("keywords", "Site, web, site management, management system"); 
$APPLICATION->SetPageProperty("description", "Bitrix Site Manager – is a powerful Content Management Solution that enables users to effectively manage corporate web sites"); 
$APPLICATION->SetPageProperty("NOT_SHOW_NAV_CHAIN", "Y"); 
…
?>

For each page can be assigned additional set of properties. To do so:

  • use empty form fields while editing page in text or HTML visual editor mode;

  • use the SetPageProperty() function while editing the page source code.

Additional page properties will be available only for current page.

Folder property values management

The section properties provide a flexible means to control information and its presentation as well as manage the page metadata. By changing values of the section properties, you propagate the metadata values to all pages of a section, control the navigation chain display, show the desired image on all pages of a section etc.

Section properties management are available for management in the corresponding folder editing form. This form can be accessed the following ways:

  • from the administrative section using the Folder properties button located on the File manager content panel.

    Content -> Site Explorer 

     

    This button opens editing form for current (opened at this moment) folder.

  • from the public section using the Section Properties button, located on the administrative panel. 

     

    This button opens editing form for current (opened at this moment) section folder.

Values assigned to the folder properties will be used for all pages of the corresponding section by default (if this documents do not have their own values for these properties).

For every folder (section) can be assigned an additional set of properties. To do so use the empty fields in the folder properties editing form.

Section property values also can be in assigned in the .section.php file:
< ?
…
$APPLICATION->SetDirProperty("copyright", "Bitrix, Inc");
…
?>

Templates management

This section contains information about site templates developing technology, structure and usage. Also this section describes the possibility of utilizing templates for work and editable page areas.

Site templates

The site template is a group of PHP and CSS files (<file_name>.css). Templates are used for public section layout. Site template defines:

  • site design (layout, using sets of CSS and etc.);
  • menu types;
  • advertising areas;
  • include and editable areas;
  • occurrence of authorization or subscription forms in site design, etc.

All templates are stored in directory /bitrix/templates/. Files that comprise the template are stored in subdirectory named by the template identifier (for example, /bitrix/templates/demo/ or /bitrix/templates/template1/).

A common site design usually includes three main parts:

  • (1) Topmost section (header);
  • (2) Main section that is used to display the site presentation and information content, components or the code;
  • (3) Bottom section (footer).

Each part of template is stored in separate files:

  • the topmost section is stored in /template_name/header.php;
  • Bottom section is stored in /template_name/footer.php;
  • Main section is stored in files file_name.php in folder of corresponding site section.

Assembling of typical page is implemented by uniting header and footer parts of the site design with work (main) area. In the general case a site page has the following structure:

<?
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");
$APPLICATION->SetTitle("Bitrix Site Manager");
?>

Main part

<?
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");
?>

Site template management

Templates for the Bitrix Site Manager can be loaded in the system in <template_name>.tar.gz. format. Also the site template can be added by copying the template folder to the system.

The system templates management is implemented in the administrative section:

Settings -> System settings -> Sites -> Site templates.

There you can view, edit and upload the existing templates and also add new templates.

The possibility to view templates layout directly in the template list is realized by means of template capture using. The template capture should be located in the corresponding template folder with the screen.gif name (for example, /bitrix/templates/demo/screen.gif).

Template editing

To view or modify a template code use the Edit item in the template context menu.

The field Site template design contains the template code.

Click to enlarge

Note: the template contains a special separator #WORK_AREA# used to delimit the header and the footer sections.

This field displays a template as the joined header and footer parts of the site design in the PHP/HTML format. The code can contain component calls and different functions written in the PHP language that provide displaying of different information: metadata, page header, CSS, administrative toolbar etc. You can add and edit components and functions using the visual editor tools.

Template export

The special system interface features allow to export templates used in the system in the <file_name>.tar.gz format.

 

Template import

The Load template button allows to load templates in the system using the special system interface. To be available for import via system interface the templates must be saved in <template_name>.tar.gz format.

When the template is loaded it will be automatically unpacked and stored in the following directory: /bitrix/templates/<template_name>/.

Template creation

A new site template can be created directly in the system with use of the New template form. To go to this form use the Add template button located on the page context panel.

Creating the template via the system interface you can:

  • assign template ID (must be unique);
  • assign template name;
  • input template description for showing in template list;
  • input template source code;
  • assign used in template CSS;
  • define set of used in template pictures and include areas.

The new template is stored in the /bitrix/templates/<template_ID> directory (this directory is created automatically).

It is recommended to store all graphic files used in the template in the /bitrix/templates/<template_ID>/images/ directory.

Site template developing

The site template developing process consists of two basis stages:

  • the template prototype developing;
  • the full-functional template creation.

The template prototype developing

The prototype is a site template in HTML format. During the page makeup there are defined all functional areas in future site template. For example:

Click to enlarge

  • page title;
  • menu;
  • navigation chain;
  • authorization form;
  • subscription form;
  • advertising areas;
  • etc.

The full-functional template creation

On this stage all HTML design elements are replaced with functional elements (such as programming code or components call).

Click to enlarge

Page templates developing

The Bitrix Site Manager allows creating and utilizing templates for work (main) and include page areas. Templates utilizing makes work with page having a complex structure (layout) easier and faster.

All page and include area templates are stored in the /page_templates/ directory located in the corresponding template folder or in the folder .default (if these page templates are used for all site templates).

Creating a new page in HTML editor mode you can just choose necessary page template in the list and than add page content.

List of available page templates is created with use of .content.php file. This file is also stored in the /page_templates/ directory in the corresponding site template folder. This file contains associative array of page templates and their names intended for displaying in the list.

<?
if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
$TEMPLATE["standard.php"] = Array("name"=>"Standard page (Default template)", "sort"=>1);
$TEMPLATE["page_inc.php"] = Array("name"=>"Include area for page", "sort"=>2);
$TEMPLATE["sect_inc.php"] = Array("name"=>"Include area for section", "sort"=>3);
?>

Using message files

The Bitrix Site Manager allows to use one site template for several sites on different languages. This possibility is realized by means of message files usage:

  • in the template HTML prototype are defined areas intended for text displaying (for example, titles, ALT attributes, controls text etc.);
  • then in these areas should be placed special source code that calls language files containing necessary text messages on corresponding language.

More detailed information on language files usage is given in the Message files section.

Managing site parameters via template header

Document title management

This section contains information on how to manage page and web-browser titles using the special system tools.

Title usage

The page title helps to attract site visitors’ attention to the necessary document and to give the general idea of information placed on the page.

Beside that it is recommended to use additional web-browser titles to let users easily navigate thought the web-browser windows.

Page titles are used by search engines for displaying links on the documents in search result lists.

The Bitrix Site Manager allows to implement the following operation with the document titles:

  • Set the same title for page and web-browser window;

  • Set different titles for page and web-browser window;

  • Set page and web-browser window titles dynamically using, for example, the following parameters:

    • the current catalog section title;

    • the current catalog article name or the current news title;

    • etc.

Managing via the system interface

The page or web-browser title can be modified the following ways:

  • durin the page creating or edditing in the visual HTML editor mode:
    • the document title is assigned in the Page title field:

      Click to enlarge
    • the page property Additional title of page (for browser window) is used for defining web-browser window title:

      Click to enlarge

    Preliminapy the "Additional title of page (for browser window)" property (the property with the "title" code)must be created. This property is included in product supply and is utilize for syte pages by defaulte. More detailed information on page property management is available in the "Page and section properties".

    Assigned properties values are saved automatically in the page code.

  • during editing page "as text":

    Click to enlarge
  • during editing page "as PHP":

    Click to enlarge
Using the folder properties you can assign Additional title of page (for browser window) that will be used for all stored in this folder pages by defaulte.

Click to enlarge  Click to enlarge

Managing title via the source code

Page title management

The page title can be assigned the following ways:

  • during the page editing in the embedded system editor by adding the following function in the page source code:

    <?
    $APPLICATION-> SetTitle("About us;);
    ?>
  • the page title can be assigned dynamically by one of the placed on the page components:

    <?
    $arIBlock = GetIBlock($ID, "news")
    $APPLICATION->SetTitle($arIBlock["NAME"]);
    …
    ?>

The document title displaying is implemented with use of the ShowTitle() function placed in the area intended for the page title showing:

<H1><?$APPLICATION->ShowTitle()?></H1>

If the ShowTitle() function is used with the false parameter, it means that the title property value will not be used for page title assigning.

<H1><?$APPLICATION->ShowTitle(false)?></H1>

In other words, in this case as the page title will be used a value assigned by the SetTitle() function.

Section title management

The document title displaying is implemented by the ShowTitle() function placed in the site template header:

<head><title><?$APPLICATION->ShowTitle()?></title></head>

The web-browser window title can be assigned using the different mechanisms. By default as the web-browser window title is used a value set for the page property title. If for this property were not set any value, the web-browser window title will be equivalent to the page title.

CSS management

This section information gives the general idea of purposes and ways of utilizing Cascading style sheet (CSS) on the web-site.

Using the CSS

Generally CSS is a group of rules defining layout of some page elements. The CSS technology allows to store all information about page layout, utilized fonts and colors, menu layout stiles and etc. in one or several exact files.

Using the CSS simplifies the page designing. More over, if you change a site design you do not need to modify each site page. It may be enough to make necessary modifications in corresponding CSS files.

For example, using the CSS you can modify a forum layout (in this example forum CSS files are stored separately from the site template CSS).


.forumborder {background-color:#B8B8B8;}
.forumhead {background-color:#DDDDDD;}
.forumbody {background-color:#F5F5F5;}
.forumbodytext {
	font-family: Tahoma, Arial, Verdana, sans-serif;
	font-size: 80%;
	color:#000000;
}
.forumheadtext {
	font-family: Tahoma, Arial, Verdana, sans-serif;
	font-size: 80%;
	color:#011B46;
…

.forumborder {background-color:#96C0FA;}
.forumhead {background-color:#A9CAF7;}
.forumbody {background-color:#D7E6FB;}
.forumbodytext {
	font-family: Tahoma, Arial, Verdana, sans-serif;
	font-size: 80%;
	color:#042A69;
}
.forumheadtext {
	font-family: Tahoma, Arial, Verdana, sans-serif;
	font-size: 80%;
	color:#011B46;
…

Stylesheets are uniquely customized for each site template in the system; each stylesheet set is stored in the folder of the corresponding template, as well as other files comprising the interface of the template. Stylesheets used in site templates are stored in the styles.css files. Additional stylesheets used for exact site elements (for example, for forum layout) a stored in files with such names as forum.css.

Note: The Bitrix Site Manager includes a mechanism allowin to store CSS file separatly:
  • site template CSS can be stored in the template_styles.css file;
  • CSS used for site content can be stored in the styles.css files.
This mechanism allows to avoid overloading of stiles list that is available in WYSIWYG editor mode.

Stylesheets customization is implemented in the Edit template form:

Settings -> System settings -> Sites -> Site templates.

Work with CSS in HTML visual editor mode

It is recommended to add comments when building a stylesheet. You should add comments to the styles that you plan to utilize for visual editing of the pages in the WYSIWYG editor. Styles comments are attired in the .styles.php file in the corresponding template directory.

<?
$arStyles = Array(
	"text" => "Normal", 
	"smalltext" => "Small",	
	"smalltextwhite" => "Small grey",	
	"smalltextblack" => "Small black",	
	"newstext" => "News text",		
	"newsdata" => "News date",
	"titletext" => "Title",
	"subtitletext" => "Subtitle",
	"copy" => "Copyrights text",						
	"tableborder" => "Table border",
	"tablehead" => "Table heading",
	"tablebody" => "Main table text",
	"tablebodylink" => "Hyperlinks in table text",						
	"tableborders" => "Inc. area borders",	
	);
return $arStyles;
?>

Styles with the comments will be available in WYSIWYG editor in the styles drop-down list with the names specified in comments.

Click to enlarge

If the option "Allow using styles without names in visual HTML editor", located on the Site Explorer settings page, is enabled,

then in the styles drop-down list will be available all styles, including styles without comments.

Click to enlarge

Styles without comments will be available in the list with their names: leftmenu, tablebodytext, etc.

Also the stylesheets can contain styles for exact page elements (for example, table borders and cells, images, and etc.). To display styles available for these elements choose the necessary element on the page.

then in the styles drop-down list will be available all styles, including styles without comments.

Click to enlarge

CSS examples

Left menu styles:

.leftmenu, .leftmenuact {font-family: Arial, Helvetica, sans-serif;
 font-size:12px; font-weight: bold; text-decoration: none;}
.leftmenu {color: #3F3F3F;}
.leftmenuact  {color:#FF5235;}

Top menu styles:

.topmenu  {font-family: Arial, Helvetica, sans-serif; font-size:12px;
 font-weight: bold; color: #FFFFFF; text-decoration: none;}
.topmenuact  {font-family: Arial, Helvetica, sans-serif; font-size:12px; 
 font-weight: bold; color: #FAC535; text-decoration: none;}

Table styles:

.tableborder  {background-color:#9C9A9C;}
.tablehead  {background-color:#D8D9DA;}
.tablebody  {background-color:#F8F8F8;}
.tablebodytext, .tableheadtext {font-family: Arial, Helvetica, sans-serif;
 font-size:12px;}
.tablebodytext {color:#000000;}
.tableheadtext {color:#000066;}

Mechanism of realization

CSS tables should be linked within the <head> tag of a header (header.php) in the following way

<?
$APPLICATION->ShowCSS(); 
?>

All the required HTML code will be inserted by the API function specified above. This function includes a CSS file from the current template. Also it includes all additional styles defined for the page by calling the function SetAdditionalCSS() internally.

<?	
$APPLICATION->SetAdditionalCSS("/bitrix/templates/demo/additional.css");
?>

If called without arguments, the ShowCSS() method includes styles by adding the following code:

<LINK href="/bitrix/templates/demo/styles.css" type="text/css" rel="STYLESHEET">

All styles added by calling SetAdditionalCSS() will be included in the page code as follows: require(…).

If called with the false argument,

<?
$APPLICATION->ShowCSS(false);
?>

then the CSS file of the current template is also included by calling require().

Metadata managment

This chapter contains description of approaches to the site pages and sections metadata management with use of the Bitrix Site Manager tools.

Metadata

The main purpose of the metadata usage is the site optimizing for the search engines. Search engines use metadata for the site documents indexation.

An example of metadata control is the mechanism of assigning keywords and descriptions to pages and sections of a site. By default, the Bitrix Site Manager distributive has these two types of metadata configured. You can extend the list of the available metadata types by implementing the same algorithm.

To manage the metadata values via the system visual interface preliminarily it is necessary to create corresponding page properties (properties can be created on the Site Explorer settings page):

Setting -> System settings -> Module settins -> Site Explorer.

Note! Properties "keywords" and "description" are used as the page metadata. Therefore, their names must be the same as the HTML meta tag attribute values (KEYWORDS and DESCRIPTION).

A set of properties can be assigned individually for one site or for all sites simultaneously.

More detailed information about properties management is available in the "Properties of pages and folders" section.

Managing metadata via the system interface

Page metadata managing

Page metadata values can be assigned during the page editing in the WYSIWYG editor

Click to enlarge

or editing page in the text mode ("Edit as text").

Click to enlarge

Site section metadata management

Site section metadata values can be assigned in the properties managing form of the corresponding folder.

Click to enlarge

Note! Values assigned to the folder properties will be used for all pages of the corresponding section by default (if this documents do not have their own values for these properties).

Managing metadata via the source code

To assign the page metadata values use the SetPageProperty() function:

<?
$APPLICATION->SetPageProperty("keywords", "Mobile phones, accessories, Alcatel, Siemens, Motorolla");
$APPLICATION->SetPageProperty("description", "Mobile Store");
?>

The metadata values calls are implemented by the ShowMeta() function:

< head >
…
< ?$APPLICATION->ShowMeta("keywords")?>
< ?$APPLICATION->ShowMeta("description")?>
…
</head>

These function calls generate the following HTML code:

<meta name="keywords" content="Mobile phones, accessories, Alcatel, Siemens, Motorolla">
<meta name="description" content="Mobile Store">

If the metadata values are not assigned for the current page, then as the page metadata values will be used values assigned for the parent directory. If the parent directory metadata values are not assigned then the page metadata will be undefined.

Page properties can be set from the script dynamically. For example: properties of pages that are used to display the catalog contents or the news (i.e. information blocks), can be set with respect to values of an information block elements. Thus, you can create properties keywords and description for each element of an information block and apply them to a page dynamically.

 $APPLICATION->SetPageProperty("description",$arIBlockElement["PROPERTIES"][$META_DESCRIPTION]["VALUE"]);

In this example the page property description value is taken from the information block property meta_description.

Page Encoding

This section contains information on how to manage page encoding to provide information correct displaying.

Page encoding

The Bitrix Site Manager distinctive feature is the multi-lingual interface support. The system allows:

  • using multi-lingual interface in the administrative section;

    Click to enlarge   Click to enlarge  Click to enlarge
  • creating any number of sites on different languages.

    Click to enlarge Click to enlarge
Note: The number of languages available for using in administrative section do not depend on the sites number.

Browsers use encoding for correct text displaying. Below you can see the encodings used for displaying symbols of Russian, English and German languages.

LanguageEncoding
Russian (ru)windows-1251, koi8-r, iso-8859-5
English (en)windows-1252, iso-8859-1, latin1
German (de)windows-1252, iso-8859-1, latin1

The full list of encodings is available in the product documentation.

Some languages cannot be rendered using only one single-byte charset, e.g. Greek and French. That is why it is necessary to define encoding that will be used for displaying symbols of this or that language.

Encoding for public and administrative sections are adjusted separately:

  • Encoding used in the public section is assigned for each site in the "Site edit" form:

    Settings -> System settings -> Sites -> List of sites.

    Encoding is assigned with respect to language that will be used for site content representation.

    Click to enlarge   Click to enlarge
       
    Click to enlarge  Click to enlarge


    Also the "Edit site" form allows to adjust parameters for time and date show in the public section of each site.

  • Encoding of administrative section is adjusted for every language intended for usage in the administrative section.

    Settings -> Interface languages.

      Click to enlarge  Click to enlarge

      Also the "Edit language" form allows to define parameters of date and time displaying in the administrative section for each language.

    Defining the current encoding

    The page encoding is defined with use of the LANG_CHARSET constant, located in the site template header.

    When template is applied the site, the system requests encoding defined in the site settings. The LANG_CHARSET constant is binded a value of the site encoding.

    Below you can see the example of code used for defining the current site encoding:

    <head>
    …
    <meta http-equiv="Content-Type" content="text/html; charset=<?echo LANG_CHARSET?>">
    …
    <head> 

    Using message files for localization

    This section contains description of the message files utilizing mechanism with use of which the multi-lingual system interface is realized.

    Using message files

    The Bitrix Site Manager allows using the same template for several sites on different languages. This opportunity is realized by means of the message files mechanism:

    • in the template HTML prototype are defined areas intended for text displaying (for example, titles, ALT attributes, controls text etc.);
    • then in these areas should be placed special source code that calls language files containing necessary text messages on corresponding language.

    The message files mechanism also is used in the administrative section:

     

    Implementation

    • In a site template directory is created the /lang/ folder:

      /bitrix/templates/<>/lang/
    • In the /lang/ folder are placed folders with the utilized languages identifiers: /en/, /de/, /ru/, and etc. For example:

      /bitrix/templates/<>/lang/ru/
    • In the folders with languages identifiers are stored corresponding message files. These files are characterized by the following properties:
      • the message file name is equal to the file name where this message file is called. For example, if a message file is call is implemented in the template header (file header.php) then this message file must have name header.php.
      • message list in the file is stored the following way:

        <?
        $MESS ['COMPANY_NAME'] = "Company Name";
        $MESS ['MAIN_PAGE'] = "Home page";
        $MESS ['PRINT'] = "Print version";
        $MESS ['AUTH_LOGIN'] = "Authorization";
        $MESS ['RATES_HEADER'] = "Currency rates";
        $MESS ['SEARCH'] = "Site search";
        $MESS ['SUBSCR'] = "Subscription";
        ?>
    • At the beginning of file, where the message file call is implemented, the following function is added:

      <?
      IncludeTemplateLangFile(__FILE__);
      ?>
      The IncludeTemplateLangFile(__FILE__) connects a message file for the current language.
    • All text in template is replaced with the function calling the corresponding messages:

      <font class="search"><?echo GetMessage("SEARCH");?></font>
      The code (ID) of calling message is used as the GetMessage() parameter. The function verifies if the connected message file contains necessary message. If the necessary message exists then it is shown to page visitors.

    Localization

    The message files localization can be implemented the following ways:

    • manually (when the site administrator searches and translates necessary message files);
    • with use of the Localization module tools.

    The Localization module provides users with the handy interface for text messages search and translation. The Localization module allows:

    • to look through the message files distribution among the system files;
    • define the number of not translated text messages for every file;
    • proceed to the necessary text messages translation.

    To look through the message files distribution among the system files open the Interface localization page:

    Settings -> Localization

    The number of not translated text messages used in file or directory is displayed with red color. To implement a text message translation choose the file, where the message is used, and input the message translation for necessary language:

    Click to enlarge

    Note: Only messages available for displaying in the same (current) encoding are shown in the form.

    You can quickly start translating the missing messages directly from a page on which these messages are used (both in the public section and Control Panel). To activate the quick translation mode, use the button (it is visible if the corresponding option is checked in the Localization module settings) or add the parameter show_lang_files=Y to the page address:

    As the result at the bottom of the page will be displayed list of message files used on the page.

    The files names are displayed as links allowing to proceed to these files messages translation. Also at the end of the list is shown the field intended for text messages exact fit search.

    For example, let’s try to search the «Site search» phrase used in the search form.

    To do so type the phrase in the search field.

    As the result there will be shown a list of files containing the search phrase.

    Search phrase is displayed as link allowing to proceed to this phrase translation.

    Information: All localized phrases can be collected with use of the special script. Collected files can be placed in the Update system for downloading by other users.

    Site navigation tools

    Menu

    This section contains description of the main principles of creating and managing site menu, including description of file with menu data and menu template structure. Also the possibility of dynamic menu usage is mentioned.

    Menu types

    A common page contains the following menus:

    • main menu (usually at the top), used to guide visitors through the site sections;
    • complementary menu (usually at the left or right), used to navigate through pages and subsections of a site section.

    Sites may have other types of menu, for example, bottom menu.

    Note: The Bitrix Site Manager does not put any restrictions on the site menus. Number and types of menus are defined by the site design template. The design of the public section menus is defined by the menu template which is created when preparing the site design. The system allows using more than one template for a single menu type.

    Types of used on a site menu are defined in the administrative section on the Site Explorer module page.

    A menu type (defined on this page) will be utilized as prefix both for file with the menu template (e.g., top.menu_template.php) and for file with section menu items (e.g., .top.menu.php). Besides the menu type is used calling necessary menu in site template.

    Note: Menu types can be defined for every site individually.

    The menu types are assigned arbitrarily. But to make work with menu more convenient it is recommended to use meaningful designations for menu types. For example, top, left, bottom.

    Menu building

    In general the process of menu creation consists of the following stages:

    • defining HTML elements used in menu template;
    • menu template creating;
    • including function for menu call in site template (in template prolog or epilog);
    • creating menu description file (file with menu items).

    Menu structure

    Any menu of a site is built based on the two components:

    • array of data provided in the administrative section (the product ships with the demo menu);
    • menu design template.

    Array of data defines the menu composition, text and links of all the menu items. A menu template is the PHP code that describes the menu design. Menu template processes the data array and generates the HTML code.

    Array of data

    Files with menu items are located in those sections (directories) where they are to be used for the menu display. This files have the following names: .<menu_type>.menu.php.

    For example, for storing data of menu with type "left" will be used file .left.menu.php, and for data of menu with type "top" will be used file .top.menu.php.

    If a given section does not contain a menu description file, the system will search a section of upper level for such files.

    E.g. usually the main site menu is considered to be displayed in all site sections (in the product demonstrational version it is menu with type "top"). That is why this menu description file is stored only in the site root directory.

    Click to enlarge

    Also usually it is supposed that every site section should have its own complementary menu. For this purpose description file for complementary menu is created in every site section:

    Click to enlarge  Click to enlarge

    The Bitrix Site Manager allows using dynamic menu. The data array for such menu is generated automatically accordingly to data get wit use of the special program script. This scrip must be stored in file with the mane ..menu_ext.php in folder of the corresponding site section.

    Click to enlarge  Click to enlarge

    In this case the "Mobile phones" and "Accessories" information block section names are used as menu item. A program script collecting data for dynamic menu is stored in the file .left.menu_ext.php in folders of the corresponding site sections.

    Click to enlarge

    Menu design template

    Template developing

    The first thing you need to do to customize the template is to choose the repeating parts of a menu.

    For instance, the horizontal menu is comprised of table cells, while the vertical menu consists of rows.

    Menu template creating

    All menu templates share the common structure:

    • menu template header part;
    • description of substitutions for different processing conditions;
    • menu template body;
    • menu template footer part.

    Let us consider how a template can be constructed by the example of left menu:

    <?
    //--- The following variables can be used when creating a menu template:
    //--- $TEXT – menu item text;
    //--- $LINK – link URL of the menu item;
    //--- $ITEM_TYPE – menu item type. Can have the following values:
    //---   "D" – directory, "P" - page, "U" – parametrized page.
    //--- $ITEM_INDEX – menu item index.
    //--- $SELECTED – set to true if the menu item is selected.
    //--- $PERMISSION – access permissions for the current page. 
    //--- Can have the following values: "D" – access denied, "R" – read, 
    //--- "W" – write, "X" – write and permission modification.
    //--- $PARAMS["<parameter>"] – array of parameter values
    //--- set in the extended editing mode.
    
    //------------- Menu Header -------------------------------------
    //--- Upper constant part of the table.
    
    $sMenuProlog="<table width='100%' border='0' cellspacing='0' cellpadding='0' background=''>n";
    
    //--- Description of substitutions for different processing conditions
    //--- Template elements are altered according to the display conditions.
    //--- If any menu item is set to display as the separator,
    //--- a corresponding parameter  value is checked:
    //---     $PARAMS["SEPARATOR"]=="Y". 
    //--- Parameter "SEPARATOR" can be assigned 
    //--- when editing the menu in the extended mode. 
    //--- Other parameters are optional and can be set as desired.
    //--- Please note that a parameter named "SEPARATOR" 
    //--- is also checked when building a site map. 
    //--- Certain alterations are made to template elements 
    //--- according to conditions.
    
    if ($PARAMS["SEPARATOR"]=="Y")
    {
    	$clrbg = " class=’menuborder’";
    	$clrtext = "leftmenub";
    }
    else
    {
    	$clrbg = "";
    	$clrtext = "leftmenu";
    }
    if($SELECTED)
    {
    	$clrtext = "leftmenuact";
    } 
    else
    { 
    	$clrtext = "leftmenu";
    }
    if ($ITEM_TYPE=="D")
    {
    	$clrimg = " <img src=’/images/arrows_r.gif’ width=’11’ height=’9’ border=’0’>";
    }
    else
    {
    	$clrimg = "";
    }
    
    //------------- Menu template body -------------------------------------
    //--- This section describes a single element of the common structure,
    //--- i.e. a single menu item. All menu items are generated in a loop. 
    //--- Template elements that can vary depending on conditions, 
    //--- are represented by variables, e.g. $clrbg, $clrimg, $clrtext.
    //--- The mandatory parameters (menu item text and link)
    //--- are described by the variables $TEXT and $LINK, respectively. 
    //--- Vriable $PARAMS["ALT"] contains the value of the "ALT" attribute 
    //--- specified in the extended editing mode.
    //--- User permissions are checked before generating a menu item.
    if ($PERMISSION>"D")
    {
    $sMenuBody =
      "<tr>n".
      "<td width='0%' ". $clrbg ." nowrap valign="top" ><img src='/images/1.gif' width='2' height='8'><img src='/images/1.gif' width='30' height='15'></td>n".
      "<td width=’100%’ ". $clrbg ."><a href='".$LINK."' class='".$clrtext."' title='".$PARAMS["ALT"]."'>".$TEXT."". $clrimg ."</a></td>n".
      "<td width='0%' ". $clrbg ."><img src='/images/1.gif' width='5' height='1'></td>n".
      "</tr>n";
    }
    else
    {
    $sMenuBody =
      "<tr>n".
      "<td width='0%' ". $clrbg ." nowrap valign="top" ><img src='/images/1.gif' width='2' height='8'><img src=’/images/1.gif' width='30' height='15'></td>n".
      "<td width='100%' ". $clrbg .">".$TEXT."". $clrimg ."</td>n".
      "<td width=’0%’ ". $clrbg ."><img src='/images/1.gif' width='5' height='1'></td>n".
      "</tr>n";
    }
    //------------- Menu template footer -------------------------------------
    //--- Table closing tag. Bottom constant part.
    
    $sMenuEpilog="</table>";
    ?>
    

    The repeating portion of a menu defined on the previous step is placed in the template body.

    Developing a menu template you may need to create additional stylesheets (CSS). For example, for text menu additional CSS can define menu items color, color of the current menu item, and etc.

    Also some menu items (for example, section titles) can be displayed in a special way. More over there can be used graphical or text element for indication active or unavailable menu items, or designation that the menu item refers to subsections or document of the current section.

    Templates for top and left menu, included in the system distributive, are stored in the directory /bitrix/templates/<site_id>/ in files top.menu_template.php and left.menu_template.php correspondingly.

    Menu show

    Resulting menus can be incorporated in the design template by calling the following functions:

    <?
    //--- Upper menu inclusion code 
    echo $APPLICATION->GetMenuHtml("top");
    ?>
    …
    <?
    //--- Left menu inclusion code
    echo $APPLICATION->GetMenuHtml("left");
    ?>

    This function is placed in the template areas assigned for menu show.

    Menu is built in the following way. A common design template calls the function that generates the code responsible for the menu display. When a page is being loaded, this function checks for presence of a menu description file in the given section; calls the template of the corresponding type to build the menu; generates the HTML code of the menu

    Menu managing

    Menu managing is implemented in administrative section. You can proceed to menu creation by on of the following ways:

    • With use of the "Add menu" button located on the context panel of the File Manager:

      This button allows to create menu for a site section which folder is opened in the File Manager at the present moment.

    • With use of the "Create Section Menu" button.

    Note: As the result of this operation there will be created a file with name .<menu_type>.menu.php in the corresponding site section. In the File Manage the name of this file will be displayed as a link with the following name Menu type "<menu_type>".

    To proceed to menu editing use one of the following ways:

    • Open for editing file with the necessary menu name;

    • Use the button "Modify menu items".

    Note: Editing menu you implement modifications of the file .<menu_type>.menu.php (e.g., .top.menu.php). But you do not tackle directly with the file code. The file modification is implemented via the special system interface providing user with opportunity to edit menu items in the visual mode.

    The Bitrix Site Manager supports two modes for menu editing: simple and advanced.

    Editing menu in the simple mode allows:

    • to define menu type (e.g., left, top);
    • to assign the following menu parameters:
      • menu item name;
      • link for menu item;
      • menu item sorting index.

    Editing menu in the advanced mode allows:

    • to choose another (different from the used by default) template for menu displaying (the “Menu template” field).
    • to assign additional menu parameters:
      • set of additional links that correspond to this menu item. For example, active menu item News can match two pages: Newsfeed and News Details;
      • display conditions. For example, you can restrict shows of this item to users with certain permissions only;
      • additional parameters which can be processed by the menu template and displayed as desired. For example, if a menu item is the section title, it can be highlighted by setting the parameter SEPARATOR to a value of Y. You can check this parameter in your template and highlight an item.

        <?
        …
        if ($PARAMS["SEPARATOR"]=="Y")
        {
         $clrbg = " class=’menuborder’";
         $clrtext = "leftmenub";
        }
        else
        {
         $clrbg = "";
         $clrtext = "leftmenu";
        }
        …
        ?>

    Navigation chain

    A navigation chain helps to display the nesting level of the current page, site section or goods catalog, starting from the home page to the current document. Values indicated in the navigation chain can be specified for each section or document individually.

    Navigation chain provides visitors with tools for easy orientation on site. It allows going to the main site page or going up on one or more levels in site hierarchy.

    Click to enlarge

    This section contains description of template structure and data used for navigation chain building and showing. Also this section includes description of ways for navigation chain showing management.

    Navigation chain items management

    Managing navigation chain via the system interface

    By default, the system provides users tools for managing navigation chain items with use of site section properties. The navigation chain item name is defined by the site section (reference to which this item contains) title. A section title can be defined in the Folder Properties form (for corresponding folder).

    You can open this form the following ways:

    • from public section using the "Folder properties" button, located on the administrative panel. This button opens Folder properties form for current site section;
    • from administrative section using the "Folder properties" button, located on the context panel of Site Explorer. this button opens Folder properties form for current folder.

    To modify an item of navigation chain edit the value in the Title field and save changes.

     -> 

    Information : You can exclude a link to any site section from the navigation chain. To do it, delete this section title from the Title field.

    Managing navigation chain via the source code

    The AddChainItem() function allows adding additional items to the navigation chain. Both static and dynamic values can be used as the navigation chain item.

    <?
    //--- The first parameter of the function AddChainItem() is the name 
    //--- to be shown in the navigation chain; 
    //--- the second parameter is the link URL.
    //--- Parameter values can be both static and dynamic.
    //--- In this example, section name is a static value, while
    //--- the link is generated dynamically.
    $APPLICATION->AddChainItem("Product details", "catalog.php?BID=".$arIBlock["ID"]."&ID=".$arSection["ID"]);
    
    //--- The next example shows how to generate both parameters dynamically. 
    //--- Current name of the catalog section is used as the name.
    $APPLICATION->AddChainItem($arSection["NAME"], "catalog.php?BID=".$arIBlock["ID"]."&ID=".$arSection["ID"]);
    ?>

    To display the title of a current page in the navigation chain, call the function AddChainItem() in file footer.php, that is included after the main content is generated.

    <?$APPLICATION->AddChainItem($APPLICATION->GetTitle());?>

    You can set some of the navigation chain elements to be displayed with no link, as a common text (for example, display the current page title without link):

    This elements are creating by adding to the navigation chain template (file chain_template.php) the following code:

    if (strlen($LINK)>0)
     $sChainBody .= "<a href="".$LINK."" class='".$strclass."'>".$TITLE."</a>";
    else
     $sChainBody .= "<font class='".$strclass."'>".$TITLE."</font>";

    Some visual components are able to add to navigation chain the current page or news title, or, for example, catalog item name.

    For example, the "Catalog" sequentially adds a catalog sections names according to the catalog structure.

     

    Forum and forum themes names are added to the navigation chain the same way.

    In this case the navigation chain element name for the current page is defined directly in the document with use of the AddChainItem() function.

    Navigation chain show

    Navigation chain show is implementing with use of the following code:

    <?
    $APPLICATION->ShowNavChain();
    ?>

    Function for navigation chain call can be used not only in site template, but in a page or any visual component code placed on a page. For example, this function is utilized in the Search component.

    Click to enlarge

    Name of the navigation chain template is assigned with use of the component parameters (on the parameter setting panel).

    Note: Trial version contains the additional navigation chain template for use with the Search component. It can be found in the default component template folder /bitrix/components/bitrix/search.page/templates/.default/chain_template.php.

    You can turn off the navigation chain show for the desired pages or sections. To do so, specify a page or section not_show_nav_chain and set it to Y. The property not_show_nav_chain value can be assigned the following ways:

    • in the folder properties editing form;

      Click to enlarge
    • during a page editing in the HTML editor;

      Click to enlarge

    • during editing a page «as Text»;

      Click to enlarge
    • in page source code with use of the function SetPageProperty().

      <?
        require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");
        $APPLICATION->SetPageProperty("keywords", "Bitrix, content management, web-solution, site");
        $APPLICATION->SetPageProperty("description", " Bitrix Site Manager – is a powerful Content Management Solution");
        $APPLICATION->SetPageProperty("NOT_SHOW_NAV_CHAIN", "Y");
        $APPLICATION->SetTitle("Bitrix Site Manager 5.x");  
      ?>
       

    Navigation chain template management

    A template that is used to display the navigation chain is defined in the file /bitrix/templates//chain_template.php for each site template individually. The structure of a navigation chain template is similar to that of a menu template. The template includes:

    • a header;
    • a body element;
    • a footer parts.

    Body element defines a template used to display a single element. The whole chain is built in a loop. Sample navigation chain template:

    <?
    //--- Chain header
    $sChainProlog="";
    
    //--- Body element 
     $sChainBody = "";
    //--- The variable $ITEM_INDEX contains the current element number.
    if($ITEM_INDEX > 0)
    $sChainBody = "  » ";
    $sChainBody .= "<a href="".$LINK."" class="smalltext">".htmlspecialchars($TITLE)."</a>";
    
    
    //--- Footer
    $sChainEpilog="";
    ?>

    You can quickly switch to editing the navigation chain template while in the editable area display mode.



    You can set the individual navigation chain template for a separate site section. To do so, define a variable $sChainTemplate in the file .section.php and assign it a string value containing the full path to the navigation chain template. For example:

    $sChainTemplate = "/bitrix/templates/demo/chain_template.php"

    The navigation chain template also can be specified as one of parameters of the function ShowNavChain().

    $APPLICATION->ShowNavChain("/bitrix/templates/.default/chain_template_bottom.php")

    Inclusion of auxiliary editable areas

    This section contains information about editable areas creation and utilizing for site templates and pages.

    Using editable areas

    To provide the visual dynamic control over a modern web site, some design parts are implemented as the editable areas. These areas are used for graphic, textual or any other information publishing. Special system mechanism allows to proceed to these areas editing directly from the public section.

    The Bitrix Site Manager allows creating different types of editable areas:

    • editable area of the certain file – displayed only when viewing the current document;

    • editable area of the certain section – displayed for all documents of the given section;

    • editable area of site template – displayed in predefined areas of site design template.

    The number of editable areas can be extended. In this case you need to implement the corresponding modifications in site template. For example you may need to include php code calling the additional editable areas.

    Besides that, editable areas can be displayed according to any program conditions. For example, editable areas can be shown only for exact user groups or only for authorized users, and etc.

    You can turn on the special mode that enables to view the include areas by clicking the Edit Mode button in the administrative toolbar. As the result all editable areas will be spotlighted as separate blocks. Links allowing to proceed to area editing will be displayed in top left conner of each block.

    Managing editable areas

    Editable area of site template

    Editable areas of site template are stored as PHP and HTML files that are assigned to the site template with use of the function IncludeFile(). Path to the file with editable area is used as the function parameter:

      <?
        $APPLICATION->IncludeFile(SITE_DIR."include/phone.php",
        Array(),
        Array("MODE"=>"html")
        );
      ?>
    

    To proceed to template editable area modification use the icon displayed in the Edit Mode.

    or open for editing file with the necessary area.

    Editable area of the certain file or section

    Editable areas for file or section are stored as files with names containing a definite suffix. Suffix used for editable areas is defined in site template.

    For example, by default, it is implied that:

    • editable areas of certain file must be saved with the "_inc" suffix (suffix is joined to the name of page for which this area will be used): index_inc.php, partners_inc.php.

      Important! File with editable area must be saved in folder of section where this area is supposed to be used.

    • Editable areas of section are stored with the name sect_inc.php in the corresponding section folder. 

    To proceed to an editable area creating or editing you can:

    • use the icon displayed in the place intended for editable area show. This icon is displayed in the editable areas show mode;
    • create or open for editing a file with the proper name using the File manager tools.


    Editable areas are created on base of templates stored in folders with the names /page_templates/:

    • /bitrix/templates/.default/page_templates/ - in case if this editable area template is utilized for all site templates;
    • /bitrix/templates/<template_ID>/page_templates/ - in case if for this site template are used individual editable areas templates.

    If you want the editable areas to be added to the list of available templates of WYSIWYG editor, add the editable area templates manes in the file .content.php.

    The file .content.php is stored in the folder /page_templates/ located in the corresponding template directory.

    Also the name of utilized template can be defined with use of special parameter while assigning editable area to the site. (see the code spotlighted with blue color in the example below).

    Assigning editable areas to site templates is implemented with use of the function IncludeFile(), places in the necessary areas of site template:

    <?
    $APPLICATION->IncludeFile(substr($APPLICATION->GetCurPage(), 
    0, strlen($APPLICATION->GetCurPage())-4)."_inc.php", Array(), 
    Array("MODE"=>"html", "NAME"=>GetMessage("PAGE_INC"), "TEMPLATE"=>"page_inc.php"));
    ?>
    <?
    $APPLICATION->
    IncludeFile($APPLICATION->GetCurDir()."sect_inc.php", Array(), Array("MODE"=>"html", 
    "NAME"=>GetMessage("SECT_INC"), "TEMPLATE"=>"sect_inc.php"));
    ?>

    Placing the Advertisement

    This section contains description of basic principles of advertising areas creation and procedures of banners publishing and show management.

    Design

    A site may have several different advertisement types and advertising areas. Such advertisement may include both common image-based and text-based banners. Advertisement can be shown on continuing basis as well as its shows can be regulated by the administrator-assigned probability. Advertisement shows can be restricted to certain sections or pages of the site. Advertisement management is implemented with use of the "Advertising and banners" module tools.

    All banners are shown in special site template areas called "advertising areas".

    Banner show is implemented with use of the function ShowBanner():

    <?
    //--- Example of placing an advetising area in the left part of the design. 
    //--- Any other type can be selected similarly:
    //--- TOP, BOTTOM, COUNTER,… (first parameter of the function)
    //--- Both predefined and user-defined types can be used. 
    //--- Other two optional parameters can be used to specify the HTML code 
    //--- that is to wrap the advertising area.
    
    $APPLICATION->ShowBanner("LEFT", '<div align="center">', '<br></div><br>');
    ?>

    For each advertising area it is defined what type of advertisement is available for show in this area. In example (that is given above) only banners with type LEFT will be available for show in this advertising area.

    Banner types

    Banner type is a symbolic representation of banner group all banners of which are intended for show in the same advertising area.

    Names of banner types are set arbitrarily by administrator. For example for banners intended for show at the page left can be used types with the following names: LEFT, LEFT1, and etc.

    It is strongly recommended to use the same size (especially width) for all banners of one type. It allows to avoid page deformation during banners show.

    Advertising type management is implemented via the "Advertising and banners" module interface:

    Services -> Advertising -> Banner types

    To proceed to any banner or banner group management directly from the public section use buttons displayed in the include area show mode:

    •  - edit this banner; 
    •  - filtered banner list.

    Controlling advertising shows using keywords

    One of the methods that can be applied to control the banner shows and to target the advertising precisely is using keywords. The distinctive advantage of this method is that it allows to drive the advertising campaign aimed to reach the well defined target group among your visitors.

    Using the Advertising and Site Explorer modules of the Bitrix Site Manager, you can:

    • target advertisement to a specific user group. This means that, in respect of a user group, you can show advertisement on the most frequently viewed pages, or on pages whose content can be of particular interest to this user group;
    • confine banner impressions within the defined rules, for example, depending on the level of correlation between the advertisement subject and the information on a page.

    To control advertising show with use of the keywords mechanism you can adjust the following types of keywords:

    • banner keywords;
    • page keywords:
      • desired: if a site page is assigned the desired keywords, all the banners that have at least one matching keyword in their keyword sets can be shown on that page.

        If no banners with the matching keywords can be found, then the page will show banners that are not assigned any keywords. In this situation, the system uses own standard algorithm to select banners to be displayed.

      • required: if a site page is assigned the required keywords, all the banners that have all keywords in their keyword sets can be shown on that page.

        If no such banners can be found, then the page will show banners that are not assigned any keywords. In this situation, the system uses own standard algorithm to select banners to be displayed.

    You can assign keywords to a banner in the Keywords field (the Targeting tab) on the banner editing page:

    Services -> Advertising -> Banners (go to a banner editing or creation)

    A special property named adv_desired_target_keywords is used to manage the desired keywords. This property is predefined, i.e. its name and behavoiur are hard-coded in the system.

    You can specify the desired page keywords by calling the method SetDesiredKeywords(). This method accepts the following parameters:

    • keywords – array of one or more desired keywords;
    • TIP_SID – the symbolic identifier of the advertisement type. Describes the advertisement type to which the keywords are to be assigned. Leave this parameter empty to assign keywords to all types.

    CAdvBanner::SetDesiredKeywords(array("Partners",
                                         "Cooperation",
                                         "Company",
                                         "Contacts"),
                                   "RIGHT");

    Note! If the were not set any keywords in a page source code then the function SetDesiredKeywords() parameter keywords assumes a value of page property adv_desired_target_keywords. If value of this property was not assigned then the function SetDesiredKeywords() uses value of the page property keywords.

    The function SetDesiredKeywords() is called automatically at the moment of page generation. That is why it is not required to call this function additionally in the header.php if you do not want to redefine page desired keywords.

    The required keywords impose active constraints on the banner shows. If the banner keywords does not contain all of the page keywords, the banner will not be shown on the page.

    Developers have the opportunity to assign the required keywords to a page by calling the method SetRequiredKeywords(). This method accepts the following parameters:

    • keywords – array of one or more required keywords;
    • TIP_SID – the symbolic identifier of the advertisement type. Describes the advertisement type to which the keywords are to be assigned. Leave this parameter empty to assign keywords to all types.

    The following call assigns the following two required keywords to a page: partners and cooperation.

    CAdvBanner::SetRequiredKeywords(array("Partners",
                                          "Cooperation"),
                                    "RIGHT");

    In this case, only a banner the set of keywords of which contains all required keywords assigned by the call of function SetRequiredKeywords can be shown on the page.

    Visual components

    This section contains description of main principles of visual components developing, adjusting and utilizing.

    Using components

    Visual component is logically completed source code, implementing operations with data of exact modules. Virtually any script can be shaped as a component.

     

    You can quickly add components to pages using the visual editor. To insert a component into a page, simply select it in the list and drag and drop it to the desired position within the page.

    A distinctive feature of a component is the ability not only to be controlled on the source code level, but also through the use of parameters that define the component behavior.

    Note! Using the visual editor you can choose a template which will be used for page displaying. If visual components used on the page are customized for a definite site template then in case of using another site template these components will be displayed as PHP code. It means that the system will not be able to identify these components. In this case you are recommended to choose the proper template (for which the visual components were customized) or use another components.

    Also some components can manage site template elements:

    • add items to the navigation (breadcrumb) chain (e.g., information blocks and e-store components, );

      Click to enlarge Click to enlarge
    • assign page title (e.g., information blocks and forum components);

      Click to enlarge
    • assign page metadata: keywords and description (e.g., information blocks components).

      Click to enlarge

    In the given examples the template elements managing is implemented with use of special visual component parameters. These parameters can be adjusted during editing page in the visual editor mode.

    Useful information:
    • If a page contains several components each of which can assign the page title then the page title will be set by the last component (with use of the function SetTitle()).
    • If a page contains several components adding their buttons to the control panel then to avoid the administrative panel overloading assign the visual components property Display panel buttons for this component to No.
    • The visual component managing is available only for system administrators. This restriction is used to provide security of site managing since the visual components contain php code.

    You can proceed to editing php code used for a component call. To do so use the button , located on the left panel of the visual editor.

    Also any arbitrary PHP code can be added to page in the similar manner. In this case, it could be modified in the text editor in the bottom of the screen.

    Click to enlarge

    Note: Any arbitrary php code, placed on a page, in the visual editor mode will be displayed as the picture .

    The Bitrix Site Manager allows to use on pages almost any php code without damage to visual editing mode.

    Calling components in the page code

    Calling components on a site page is implemented with use of the function IncludeFile(). The following parameters are used as the function attributes:

    • path to the file with required component source code;
    • properties assigned (by user) for placed on a page component.
    <?
    // this component displays an information block element detailed information
    $APPLICATION->IncludeFile("iblock/catalog/element.php", Array(
        "IBLOCK_TYPE"       => "catalog",                          // Information block type
        "IBLOCK_ID"         => "21",                               // Information block
        "ELEMENT_ID"        => $_REQUEST["ID"],                    // Element ID 
        "SECTION_URL"       => "/catalog/phone/section.php?",      // URL to the information block section page
        "LINK_IBLOCK_TYPE"  => "catalog",                          // Type of information block elements of wich are linked with current element
        "LINK_IBLOCK_ID"    => "22",                               // ID of information block elements of wich are linked with current element
        "LINK_PROPERTY_SID" => "PHONE_ID",                         // Property containing the link between information blocks elements 
        "LINK_ELEMENTS_URL" => "/catalog/accessory/byphone.php?",  // URL to the page with list of linked elements
        "arrFIELD_CODE" => Array(                                  // Fields
             "DETAIL_TEXT",
             "DETAIL_PICTURE"),
        "arrPROPERTY_CODE" => Array(                               // Properties
             "YEAR",
             "STANDBY_TIME",
             "TALKTIME",
             "WEIGHT",
             "STANDART",
             "SIZE",
             "BATTERY",
             "SCREEN",
             "WAP",
             "VIBRO",
             "VOICE",
             "PC",
             "MORE_PHOTO",
             "MANUAL"),
        "CACHE_TIME"        => "3600",                              // Cache time
        ));
    ?>

    Files pertaining to a component can be stored in the following directories:

    • in the folder of a module to which this component relates (i.e. in the product kernel). For example, the information blocks components are stored in the following folders:

      /bitrix/modules/iblock/install/templates/iblock/news/ or /bitrix/modules/iblock/install/templates/iblock/catalog/;

    • in the folder of site template for which these components were customized. For example:

      /bitrix/templates/<template_ID>/iblock/news/ or /bitrix/templates/<template_ID>/iblock/catalog/;

    • в in the default templates folder. For example:

      /bitrix/templates/.default/iblock/news/ or /bitrix/templates/.default/iblock/catalog/.

    Visual components structure

    All components included in the product supply are developed with use of the message files. This mechanism allows to use the same components for interfaces on different languages. For example, a component for news displaying can be used for sites both in English or German.

    For each component or component group is created a description file .description.php. This file contains description of the component control panel:

    • names of adjusted parameters;
    • formats of fields used for parameter values assignment;
    • default values of some parameters;
    • etc.

    Also this file can contain rules or functions used for defining some necessary source data and values. For example, descriptions for the information blocks components are stored in the file: /bitrix/modules/iblock/install/templates/iblock/.description.php.

    More detailed description of the visual components structure and work is given in the Components 2.0 training course.

    Customizing the components

    The customization of visual components may involve:

    • modification of the component design and layout: colors, fonts, button forms etc;
    • changing the component source code (for example, to change the component output formatting).

    Before you start customizing a Component 2.0 to a website template, copy the component template to the default or destination website template.

    To customize a component for use with a certain website template, the component must be copied to a directory in which that website template exists.

    If a customized component needs to be made available to all website templates, such component must be copied to the default website template directory.

    To copy the component template, use only the system copy commands. Switch to Edit Mode, click the service button on the component toolbar and select Copy component template:

    Once the component template has been duplicated in the destination location, you can modify it as required.

    However, if your task is to change the component logic, the component must be copied completely to a new namespace (that is, to a subfolder of /bitrix/components/) which must be created beforehand. In the visual editor components bar, the new component will show beside the standard component:

    If required, you can group the new components in a separate section for easier access by editing the component’s file .description.php.

    In this file, find the $arComponentDescription array declaration. The PATH/ID keys define the tree branch in which the visual editor will place the component. The ID key has a range of predefined values which add the component to one of the standard component groups (see here for details). To create your own, custom group, simply define a new name here. For example, the code:

    "PATH" => array(
          "ID" => "custom",
          "NAME" => "My Awesome Components"
        ),
    

    will effectively create the group "My Awesome Components" and place your component in it.

    How to implement the news display (an example of work with components)

    First step in implementing pages for the news display is to create the appropriate information block in the administrative interface and populate it with elements; that is, the news.

    When creating a new information block, you have to specify the path to a page with the list of elements of this block (news) and the path to a page with the detailed view of an element (a single news).

    The above-mentioned pages must be present in the site structure. For example, /about/news/index.php for the list of news and /about/news/detail.php for the news details.

    You can create pages in any way you like: using either the Site Explorer module or WYSIWYG editor.

    After you have created a new page, place the required components in it. If you are working with the news list page, drag and drop the News List component from the palette on the page. Drag and drop the News Details component on the page intended to display the news details.

    If you wish to arrange the news export to RSS, place a descriptive image in the page (RSS 2.0) and apply a link to it. The link should point to an existing page (e.g. /about/news/rss.php) with the RSS Export component placed in it.



    Please note that you should make sure that the RSS export is allowed for the given information block.

    Access permissions

    This section contains examples of using the access permission distribution for site elements management.

    Using access permission control

    The used in the system mechanism of controlling users access permissions can be utilized in the following purposes:

    • for menu items show managing:

      Editing menu in the advanced mode you can use a condition with the type For user group to manage menu items show:

    • for menu template managing:

      The level of user access permissions can impact menu structure, set of used in menu elements or images, and etc. An example of access permissions verification that can be used for menu template is given below.

      <?
      …
         if ($PERMISSION > "D")
      {
       $sMenuBody = '<tr><td colspan=2 background="/bitrix/templates/demo/images/l_menu_border.gif">
      <img src="/bitrix/templates/demo/images/1.gif" width="1" height="1"></td></tr><tr>'.$strDir.'
      <td valign="top"'.$strstyle.' width="100%"><a href="'.$LINK.'" class="'.$strtext.'">'.$TEXT.'
      </a></td></tr>';
      }
      else
      {
       $sMenuBody = '<td colspan=2 background="/bitrix/templates/demo/images/l_menu_border.gif">
      <img src="/bitrix/templates/demo/images/1.gif" width="1" height="1">
      </td></tr><tr>'.$strDir_d.'</td><td valign="top"'.$strstyle.' width="100%">
      <a href="'.$LINK.'" class='.$strtext.'>'.$TEXT.'</a></td></tr>';
      
      }
      ?>

      Important! Conditions implying monitoring of the variable $PERMISSION value can be utilized only for menu templates.

    • for site template managing:

      User access permissions can be used for defining conditions in which a site template will be applied to the site pages. For example:

      In the given example the Corporative template 1 will be applied to site pages if the current user belongs to the group Administrators or Partners.

      Examples of php-conditions:

      $USER->IsAuthorized()Checks, if the current user is authorized.
      $USER->IsAdmin()Checks, if the current user is the system administrator.
      in_array('5',$USER-> GetUserGroupArray())Checks, if the current user belongs to the specified group (in this case it must be group with ID=5).

    • for site template elements managing:

      Using of the mechanism of user permissions control allows to manage site template elements showing, shapes, colors and other attributes.

    • for site elements managing:

      Using of the mechanism of user permissions control allows to organize managing the site elements (e.g., pages, sections, forums, and etc.) by different users.

    Site optimizing

    SEO (Search engine optimization)

    Bitrix Site Manager provides special tools for better solving different SEO issues:

    1. Meta data. Special folder and page properties can be used for setting keywords and description metadata. These properties can be easily set by site content editors through the WYSIWYG editor or in text mode.

      Click to enlarge

    2. Browser window title settings. Page properties can also be used for setting separate title of the browser page. Every page can be configured to have different titles of the browser window. Or these titles can depend on the page content title or even dynamic content parts, e.g. news titles or goods names.

      Click to enlarge

    3. Heading styles (H1, H2, H3). Page heading styles can be managed in HTML-editor (WYSIWYG) editor.

      Click to enlarge

    4. Excluding CSS code from the page code for SE bots. Cascading style sheets (CSS) can be included in the page body for better page viewing by site visitors or they can be completely excluded from the page code or just linked as external file with special mechanism that helps to determine if the search engine bot visits the page or just an ordinary user came.
    5. No limitations on site layout. Site template can be built with Table or DIV (layers) layout - there are no limitations. So the page content can be placed closer to the top of the page depending on the layout techniques used.

      Previous two features can be helpful for the site owners because currently Google indexes only first 100kB of a page. For a short while, a few months ago, they did cache up to 250kB but are no longer doing so for new pages. The figure has reverted to 100kB again.

    6. User friendly URLs. Dynamic content can be displayed on the pages that use user friendly URLs (it means they do not have URL parameters as news or goods IDs, etc). So the page has standard URL like mysite.com/news/23.php instead of mysite.com/news/index.php?ID=23. (Standard product feature, no mod_rewrite rules used)

      This feature still can be desired by site owners although the latest news from SEO market shows that Google already handles long/deep URLs with 3 or even 5 variables in URL. (It seems the deep of indexing depends on site page rank)

    7. Meta data settings for dynamic content. Keywords and descriptions for the goods, articles etc. Special properties of the catalog elements can be used for setting different metadata for the goods or articles. This way every goods in your catalog will be indexed with its own keywords as well as every news or job vacancies published on the site.

      Click to enlarge

    8. Find a phrases what your visitors search for on your site. Special web analytics tools enable to collect the data on the most used search phrases with which users came from the search engine. So you are able to use the most popular search phrases across the site for your keywords settings and for better visitor site paths optimization.

    9. Limiting activity of the search engine bots. Some search engines bots can be automatically blocked for some period of time with the internal mechanism if they show big activity (this can be configured by site owner).
      • activity limiting parameters are defined on the Statistics module settings page;

      • if you want a SE bots to be involved in activity control then check the field "Check activity limit" on the search engine editing page.

    10. Session IDs can be removed from URLs. It seems that Google and other search engines definitely do not like Session IDs. You can remove them quite easily from your URLs just with adding a string in site configuration file.

      #php_flag session.use_trans_sid off

    Note that for better understanding the principles of search engine optimization you should read more hints from Google and others: http://www.google.com/webmasters/guidelines.html