Инструкции вебмастеру

Благодарим за интерес к улучшенной версии шаблона Simpla2. Его старый вариант существует в открытом виде в установочном пакете движка Simpla CMS линейки 2.x, где был выполнен по технологиям 2011 года.

Улучшенная версия шаблона получена переработкой того устаревшего варианта. Работы по модификации выполнялись с привлечением опыта мастеров в области создания простых и оптимизированных решений, кто работает сейчас с крупными системами, например с движком Impera CMS. В результате новый шаблон обрёл следующие качества:

  • Адаптивность к разным размерам экрана
  • Ещё более простой код макетов страниц
    • +   Поддержано и модульное строение
    • +   Интегрирован цензор-контроль
      •           например стирание запрещённых слов
      •           например замена http на https в старых постах
    • +   Реализован дополнительный функционал
  • Полноценная SEO оптимизация
    • +   Семантическая вёрстка макетов
    • +   PageSpeed оптимизация проверить
      •           динамическая, то есть работает на лету
      •           действует везде, не только на главной
      •           с минификацией стилей, скриптов, html
      •           с переносом стилей и скриптов в тело html
    • +   Предзагрузка prev/next-страниц списка
    • +   Автозапрет индексации не первых страниц списка
    • +   Автозапрет индексации технических страниц
  • Возможность лёгкой доработки функционала
    • +   Руководство вебмастера

Однако   Так как переработка шаблона выполнялась на кодовой основе имперского движка, где уже реализован ряд привлекательных технологий для вебмастера, например хелпер ShortCodes, то эта улучшенная версия шаблона просто не сработает на устаревшей кодовой основе Simpla CMS.

Поэтому её пользователям с легальной лицензией решено предоставить бесплатную лицензию Impera CMS. Если им хочется иметь хороший функционал, тогда пожалуйста, пусть берут бесплатную сборку - обновлённый симпловский шаблон на платформе Имперы.

Соглашение

Данная версия шаблона Simpla2 может использоваться только на сайте, владелец которого официально приобрёл лицензию Симплы для своего сайта. Проверка подлинности лицензии выполняется по показаниям соответствующего контрольного сервиса на сайте Simpla CMS.

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

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


Шаблон предоставляется в виде "как есть", без обязательств усовершенствовать или исправить любые типы ошибок, даже критические, если таковые обнаружатся позже.

Зачем переделывали?

По замыслу автора, появившаяся в 2009 году украинская разработка Simpla CMS должна была стать простым конструктором, с помощью которого опытные вебмастеры создавали бы сайты хоть на коленке. На практике получилось не совсем так, как задумывалось.

Движок почему-то облюбовали начинающие фрилансеры, что создало интересному продукту неприятную славу игрушки для дилетантов. Когда же и фрилансерам на глас вопиющего "обновите Симплу!" ответили закрытием темы, то всем дали ясный сигнал - ищите любовь на стороне.

А так как знания, технологии и опыт сайтостроения был сосредоточен к тому моменту в крупнейших российских и украинских CMS типа Bitrix, Owox, Impera и других, то брошенные владельцы сайтов стали искать помощи у специалистов других платформ. Часть этого потока доставалась и Impera CMS, всякий раз с той же самой просьбой - помочь доработать очередной велосипед от фрилансеров. Поэтому Импера решила дать обездоленным пользователям Симплы профессионально переработанный симпловский шаблон.


Следующая часть руководства представляет собой детальную инструкцию, как создать нормальный, легко поддерживаемый шаблон из дефолтной темы Simpla CMS.

Тут будут показаны блоки кода как для любителей полных возможностей сайта, так и зелёные блоки кода - для любителей минимализма: чем меньше возможностей и связанных с ними строк кода, тем лучше.




Как переделывали шаблон

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

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

Поэтому составитель данной вебмастерской инструкции опишет здесь процесс, как команда сборщиков выполняла модификацию дефолтного шаблона. Ещё составитель сразу указывает ссылки, где взять все установочные файлы получившегося изделия.


