Создаём простой шаблон интернет витрины за 5 минут

Ниже на пошаговом примере показан процесс создания шаблона интернет витрины, где от воображаемого сайта не требовалось иных страниц, кроме каких-то статических типа "О нас", "Доставка", "Оплата" и т.п., где менеджер написал произвольные тексты, да главной страницы с неким набором новинок и страниц категорий (с пагинацией), содержащих списки товаров этих категорий.

Внешний вид получившегося шаблона показан ниже. Не обращайте внимание на раскраску, так как шаблон в самом деле был собран за 5 минут только с целью показать, насколько просто можно делать шаблоны в Impera CMS. И чтобы не париться со стилями, этот шаблон-пример был раскрашен на скорую руку, лишь визуально выделяя разные детали.

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

Статическая страница

Располагается в файле static_page.tpl шаблона, и если не использует дополнительных наворотов, тогда является предельно простым, всего из 2 строк.

<h1> {$page->header} </h1>
{$page->body}

Вот внешний вид сайта при заходе на статическую страницу.

Заглушка неиспользуемой страницы

Располагается в файле missing_template.htm шаблона. Также является предельно простым файлом.

<h1> Страница не найдена! </h1>
<p> Нет такой страницы на нашем сайте. </p>

Вот внешний вид сайта, когда посетитель попадёт на страницу, от которой отказались в шаблоне интернет витрины.

Макет страницы

Располагается в файле index.tpl. В нашем примере это единственный "крупный" файл шаблона, так как файл содержит всего 49 строк из простых htm-тегов с небольшой примесью smarty-тегов, в местах где формируется верхнее меню и список категорий. Чтобы код читался легче, цветом выделены глобальные переменные, в которых движок сообщает шаблону какие-нибудь сведения, и локальные переменные, создаваемые шаблоном на время своей работы. Некоторые переменные являются структурами данных, и соответственно содержат поля, которые тоже выделены цветом. Ещё цветом выделены теги шаблонизатора Smarty.

<!DOCTYPE HTML>
<html>
    <head>
        <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
        <link href="{$theme}css/style.css" rel="stylesheet" type="text/css" />
        <title> {$title} </title>
    </head>

    <body>
        <div id="wrapper">

            <div id="header">
                <div id="logo"> Ваш логотип </div>
                <div id="phone"> +7 916 000-00-00 </div>
                <div id="menu">
                    {foreach $menus as $item}
                        {if $item->name == 'Верхнее меню'}
                            {foreach $item->sections as $topic}
                                <a href="{$site}{$topic->url_path}{$topic->url}"> {$topic->name} </a>
                            {/foreach}
                        {/if}
                    {/foreach}
                </div>
            </div>

            <div id="columns">
                <div id="categories">
                    {function name = 'categoriesTree'}
                        <ul>
                            {foreach $cats as $item}
                                <li>
                                    <a href="{$site}{$item->url_path}{$item->url}"> {$item->name} </a>
                                    {if !empty($item->subcategories)}
                                        {categoriesTree cats = $item->subcategories}
                                    {/if}
                                </li>
                            {/foreach}
                        </ul>
                    {/function}
                    {categoriesTree cats = $categories}
                </div>

                <div id="content"> {$content} </div>
            </div>

            <div id="footer">
                © {$settings->site_name}
                <b class="phone"> +7 916 000-00-00 </b>
                <div id="counters"> {$settings->counters} </div>
                <span> Это пример простейшего шаблона интернет витрины </span>
            </div>

        </div>
    </body>
</html>

Принцип работы файла В заголовочной части записаны нужные мета-теги, затем подключаются желаемые дополнения, например CSS-файл стилей страницы (для удобства предусмотрена переменная $theme, указывающая URL папки текущего шаблона клиентской стороны сайта). Затем с помощью переменной $title выводится заголовок страницы.

Далее в шапке страницы выводим логотип, телефон, и в цикле перебираем элементы переменной $menus - это менюшки сайта, пока не найдём меню с названием "Верхнее меню". Затем в цикле перебираем все пункты (топики) этого меню и выводим в виде ссылок.

Ниже объявляем локальную функцию categoriesTree, которая в цикле с рекурсией выводит дерево категорий в форме UL-LI списка. И вызываем эту функцию, сообщая ей переменную $categories, где содержится список категорий.

