Элементы дизайна osCommerce (main

Элементы дизайна osCommerce (main_page.tpl.php)

( 1 Vote )

Файл main_page.tpl.php шаблона Helius.

Итак, начиная с этого файла производится отображение страниц нашего магазина, и потому познакомимся с ним подробно. Для тех, кто не знаком с основами HTML и CSS рекомендуем предварительно ознакомиться со спецификациями этих мета-описаний, иначе все дальнейшее описание будет для Вас бессмысленным.

Любой HTML документ, как известно состоит из заголовка и собственно тела. Заголовок описывает содержимое страницы, подключает необходимые файлы скриптов и стилей, а так же передает в поисковые машины такие параметры, как описание и ключевые слова страницы.

Вот как выглядит отображение заголовка в этом шаблоне:

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">

<html <?php echo HTML_PARAMS; ?> >

<head>

<meta http-equiv="Content-Type" content="text/html; 
charset=<?php echo CHARSET; ?>">

<link rel="shortcut icon" href="/favicon.ico" >

<base href="/<?php echo (($request_type == 'SSL') ? 
HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>">

<?php

if ( file_exists(DIR_WS_INCLUDES . 'header_tags.php') ) {

 require(DIR_WS_INCLUDES . 'header_tags.php');

} else {

?>

 <title><?php echo TITLE ?></title>

<?php

?>

<link rel="stylesheet" type="text/css" 
href="/<?php echo TEMPLATE_STYLE;?>">

<?php if (isset($javascript) && file_exists(DIR_WS_JAVASCRIPT .

basename($javascript))) { require(DIR_WS_JAVASCRIPT .

basename($javascript)); } ?>

</head>

Константы HTML_PARAMS и CHARSET определяются в языковых файлах магазина (/includes/languages/russian.php Здесь и далее будет подразумеваться, что интерфейс магазина русифицирован). В нашем случае, в этих переменных передаются значения:

define('HTML_PARAMS','dir="LTR" lang="ru"'); define('CHARSET', 'utf-8');

Далее, если для доступа к странице используется защищенный протокол SSL, то в качестве базового размещения ссылок используется https:// префикс. Это определяется переменными HTTPS_SERVER и HTTP_SERVER из файла конфигурации /includes/configure.php

define('HTTP_SERVER', 'http://this.shop.net');  
define('HTTPS_SERVER', ' https://this.shop.net');

После этого отображаются элементы заголовка, отвечающие за метаданные, такие как DESCRIPTION и KEYWORDS и TITLE, использующиеся поисковыми машинами для связывания страницы сайта с ее содержимым. Эти поля заполняются в случае, если существует файл, отвечающий за это: /includes/header_tags.php. Если этого файла нет, то выводится описание самого магазина, определенного константой TITLE определенной в языковом файле /includes/languages/russian.php или определенной в константе описания магазина административной панели. Этот файл выводит содержимое этих полей в зависимости от того, что в данный момент просматривает посетитель. Если это информация о категории, то она содержит мета-описания категории, если новостей – то описания новостей. Если отображение мета-данных производится некорректно, то именно в этом файле необходимо смотреть, в чем проблема.
После этого к странице подключается файл с описанием стилей отображения: /templates/Helius/stylesheet.css. Имя файла формируется в /includes/template_application_top.php в зависимости от доступности файла стилей шаблона. Таким же образом подключается и файл JavaScript – если он определен для текущей страницы, и файл с таким именем в данном шаблоне существует.

Далее формируется само по себе отображение. Следует сразу заметить, что стандартный шаблон предполагает использование нескольких зон, в которых отображаются элементы интерфейса. Левая колока, правая колонка – и сама по себе информативная часть. Кроме того, для всякого рода интерактивных сообщений используются зоны в самом верху страницы, и внизу страницы. На элементах табличного дизайна останавливаться не будем, рассмотрим методику отображения страниц магазина.

<body marginwidth="0" marginheight="0" topmargin="0" 
bottommargin="0" leftmargin="0" rightmargin="0">

<!-- warnings //-->

<?php require(DIR_WS_INCLUDES . 'warnings.php'); ?>

<!-- warning_eof //-->

В самом верху страницы, отображаются элементы магазина, названные предупреждениями. В них может отображаться информация о проблемах в магазине, или другая заранее заданная информация. Отображение этого элемента контролируется файлом /includes/warnings.php На самом деле код, размещенный в этом файле постоянно контроллирует параметры системы на их соответствие (доступность файлов, разрешения в файловой системе и так далее) и только при их обнаружении отображает ошибки посредством класса $messageStack (/includes/classes/message_stack.php). За атрибуты отображения этих сообщений отвечают каскадные стили messageStack*. Пример их описания:

.messageStackError, .messageStackWarning {

 font-family: Verdana, Arial, sans-serif;

 font-size: 10px; background-color: #ffb3b5;

.messageStackSuccess {

font-family: Verdana, Arial, sans-serif;
 font-size: 10px; background-color: #99ff00;

Если на какой-то странице необходимо обязательно отобразить какую-то свою информацию в заголовке, то для этого будет достаточно кода:

<?php $messageStack->add(‘header’,’Сообщение’,’warning’); ?>

Последний параметр функции определяет, какая иконка будет отображаться слева от сообщения. Если параметр не задан, то иконка отображаться не будет. Возможные значения: ‘warning’,’error’.

<?php

if (DOWN_FOR_MAINTENANCE_HEADER_OFF =='false') {

Если сайт не закрыт на обслуживание, то отображается содержимое магазина.

if (SITE_WIDTH!='100%') {

?>

Переменная SITE_WIDTH задается в параметрах магазина административной панели.

Логотип магазина отображается в следующих строках:

 <a href="/index.php">
<img src="/<?php echo DIR_WS_TEMPLATES . TEMPLATE_NAME;?>
/images/oscommerce.gif" border="0" alt="Магазин" a>

и отображается статической картинкой oscommerce.gif. При необходимости можно просто поменять существующий файл своим логотипом.

Так же в этом шаблоне в шапке используется баннер. При этом проверяется, существует ли в системе активный баннер с заданными размерами.

<?php

 if ($banner = tep_banner_exists('dynamic', '468x50')) {

?>

<?php echo tep_display_banner('static', $banner); ?>

<?php

?>

При отображении баннера есть несколько методов: static и dynamic. Первый метод просто отображает заданный баннер. Динамический метод определяет отображаемый баннер на основе заданных заранее условий. Баннер отображается как заранее заданное изображение, являющееся гиперссылкой на заданный в контрольной панели адрес.

На странице может быть отображено содержимое корзины покупателя.
При этом используется класс shoppingCart (/includes/classes/shopping_cart.php). Для отображения элементов корзины используется каскадный стиль ShowCartDetails. В этом шаблоне используются методы: $cart->count_contents() – возвращает количество элементов в корзине, $cart->show_total() – возвращает общую стоимость корзины, $cart->show_weight() – возвращает вес товаров в корзине. Переменная SHOW_CART_DETAILS_HEADER не определяется нигде в магазине. И, можно сказать, что по умолчанию товар не будет отображаться в заголовке магазина. Но если это необходимо сделать, то эту переменную нужно определить в любом из, например языковых файлов примерно таким образом define(‘SHOW_CART_DETAILS_HEADER’,1); и видоизменив параметры отображения в шаблоне, подредактировав приведенную ниже секцию в соответствии со своими надобностями. Хочется отметить, что в существующей версии шаблона не предусматривается локализация корзины.

if (SHOW_CART_DETAILS_HEADER=='1') {

?>

 <table border="0" width="100%" cellspacing="0" cellpadding="0">

 <tr>

 <td align="right" height="30" valign="middle">

 <?php echo '[ ' . $cart->count_contents() . 
($cart->count_contents() == "1" ? " Item" : " Items "); ?> 
&nbsp;&nbsp; 
<?php echo $currencies->format($cart->show_total()); ?> &nbsp;&nbsp; 
<?php echo $cart->show_weight() . 
($cart->show_weight() == "1" ? " lb" : " lbs ");?>&nbsp;]&nbsp;&nbsp;

 </td>

 </tr>

 </table>

<?php } ?>

В некоторых шаблонах предоставляется возможность отображения вверху магазина навигационную панель с предустановленными ссылками. За отображение этой панели отвечает константа, установленная в админпанели: SHOW_HEADER_LINK_BUTTONS.

<?php

 if (SHOW_HEADER_LINK_BUTTONS =='yes') {

if (DOWN_FOR_MAINTENANCE =='false') {?>

<table border="0" cellpadding="0" cellspacing="0" width="100%">

<tr><td bgcolor="black" height="1" colspan=2></td></tr>

<tr>

<td height="25" align="center" colspan="2">

| <?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' .
 HEADER_LINKS_DEFAULT . '</a>'; ?>

| <?php echo '<a href="' . tep_href_link(FILENAME_PRODUCTS_NEW) . '">' . 
HEADER_LINKS_WHATS_NEW . '</a>'; ?> |

<?php echo '<a href="' . tep_href_link(FILENAME_SHOPPING_CART) . '">' . 
HEADER_LINKS_CART . '</a>'; ?> |

</td>

</tr>

<tr><td bgcolor="black" height="1" colspan="2"></td></tr>

</table>

<?php }}?>

Как видим, здесь используются переменные, указывающие на имена файлов-скриптов, отвечающих за наполнение сайта. Эти имена определены в /includes/filenames.php, а описания этих ссылок в файле /includes/languages/russian.php. Так, например для перехода к корзине, используется имя файла FILENAME_SHOPPING_CART, а название этой ссылки хранится в HEADER_LINKS_CART. За стиль отображения отвечают каскадные классы headerNavigation, headernavigation1,HeaderPageLinks.

Аналогичным образом формируется и навигатор, или breadcrumb. При этом используется только каскадный стиль headerNavigation1, а внешний вид определяется классом /includes/classes/breadcrumb.php. Линки отображаются с участием каскадного класса headerNavigation.

<?php if (SHOW_HEADING_TITLE_ORIGINAL == 'yes'){ ?>

<table border="0" cellpadding="0" cellspacing="0" width="100%">

<tr>

<td  height="25" align="left" colspan="2">

&nbsp;&nbsp;<?php echo $breadcrumb->trail(' &raquo; '); ?>

</td></tr>

<?php } ?>
<tr><td bgcolor="black" height="1" colspan=2></td></tr>

</tr>

</table>

В качестве разделителя в навигаторе для шаблона Helius используется передаваемый в параметре код. В данном случае это символ », что соответствует двойной правой кавычке. Этот разделитель можно переопределить любым допустимым HTML кодом.

После того, как отображена шапка сайта, начинается отображение собственно содержимого самого магазина. Сначала формируется левая колонка. Отображать ее или нет задано константой DISPLAY_COLUMN_LEFT, задаваемой в админпанели в разделе конфигурации отображаемого шаблона. Кроме того, используются константы, описывающие параметры шаблона: BOX_WIDTH_LEFT – ширина левой колонки, CELLPADDING_LEFT – отступ между рамкой ячейки и данными внутри ячейки. Непосредственное отображение левой колонки производится файлом /includes/column_left.php

<?php

if (DISPLAY_COLUMN_LEFT == 'yes')  {

if (DOWN_FOR_MAINTENANCE =='false' ||
 DOWN_FOR_MAINTENANCE_COLUMN_LEFT_OFF =='false') {

?>

 <td width="<?php echo BOX_WIDTH_LEFT; ?>" valign="top">
<table border="0" width="<?php echo BOX_WIDTH_LEFT; ?>" 
cellspacing="0" cellpadding="<?php echo CELLPADDING_LEFT; ?>">

<?php require(DIR_WS_INCLUDES . 'column_left.php'); ?>

 </table></td>

<?php}}?>

Аналогично, после левой колнки отображается сам по себе контент. Переменная $content_template устанавливается только в страницах, посвященным партнерской программе. В остальных случаях используется переменная $content – которая, как говорилось, получает свое значение в файле index.php и определяет тот контент, который отображается в текущий момент. При первом заходе в магазин эта переменная равна index_defaults, и за отображение материала, соответственно отвечает файл /templates/content/index_defaults.tpl.php. Обратите внимание, что используется не файл текущего шаблона, а файл контента, общий для всех шаблонов.

 <td width="100%" valign="top">

<?php

 if (isset($content_template) && file_exists(DIR_WS_CONTENT .

basename($content_template))) {

 require(DIR_WS_CONTENT . basename($content_template));

 } else {

 require(DIR_WS_CONTENT . $content . '.tpl.php');

?>

 </td>

Аналогично колонке слева, отображается и колонка справа, только при этом используются константы DISPLAY_COLUMN_RIGHT, BOX_WIDTH_RIGHT, CELLPADDING_RIGHT. А отображает содержимое правой колонки файл /includes/column_right.php

<?php

if (DISPLAY_COLUMN_RIGHT == 'yes')  {

if (DOWN_FOR_MAINTENANCE =='false' || 
DOWN_FOR_MAINTENANCE_COLUMN_RIGHT_OFF =='false') {

?>

 <td width="<?php echo BOX_WIDTH_RIGHT; ?>" 
valign="top"><table border="0" width="
<?php echo BOX_WIDTH_RIGHT; ?>" cellspacing="0" cellpadding="
<?php echo CELLPADDING_RIGHT; ?>">

<?php require(DIR_WS_INCLUDES . 'column_right.php'); ?>

 </table></td>

<?php}}?>

 </tr>

</table>

После отрисовки самого магазина производится отрисовка нижней части. В ней, как правило используется область для отображения различных счетчиков и служебной информации.

За отображение счетчиков отвечает файл /templates/Helius/counters.txt
Текст послесловия определяется в языковом файле /includes/languages/russian.php посредством константы FOOTER_TEXT_BODY и может переопределяться либо в самом языковом файле, либо может изменяться шаблон главной страницы, чтобы выводить другой текст. Так же внизу страницы может выводиться время обработки страницы TOTAL_TIME и количество запросов к базе данных TOTAL_QUERIES, если переменная DISPLAY_PAGE_PARSE_TIME в админпанели установлена в true.

<span>

<?php if (DISPLAY_PAGE_PARSE_TIME == 'true') { ?>

<?php echo TOTAL_QUERIES . $query_counts; ?>

<br>

<?php echo TOTAL_TIME . $query_total_time; ?>

<?php } ?>

</span>

На этом с основной страницей закончено. В следующих статьях мы рассмотрим формирование колонок и некоторых видов контента магазина.


	+380(66)433-69-36
	+380(66)433-69-36
	+380(66)433-69-36