Скачать шаблонСкачать Имперу

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


  1. Для поддержки кратких тегов

    Итак, первым делом в папку html симпловского шаблона, где находятся файлы макетов разных страниц сайта, был помещён файл helper.php с последней версией библиотеки ShortCodes, которая была в тот момент доступна на сайте Имперы.

    Свежей версией в то время была версия 2017.11.18 библиотеки, она предоставила шаблону следующий набор кратких тегов. Ради компактной справки, составитель руководства собрал список предоставленных тегов в выпадающий список:

    Если вы встретите ниже какой-то непонятный тег в фигурных скобках, щёлкните выпадающий список - сразу найдёте в нём краткое описание такого тега. Ясно что подобного однострочного описания вряд ли хватит для всестороннего понимания действия тега, но по крайней мере вы получите общее представление о теге.

    Если позже вам понадобится обновить в шаблоне версию библиотеки ShortCodes, составитель руководства указывает прямую ссылку, где скачать библиотеку с имперского сайта. Новые версии отличаются лишь поддержкой большего количества кратких тегов. Поэтому не имеет смысла обновлять библиотеку в случае, когда больше не планируете улучшать шаблон.


    Скачать библиотеку

  2. Для статических страниц

    Как должно быть известно любому мастеру, работавшему с шаблоном Simpla CMS, симпловский макет page.tpl является макетом текстовой, или на сленге вебмастеров, статической страницы - условно назовём её секцией сайта. Так вот сборщик улучшенного шаблона переименовал файл этого макета в static_page.htm, а существовавший там грязный код вёрстки заменил краткими тегами.

    Получилось несколько красивых строк. Повторим их здесь, чтобы вы сразу понимали, какого уровня код записан в улучшенном шаблоне:

    {useSection}
    <h1 data-page="{id}">{name}</h1>
    <article>{body}</article>

    Сразу хотелось бы отметить, что все модернизаторы, кто привлекался к переработке шаблона Simpla2, делали это в свободное время и забесплатно. Поэтому работы происходили так долго. Однако все специалисты стремились записать бизнес-логику доставшихся им страничных макетов предельно просто, так чтобы она была интуитивно понятной. Поэтому составитель руководства не комментирует подробно назначение кратких тегов, а просто повторит своими словами сведения из выпадающего списка выше:

    • {useSection} - приказ тегам неявно работать с переменной секции сайта
    • {id} - вывести идентификатор записи
    • {name} - вывести название страницы
    • {body} - вывести описание (текстовое тело) страницы

    Простейший вариант

    Следует уточнить, использованный в коде атрибут data-page и ему подобные, которые ещё встретятся вам в коде следующих пунктов руководства, служат только для навесных редакторских инструментов администратора сайта, сообщая инструментам идентификатор редактируемой записи.

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

    {useSection}
    <h1>{name}</h1>
    <article>{body}</article>

    Полный вариант

    Когда навесные инструменты всё же хочется иметь, следует знать об одном бзике: не всякому интернет-магазину нравится "светить" в вёрстке клиентской стороны сайта настоящие идентификаторы своих страниц, особенно комментариев.

    • "Вот плевать мне на ваш чистый код! Сделайте так, чтобы конкуренты не вычислили постинг историю сайта по ИД-шкам", - и ничего тут не поделаешь, хозяин барин.

    Таким клиентам лучше чуть усложните код шаблона добавлением тега админской проверки, в который и будет заключён спорный атрибут. То есть атрибут появится только в момент, когда по сайту ходит авторизованный администратор. Например:

    {useSection}
    <h1 {ifAdmin}data-page="{id}"{/ifAdmin}>
        {name}
    </h1>
    <article>{body}</article>

    Проверяем

    Теперь составитель руководства даёт вам тестовую ссылку на живую демонстрацию, как выглядит некая статическая страница под действием этого макета.


    Пример страницы

  3. Для постов блога

    В симпловском шаблоне файл post.tpl является макетом поста - то есть отдельной записи блога. Условно назовём такую запись новостью. Её макет похож на макет рассмотренной только что статической страницы. Разница в том, что для блогового макета используется иная переменная и внизу есть блок комментариев.

    А также после заголовка поста сделано первое, пусть и мелкое, но всё же улучшение функционала - добавлен блок с метрикой поста. Чтобы вам было понятно, составитель руководства обозначил это улучшение зелёным прямоугольником в показанном ниже коде.

    Итак, поскольку речь в текущем пункте руководства идёт о макете новостного поста, то файл исходного макета был переименован сборщиком в news_item.htm, существовавший там грязный код вёрстки заменён краткими тегами. Получилась следующая последовательность строк кода:

    {useNews}
    <h1 data-post="{id}">{name}</h1>
    <div class="metric">
        <time>{date}</time>
        <span>{user}</span>
    </div>
    <article>{body}</article>
    {ifCommented}
        {modComments}
    {/ifCommented}

    Давайте на основе сведений из выпадающего выше списка тегов вспомним, что обозначает каждый использованный здесь тег:

    • {useNews} - приказ тегам неявно работать с переменной новости
    • {id} - вывести идентификатор записи
    • {name} - вывести название новости
    • {date} - вывести дату публикации
    • {user} - вывести ФИО автора
    • {body} - вывести текст новости
    • {ifCommented} - если запись разрешена к обсуждению
    • {modComments} - подключить сюда модуль комментариев

    Разберём принцип работы

    В первой строке кода видно, что остальным кратким тегам макета заявляется, какую переменную они должны неявно использовать - например в имперском движке это переменная $news_item, а в симпловском движке это переменная $post, а в каком-нибудь третьем движке переменная может быть названа ещё иначе. Подобные теговые декларации библиотеки ShortCodes как раз и придуманы с целью убрать из шаблона открытое упоминание каких-то переменных движка и тем самым сократить кодовые выражения, а также повысить портируемость шаблонов между системами.

    Но вернёмся к макету. Вторая и далее строки кода с помощью тех же кратких тегов, какие были использованы и в макете статической страницы, выводят ИД записи, название, дату, автора и текстовое тело поста.

    И наконец финальные строки кода проверяют, включена ли для этого поста возможность комментирования, и если включена, то подключают модуль списка комментариев, который сразу был вынесен сборщиком шаблона в отдельный модуль modules/comments.htm, так как похожая вёрстка повторяется ещё и в макете страницы товара.

    Простейший вариант

    {useNews}
    <h1>{name}</h1>
    <article>{body}</article>
    {ifCommented}
        {modComments}
    {/ifCommented}

    Проверяем

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


    Пример поста

  4. Поскольку в предыдущем пункте упоминалось о вынесении блока комментариев в отдельный модуль, давайте сразу рассмотрим, как устроен его файл modules/comments.htm. Вёрстка комментариев взята из того же блогового макета в симпловском шаблоне, только почищен грязный код.

    Получился следующий набор строк кода, где в первой части выводится дерево ветвей обсуждения, средняя часть обслуживает ситуацию ещё несуществующего обсуждения, а финальная часть представляет собой форму ввода комментария:

    <section class="comments">
        <a name="comments"></a>
        <h2>Комментарии</h2>
        {function showCommentsTree}
            <ul>
                {enumComments}
                    <li {activeComment}>
                        <a name="comment-{hashComment}">
                            ответить
                        </a>
                        <div>
                            {commentator}
                            <i>{date}</i>
                        </div>
                        <p>{comment}</p>
                        {ifHasDiscussion}
                            {showCommentsTree
                             comments = $item->discussion}

                        {/ifHasDiscussion}
                    </li>
                {/enumComments}
            </ul>
        {/function}
        {showCommentsTree}
        {ifNotComments}
            <div class="msg noitems">
                Пока нет комментариев!
            </div>
        {/ifNotComments}
        <form method="post" {activeRequestAgree}>
            <h2>Написать комментарий</h2>
            {ifMessage}
                <div class="msg success">
                    {message}
                </div>
            {/ifMessage}
            {ifError}
                <div class="msg error">
                    {error}
                </div>
            {/ifError}
            <textarea name="post_message">
                {valueMessage}
            </textarea>
            <div>
                <label>Ваше имя</label>
                <input value="{valueName}"
                       name="post_name"
                       type="text">
                <label>Защитный код</label>
                <div class="captcha">
                    <img src="captcha.jpg?unique={randomId}">
                </div>
                <input name="captcha" type="text">
            </div>
            <hr>
            <label>
                <input {activeRequestAgree}
                       name="agree"
                       type="checkbox">
                даю согласие на обработку моих данных
            </label>
            <hr>
            <input class="btn"
                   name="post_submit"
                   type="submit"
                   value="Отправить">
            <input value="{valueParentId}"
                   name="post_parent_id"
                   type="hidden">
            <input value="{valueCopystop}"
                   name="post_copystop"
                   type="hidden">
        </form>
    </section>

    Теперь перечислим теги библиотеки ShortCodes, которые были использованы в этом модуле:

    • {enumComments} - перечислить комментарии текущей ветви
    • {activeComment} - вывести атрибут selected у комментария, на который отвечают
    • {hashComment} - вывести хеш комментария для URL
    • {commentator} - вывести имя комментатора
    • {date} - вывести дату комментария
    • {comment} - вывести текст комментария
    • {ifHasDiscussion} - если комментарий имеет ветви
    • {ifNotComments} - если комментарии отсутствуют
    • {activeRequestAgree} - вывести атрибут checked, если есть флаг "согласен"
    • {ifMessage} - если форма принята успешно
    • {message} - вывести сообщение об успехе
    • {ifError} - если произошла ошибка
    • {error} - вывести сообщение об ошибке
    • {valueMessage} - вывести полученный текст поля "комментарий"
    • {valueName} - вывести полученный текст поля "имя"
    • {randomId} - вывести случайный ИД
    • {valueParentId} - вывести полученный код поля "ИД ветви"
    • {valueCopystop} - вывести код поля "контроль репостинга"

    Простейший вариант

    Если же вам достаточно элементарной схемы обсуждения, - то есть без украшательств типа ветвления (ответы), дат ответа, ссылок на комментарии (якорные хеши), проверки ситуаций (перекладывая на CSS), флажок согласия, контроль репостинга и так далее - то лишние теги и связанные с ними строки кода можно спокойно удалить. Тогда можно получить совсем простой код, например:

    <section class="comments">
        <h2>Комментарии</h2>
        <ul>
            {enumComments}
                <li>
                    <div>{commentator}</div>
                    <p>{comment}</p>
                </li>
            {/enumComments}
        </ul>

        <form method="post">
            <h2>Написать комментарий</h2>
            <textarea name="post_message">
                {valueMessage}
            </textarea>
            <div>
                <label>Ваше имя</label>
                <input value="{valueName}"
                       name="post_name"
                       type="text">
            </div>
            <hr>
            <input class="btn"
                   name="post_submit"
                   type="submit"
                   value="Отправить">
        </form>
    </section>


  5. Для листинга блога

    Симпловский макет blog.tpl относится к списку записей блога, он выводит листинг опубликованных на сайте новостей. Сборщик улучшенного шаблона переименовал файл этого макета в news.htm, существовавший там грязный код вёрстки заменил краткими тегами.

    Снова получилось несколько легко читаемых строк кода. Даже несмотря на то, что в этом макете было произведено следующее, уже значительное по объёму улучшение функционала. А именно в блоге появились: хлебные крошки, описание страницы над списком записей и её seo текст в конце списка, счётчик записей, сортировка по умолчанию/имени/дате, переключатель размера страницы и надписывание анкоров тайтлом целевой записи блога.

    <nav class="breadcrumbs">
        <a href="{site}">{company}</a><i></i>
        <span>Блог</span>
        <span>Страница {pageNum} из {pageCount}</span>
    </nav>
    <h1 data-aside="Найдено {found} шт">
        {nameSection}
    </h1>
    {ifNotPrevPage}
        <article>{bodySection}</article>
    {/ifNotPrevPage}

    {ifPrevPage}
        {noSeoText}
    {/ifPrevPage}
    {modSort}
    {pagination}
    <ul class="blog">
        {enumNews}
            <li>
                <strong data-post="{id}">
                    <a href="{url}" title="{itemTitle}">
                        {name}
                    </a>
                </strong>
                <time>{date}</time>
                <div class="annotation">
                    {annotation}
                </div>
            </li>
        {/enumNews}
    </ul>
    {pagination}

    Уже по традиции перечислим теги библиотеки ShortCodes, использованные в этом макете:

    • {site} - вывести URL корня сайта
    • {company} - вывести имя компании из настроек сайта
    • {pageNum} - вывести номер текущего листа
    • {pageCount} - вывести число листов списка
    • {found} - вывести число найденных постов
    • {nameSection} - вывести название секции (страницы) блога
    • {ifNotPrevPage} - если мы на первом листе списка
    • {bodySection} - вывести описание секции (страницы) блога
    • {ifPrevPage} - если мы на вторых листах списка
    • {noSeoText} - забыть SEO-текст страницы
    • {modSort} - подключить сюда модуль сортировки
    • {pagination} - подключить сюда модуль пагинации
    • {enumNews} - перечислить посты текущего листа списка
    • {id} - вывести идентификатор поста
    • {url} - вывести URL поста
    • {itemTitle} - вывести тайтл поста
    • {name} - вывести название поста
    • {date} - вывести дату публикации
    • {annotation} - вывести краткий текст поста

    Разберём принцип работы

    Начнём с первого блока кода - так называемые "хлебные крошки".

    • Здесь пустой тег <i> играет роль стрелки, соответственно её внешний вид перенесён в стили, чтобы была возможность перекрашивать в том числе вид межзвеньевых элементов.

      Ещё в первом звене привычное слово ГЛАВНАЯ заменено тегом, который выводит название компании, указанное вами в настройках сайта. А последнее звено для уникализации крошек сделано так, чтобы выводило текущий номер листаемой страницы и вообще сколько этих страниц есть.

      Кстати, ещё одну небольшую модификацию хлебных крошек рассмотрим ниже в макете списка товаров.

    Продолжим рассматривать макет - на очереди блок заголовка.

    • Его код примечателен тем, что общее количество найденных блоговых постов выводится в атрибут data-aside заголовка и затем уже стилем CSS выравнивается по правому краю напротив заголовка.

    А следующий за ним блок кода - это описание.

    • Блок примечателен тем, что выводит текст описания страницы, выполняя типичную SEO-проверку: для исключения дублирующегося контента выводить описание только на первой странице списка (то есть когда нет Previous Page - так называют предыдущий лист) и удалять seo-текст на вторых страницах списка (то есть когда есть Previous Page).

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

    Теперь рассмотрим финальную часть макета записей блога.

    • Здесь сначала подключается модуль сортировки, местоположение которому было отведено в папке модулей под именем modules/sort.htm - на самом же деле, вёрстка этого модуля существовала только в макете списка товаров, но с целью повторения в блоге была вырезана из того макета как отдельная единица шаблона.

      Затем над списком постов и под ним выводится разметка пагинации страниц, которая в силу повторяемости тоже является отдельным файлом шаблона navigation.htm - ему посвящён пункт 7. А между пагинацией видим, что выводится сам список записей блога.

      Обратите внимание, что согласно рекомендации SEO, когда мы последовательно перечисляем карточки записей блога, то выводим название статьи в тексте ссылки, а тайтл целевой страницы выводим в тайтле ссылки.

    Простейший вариант

    Давайте порадуем и любителей супер лёгкой вёрстки. Вот вам тот же макет листинга блога, но без лишнего функционала:

    {useSection}
    <h1>{name}</h1>
    <article>{body}</article>
    <ul class="blog">
        {enumNews}
            <li>
                <strong>
                    <a href="{url}">{name}</a>
                </strong>
                <time>{date}</time>
                <div class="annotation">
                    {annotation}
                </div>
            </li>
        {/enumNews}
    </ul>
    {pagination}

    Проверяем

    Ну и вот вам тестовая ссылочка на начальную страницу воображаемого блога на демонстрационном сайте Имперы.


    Пример блога

  6. Так как в предыдущем пункте упоминалось подключение модуля modules/sort.htm, который служит формой выбора сортировки постов и размера одного листа списка, давайте рассмотрим строки кода этого модуля:

    <form action="{requestUri nopages=TRUE}" class="sort">
        {enumSorts}
            <a data-value="{idx}" {activeSort}>
                {item}
            </a>
        {/enumSorts}
        <input value="{sortMethod}"
               name="sort_method"
               type="hidden">
        <input value="0"
               name="sort_descending"
               type="hidden">
        <input value="0"
               name="sort_laconical"
               type="hidden">
        <label>
            На странице
            <select name="page_size">
                {enumSizes}
                    <option value="{item}" {activeSize}>
                        {item} шт.
                    </option>
                {/enumSizes}
            </select>
        </label>
    </form>


  7. Симпловский файл pagination.tpl представляет собой макет пагинации, то есть листателя страниц. Сборщик улучшенного шаблона переименовал файл этого макета в navigation.htm, существовавший там грязный код вёрстки заменил краткими тегами. Опять получился очень простой код:

    <nav class="pagination">
        <span>
            {enumPages}
                <a href="/{item}" {activePage} {ellipsisPage}>
                    {num}
                </a>
            {/enumPages}
        </span>
        {ifAllPage}
            <a href="/{urlAllOnPage}">все сразу</a>
        {/ifAllPage}
        {ifPrevPage}
            <a class="prev-page" href="/{urlPrevPage}">
                ←назад
            </a>
        {/ifPrevPage}
        {ifNextPage}
            <a class="next-page" href="/{urlNextPage}">
                вперед→
            </a>
        {/ifNextPage}
    </nav>
    {putOtherMeta}
        {ifPrevPage}
            <meta name="Robots" content="noindex, follow">
            <link rel="prev" href="/{urlPrevPage}">
            <link rel="prefetch" href="/{urlPrevPage}">
        {/ifPrevPage}
        {ifNextPage}
            <link rel="next" href="/{urlNextPage}">
            <link rel="prefetch" href="/{urlNextPage}">
        {/ifNextPage}
    {/putOtherMeta}

    Простейший вариант

    Здесь мы просто выводим ссылки на листаемые страницы. Классика, никаких кнопок более.

    <nav class="pagination">
        {enumPages}
            <a href="/{item}" {activePage}>
                {num}
            </a>
        {/enumPages}
    </nav>


  8. Для главной страницы

    Почти любой фрилансер из сообщества Simpla CMS знает, что симпловский макет main.tpl является макетом главной страницы, он выводит несколько ознакомительных листингов по типам товаров.

    Чтобы разместить такой же макет в улучшенной версии Simpa2, сборщик шаблона переименовал файл симпловского макета в catalog.htm, а существовавший там грязный код вёрстки заменил краткими тегами.

    Причём фрагмент вёрстки, повторяющийся несколько раз в том макете (а также в макете листинга товаров категории) и отвечающий за вывод карточки товара, сразу был вынесен в отдельный модуль modules/product.htm. Отчего размер кода шаблона заметно сократился:

    {useSection}
    <h1 data-page="{id}">{name}</h1>
    <article>{body}</article>
    <h2>Рекомендуемые товары</h2>
    <ul class="products tiny">
        {enumFeatureds max=6}
            {modProduct}
        {/enumFeatureds}
    </ul>
    <section class="subarticle">
        тут некий промо текст
        между блоками товаров
    </section>
    {getLasts count=6}
    <h2>Новинки</h2>
    <ul class="products tiny">
        {enum}
            {modProduct}
        {/enum}
    </ul>

    Разберём принцип работы

    Здесь первые три строки кода похожи на макет статической страницы, который мы рассматривали выше в пункте 2. То есть выводят заголовок страницы и её собственный текст описания, если такой был заполнен в админпанели при редактировании главной.

    Следующие за первыми строки кода выводят блок из максимум 6 рекомендуемых товаров - то есть тех товаров, которые мы отметим в админпанели флажками "хит продаж", "акция", "скоро в продаже" и так далее.

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

    А за ним находится блок, который получает список из 6 последних добавленных товаров и выводит их под видом новинок.

    Проверяем

    И снова вот вам тестовая ссылочка на главную страницу демонстрационного сайта.


    Пример главной

  9. Для поиска товаров

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

    Таким образом, по примеру симпловского макета списка товаров, сборщик создал файл search.htm следующего содержания:

    <nav class="breadcrumbs">
        <a href="{site}">{company}</a><i></i>
        <a href="products">Каталог</a><i></i>
        <span>Поиск</span>
        <span>Страница {pageNum} из {pageCount}</span>
    </nav>
    <h1 data-aside="Найдено {found} шт">
        {searchTitle}
    </h1>
    {pagination}
        <ul class="products">
            {enumSearch}
                {modProduct}
            {/enumSearch}
        </ul>
    {pagination}
    {ifNotSearch}
        <div class="msg noitems">
            Товары не найдены!
        </div>
    {/ifNotSearch}

    Какие краткие теги использованы в макете:

    • {site} - вывести URL корня сайта
    • {company} - вывести имя компании из настроек сайта
    • {pageNum} - вывести номер текущего листа
    • {pageCount} - вывести число листов списка
    • {found} - вывести число найденных постов
    • {searchTitle} - вывести заголовок страницы поиска
    • {pagination} - подключить сюда модуль пагинации
    • {enumSearch} - перечислить товары текущего листа поиска
    • {modProduct} - подключить сюда модуль карточки товара
    • {ifNotSearch} - если товары не найдены

    Разберём принцип работы

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

    Простейший вариант

    Тут мы выводим заголовок поиска, список товаров и пагинацию под ним. Проверку ситуации "товары не найдены" переложили на CSS-правило, созданное в стилях для класса alertable - он обращает вид пустого тега в указанное сообщение.

    <h1>{searchTitle}</h1>
    <ul class="products alertable">
        {enumSearch}
            {modProduct}
        {/enumSearch}
    </ul>
    {pagination}

    Проверяем

    А вот тестовая ссылка для поиска слова "laser" на демонстрационном сайте Имперы.


    Пример поиска

  10. Для корзины

    cart_informer.tpl служит выводу состояния корзины в шапке сайта. Используется также при ajax-добавлении товара в корзину.

    Файл этого блока разместили в папке визуальных модулей, переименовав файл в modules/cart.htm. Существовавший там грязный код вёрстки заменили краткими тегами. Получилось несколько простеньких строк кода:

    {ifCart}
        В <a href="cart">корзине</a>
        {cartQuantity} товаров
        на {cartTotal} {sign}
    {/ifCart}
    {ifNotCart}
        Корзина пуста
    {/ifNotCart}

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

    Второй блок кода обслуживает противоположную ситуацию - когда корзина пустая.



  11. Для несуществующих страниц

    Поскольку в симпловском шаблоне нет отдельного макета для ошибочных ситуаций, то сборщик улучшенного шаблона добавил макет missing_template.htm, который отвечает за вид сайта при возникновении Ошибка404. Она случается, когда обратились к несуществующей странице или в шаблоне отсутствует макет, связанный с такой страницей.

    Посмотрим код этого макета, снова всё получилось элементарным:

    {header404}
    {putOtherMeta}
        <meta name="Robots" content="noindex, follow">
    {/putOtherMeta}
    {setTitle}Страница не найдена!{/setTitle}
    {noMetaDescription}
    {noMetaKeywords}
    <h1>{title}</h1>
    <article>
        тут некий текст
        о ситуации 404
    </article>

    Какие краткие теги использованы в макете:

    • {header404} - отправить заголовок ошибки 404
    • {putOtherMeta} - добавить фрагмент в накопитель мета тегов
    • {setTitle} - установить тайтл страницы
    • {noMetaDescription} - очистить мета описание страницы
    • {noMetaKeywords} - очистить мета ключевые слова страницы
    • {title} - вывести тайтл страницы

    Разберём принцип работы

    Здесь первая строка посылает браузеру серверный заголовок кода 404. Следующие строки помещают noindex-инструкцию в мета теги страницы, согласно рекомендации SEO: запретите индексировать технические страницы, но позвольте follow по ссылкам на таких страницах.

    Следующие строки кода устанавливают тайтл страницы и сбрасывают её мета описание и ключевые слова. И в конце выводится заголовок и текстовое тело страницы.

    Простейший вариант

    Подобное упрощение основано на соображении, что при отправке сервером кода 404, тело страницы не кешируется браузером и игнорируется поисковиком.

    {header404}
    <h1>Страница не найдена!</h1>
    <article>
        тут некий текст
        о ситуации 404
    </article>

    Проверяем

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


    Пример 404

  12. Для абстрактных страниц

    Допустим, помимо типичных страниц, вы захотите использовать на сайте некие лендинги, брендированные страницы и прочие абстракции, контент которых по какой-то причине не хотелось бы хранить в базе данных сайта.

    Как раз такой возможностью и воспользовался сборщик улучшенного шаблона, чтобы создать на сайте страницу "Инструкции вебмастеру". Сборщик просто добавил в папку абстракций шаблона макет abstract/manual.htm, который отвечает за вид данной абстракции. Покажем код этого макета:

    {ifNotDemo}
        {modError}
    {/ifNotDemo}
    {ifDemo}
        {setTitle}ваш тайтл{/setTitle}
        {setMetaDescription}ваш мета{/setMetaDescription}
        {setMetaKeywords}ваши, ключи{/setMetaKeywords}
        <nav class="breadcrumbs">
            <a href="{site}">{company}</a><i></i>
            <span>Разное</span>
            <span>{title}</span>
        </nav>
        <h1>{title}</h1>
        <article>
            тут некий текст
            инструкций
        </article>
    {/ifDemo}

    Разберём принцип работы

    Здесь первые строки кода блокируют появление этой абстрактной страницы на вашем реальном сайте, если забудете удалить макет такой страницы из шаблона. То есть если сайт работает в настоящем режиме, тогда вместо страницы показывается модуль ошибки 404 (его файл missing_template.htm мы рассматривали выше в пункте 11).

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