Ниже выводим основной контент страницы (так называемый контент основного модуля), который перед этим был сгенерирован движком и сохранён в переменной $content.

Наконец в подвале сайта с помощью переменной $settings - это настройки сайта, выводим название магазина, затем телефон и скрипты счётчиков/аналитики/метрик.

"Главная" страница

Располагается в файле catalog.tpl шаблона, а страница эта называется главной условно, так как в движке можно установить главной любую другую страницу. Вообще же говоря, данный файл - двухцелевой: в одном случае он показывает список всех товаров конкретного типа (например хиты, новинки, акционные и т.п.), в другом случае выступает как начальная страница сайта, показывающая по несколько товаров разных типов.

{if isset($products)}
    <h1> {$content_title} </h1>
{else}

    {if !empty($section->body)} <div class="info"> {$section->body} </div> {/if}
    <h1> Новинки </h1>
    <p class="more">
        <a href="{$site}catalog?mode=newest"> Все новинки </a>
        <a href="{$site}catalog?mode=hit"> Хиты продаж </a>
        <a href="{$site}catalog?mode=actional"> Со скидками </a>
    </p>
    {$products = $newest_products}
{/if}

{* карточки товаров *}
{$rate = $currency->rate_from / $currency->rate_to}
<div id="products">
    {foreach $products as $item}
        <div class="card">
            <h2> {$item->model} </h2>
            <img src="{$item->small_image}" />
            {foreach $item->variants as $v}
                <b class="price"> {($v->discount_price * $rate)|string_format:'%d'} {$currency->sign} </b>
            {/foreach}
        </div>
    {/foreach}
</div>

Принцип работы файла Если существует переменная $products, то есть имеется подготовленный список товаров, значит посетитель сейчас просматривает товары конкретного типа. Следовательно выводим оглавление этого списка (оно находится в переменной $content_title) и ниже после условия вычисляем курс валюты $currency, а затем в цикле выводим сам список товаров в виде мини карточек товаров.

Если же переменная $products не существовала, тогда выводим оглавление "Новинки" (заметьте, что по дизайну рассматриваемого примера перед оглавлением выводится текст описания страницы $section->body, если такое описание было введено менеджером во время редактирования "главной" страницы в админпанели) и далее несколько ссылок на страницы товаров конкретного типа. Затем в переменную $products копируем например анонсовый список новинок (он содержится в переменной $newest_products), который и получится выведенным сразу после условия. Но при желании мы могли бы пользоваться и такими переменными анонсовых списков:

$hit_products - хиты продаж
$newest_products - новинки
$actional_products - акционные товары
$awaited_products - товары, ожидаемые скоро в продаже
$ordered_products - недавно покупавшиеся товары
$commented_products - недавно обсуждавшиеся товары

Теперь покажем внешний вид сайта при заходе на эту "главную" страницу.

Страница категории

Располагается в файле products.tpl шаблона и служит как для вывода товаров категории, так и товаров бренда (если таковые захотят использовать в интернет витрине, а в ином случае можно удалить из файла всё, что связано с переменной $brand).

<h1> {$category->name|default:''} {$brand->name|default:''} </h1>

{* карточки товаров *}
{if !empty($products)}
    {$rate = $currency->rate_from / $currency->rate_to}
    <div id="products">
        {foreach $products as $item}
            <div class="card">
                <h2> {$item->model} </h2>
                <img src="{$item->small_image}" />
                {foreach $item->variants as $v}
                    <b class="price"> {($v->discount_price * $rate)|string_format:'%d'} {$currency->sign} </b>
                {/foreach}
            </div>
        {/foreach}
    </div>

    {* пагинация страниц *}
    {if $total_pages > 1}
        {strip}
            {capture assign = 'url'}
                {$site}
                {if isset($category->url)}
                    {$category->url_path}{$category->url}/{if isset($brand->url)}filter_{$brand->url}/{/if}
                {elseif isset($brand->url)}
                    {$brand->url_path}{$brand->url}/
                {else}
                    catalog/{if isset($brand->url)}filter_{$brand->url}/{/if}
                {/if}
            {/capture}
        {/strip}
        <div id="pagination">
            {section name = 'pages' loop = $total_pages start = 0}
                {$p = $smarty.section.pages.index + 1}
                {if $p == $page + 1}
                    <span> {$p} </span>
                {else}
                    <a href="{$url}{if $p != 1}/page_{$p}{/if}{$filter_params|default:''|escape}"> {$p} </a>
                {/if}
            {/section}
            <a href="{$url}?show_all"> Все </a>
        </div>
    {/if}

{else}
    <p> Нет товаров. </p>
{/if}

Принцип работы файла Выводим оглавление списка - в данном случае им станет название категории/бренда. Затем сам список товаров из переменной $products и вслед за ним пагинация страниц.

Теперь покажем внешний вид сайта при заходе на эту страницу категории.

Стили

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

    /* ========== сброс стилей ========== */

    html, body, h1, h2, p, div, ul, li, a, img {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border: 0 solid;
        outline: 0 solid;
        display: block;
        margin: 0;
        padding: 0;
    }

    body {
        background: #fff;
        color: #000;
        font-family: Verdana, Tahoma, Arial;
        font-size: 10pt;
    }

        h1 {
            font-size: 13pt;
            font-weight: normal;
            margin: 10px 0;
        }

        h2 {
            margin: 10px 0;
        }

        p {
            margin: 10px 0;
        }

        ul ul {
            margin: 0 0 0 25px;
        }

            li {
                margin: 10px 0;
            }

        a {
            color: #000;
            text-decoration: none;
        }

        a:hover {
            color: #c00;
        }

    /* ========== колонки ========== */

    #wrapper {
        margin: 0 auto;
        width: 768px;
    }

        #header {
            background: #cef;
            border-bottom: #888 3px solid;
            padding: 20px;
        }

            #logo {
                background: #888;
                color: #fff;
                float: left;
                line-height: 30px;
                padding: 0 15px;
            }

            #phone {
                float: right;
                font-weight: bold;
                line-height: 30px;
            }

            #menu {
                line-height: 30px;
                margin: 0 0 0 40px;
                overflow: hidden;
            }

                #menu a {
                    float: left;
                    padding: 0 15px;
                }

                #menu a + a {
                    border-left: #888 1px solid;
                }

        #columns {
            display: table;
        }

            #categories {
                background: #fec;
                border-right: #888 1px solid;
                display: table-cell;
                vertical-align: top;
                padding: 20px;
                width: 250px;
                min-width: 250px;
                max-width: 250px;
            }

            #content {
                background: #cfc;
                display: table-cell;
                vertical-align: top;
                padding: 20px;
                width: 100%;
            }

        #footer {
            background: #fcf;
            border-top: #888 1px solid;
            padding: 20px;
        }

            #footer .phone {
                float: right;
            }

            #counters {
                display: inline-block;
                height: 1px;
                width: 1px;
                overflow: hidden;
                opacity: 0.01;
            }

                #counters * {
                    opacity: 0.01;
                }

            #footer span {
                color: #888;
                display: block;
                font-size: 8pt;
                margin: 10px 0 0 0;
            }

    /* ========== список товаров ========== */

    .info {
        border-bottom: #888 1px solid;
        margin: 0 0 15px 0;
        padding: 0 0 15px 0;
    }

    .more {
        overflow: hidden;
    }

        .more a {
            float: left;
            padding: 0 15px 0 0;
        }

        .more a + a {
            border-left: #888 1px solid;
            padding-left: 15px;
        }

    #products {
        overflow: hidden;
    }

        .card {
            background: #5a5;
            float: left;
            margin: 5px;
            height: 187px;
            width: 149px;
            overflow: hidden;
        }

            .card h2 {
                font-size: 8pt;
                font-weight: normal;
                height: 20px;
                line-height: 20px;
                margin: 0;
                padding: 0 10px;
                
            }

            .card img {
                height: 147px;
                width: 147px;
                margin-left: 1px;
            }

            .card .price {
                color: #c00;
                font-size: 8pt;
                font-weight: normal;
                height: 20px;
                line-height: 20px;
                padding: 0 10px;
            }

            .card .price + .price {
                border-left: #373 1px solid;
            }

    #pagination {
        margin: 10px 0 0 0;
        overflow: hidden;
    }

        #pagination a,
        #pagination span {
            background: #5a5;
            display: block;
            float: left;
            font-size: 8pt;
            margin: 5px;
            line-height: 24px;
            height: 24px;
            width: 34px;
            overflow: hidden;
            text-align: center;
        }

        #pagination span {
            background: #888;
        }