Следующая часть руководства посвящена ответам на вопросы, которые будут задавать читатели.




Как вывести Недавно покупали

Предположим, вы хотели бы вывести на странице сайта не более 3 первых товаров из списка недавно покупавшихся. Тогда необходимо разместить в желаемом месте макета страницы следующий фрагмент кода:

{getFeatureds mode=ordered
              count=3
}

<ul class="products tiny">
    {enumProducts}
        {modProduct}
    {/enumProducts}
</ul>

Для тех, кому по должности интересно знать, как это работает, поясним принцип действия показанного фрагмента кода:

  1. Сначала с помощью тега getFeatureds и неких его настроечных параметров мы получили список нужных товаров. Вот задействованные параметры:
    • mode - какой тип товаров хотим получить, например
      • ordered - недавно покупавшиеся
      • hit - отмеченные флажком "хит продаж"
      • commented - отмеченные флажком "разрешен к обсуждению"
      • awaited - отмеченные флажком "скоро в продаже"
      • newest - отмеченные флажком "новинка"
      • new - добавленные за полмесяца или с флажком "новинка"
      • actional - отмеченные флажком "акция"
      • discount - с указанной прежней ценой
    • count - сколько штук хотим получить
  2. Далее с помощью блочного тега enumProducts последовательно перечислили товары полученного списка.
  3. А благодаря тегу modProduct каждый перечисленный товар вывели с помощью модуля мини карточки товара. Напомним, вёрстку этой карточки мы разместили в файле modules/product.htm, как было упомянуто выше в главе о переделке шаблона.

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

  • 3.6″ MP3/MP4 - видеоплеер (Сенсорный дисплей, 8GB)3.6″ MP3/MP4 - видеоплеер (Сенсорный дисплей, 8GB)
    3.6″ MP3/MP4 - видеоплеер (Сенсорный дисплей, 8GB)

    - “МР5″ MP3/MP4 портативный музыкальный и видео-проигрыватель
    - 3,6 дюйма энергичного цвета с сенсорным экраном
    - Встроенные в флэш-памяти 8GB хранения (не расширяемая)
    - Встроенные динамики для воспроизведения звуков и музыки без наушникиков

    5 180 руб
  • Лазерная указка (200mW Red laser, 2xCR2 (15270)) (арт. 11315)Лазерная указка (200mW Red laser, 2xCR2 (15270))
    Лазерная указка (200mW Red laser, 2xCR2 (15270))

    - Уникальный высокомощный красный лазер
    - Мощность, 200mW
    - Питание от 2хCR2 (15270) батареи
    - Фокусировка объектива

    3 8693 482 руб
    6 7626 559 руб
  • Машинка для удаления катышковМашинка для удаления катышков
    Машинка для удаления катышков

    Снимает катышки с изделий, выполненных из любых трикотажных и других материалов (шерсть, хлопок, синтетика), работает от двух пальчиковых батареек.

    918 руб
    983 руб
    1 114 руб

Остались вопросы?

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


Задать вопрос