Здравствуйте! Я фрилансер Михаил Пачулли. У меня есть аккаунт на бирже FreelanceHunt и емейл pachulli84@gmail.com для прямой связи. Вместе с 2 проверенными в работе друзьями выполняю задания по сайтам, основная специализация - натяжка лендингов, натяжка многостраничных html-шаблонов на скрипты типа

• Wordpress - бесплатный блоговый движок
• Impera CMS - бесплатный движок интернет-магазина
• Simpla CMS - платный движок интернет-магазина
• Okay CMS - неофициальный клон Simpla CMS

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

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

Так выглядит на компьютере.

Конструктивные особенности

• Шапка выполнена в тёмном фоне:
  • цвет текста белый
  • подсветка зелёным
  • активный пункт жёлтым
  • счётчик оранжевым
• Порядок элементов:
  • логотип
  • пункты категорий
  • дополнительные пункты
• На узком экране:
  • пункты меню по умолчанию скрыты
  • разворачиваются гамбургер-кнопкой
  • снабжены тематическими иконками
  • пунктов ровно по числу корневых категорий
  • в конце 2 дополнительных: контакты и корзина
• На широком экране:
  • меню становится в линию
  • число пунктов ограничено от 1 до 5 зависимо от ширины
    • Это отключаемо удаление правила в стилях модуля.
  • все пункты без иконок
  • в конце 2 дополнительных с иконками: телефон и корзина
• Имена категорий длиннее 15 букв усекаются троеточием.
  • Это отключаемо удалением правила в стилях модуля.
• Иконка корзины имеет число товаров в ней.

Достоинства модуля

• Сделан по правилу "mobile first".
  
  

  Разработчик комментирует: Аж непривычно, когда до того работал с дизайнами Desktop First. А тут удаляешь из стилей модуля media-запросы - и видишь настоящий Mobile First, даже на настольном компьютере.

• Не используется Javascript, всё на чистом CSS.
• Seo оптимизация:
  • семантическая вёрстка
  • минимальный html-код
  • ссылки категорий имеют title целевой страницы
  • второстепенные ссылки закрыты nofollow
• Pagespeed оптимизация:
  • минификация html
  • минификация css
  • инлайнинг css в head страницы
• Поддержка полиглот техники мультиязычных страниц.

Благодарности

• FlatIcon.com - за бесплатные иконки.

Файловая структура

Я собрал модуль, чтобы встал сверху существующей структуры любого шаблона Impera CMS, свёрстанного на основе библиотеки Short Codes Helper. Прилагаю комплект из 20 иконок к товарным категориям.

• css
  • header.css
• html
  • modules
    • header.htm
• images
  • icons
    • cart.svg
    • phone.svg
    • topic-1.svg - смартфон
    • topic-2.svg - телевизор
    • topic-3.svg - часы
    • topic-4.svg - бриллиант
    • topic-5.svg - сумка
    • topic-6.svg - кубок
    • topic-7.svg - калькулятор
    • topic-8.svg - метла
    • topic-9.svg - фотоаппарат
    • topic-10.svg - видеокамера
    • topic-11.svg - принтер
    • topic-12.svg - медаль
    • topic-13.svg - книга
    • topic-14.svg - чашка
    • topic-15.svg - палитра
    • topic-16.svg - будильник
    • topic-17.svg - подарок
    • topic-18.svg - флаг
    • topic-19.svg - ключ
    • topic-20.svg - банкнота
  • logo.png

Установка в шаблон

• Используйте страницу админпанели "дизайн » Дизайны сайта » загрузить"
• Или скопируйте файлы модуля через ftp сверху вашего шаблона.
• Подключите модуль в требуемое место страничного tpl-макета такой командой:

  {modHeader}

Вуаля!

Исходный код вёрстки

Вот что находится сейчас в моём файле header.htm.

{* <!-- модуль: шапка --> *}{strip}

    {* <!-- ================================================================
    |                                                                      |
    |   Когда модуль подключен в какой-то макет, рисуемый на 1 шаге        |
    |   рендеринга страницы, то добавляем стили модуля в заголовочную      |
    |   секцию страницы, чтобы вывести стили в общем макете index.tpl на   |
    |   втором шаге рендеринга. И тут же выполняем pagespeed оптимизацию:  |
    |   имплантируем стили (минификация, инлайн).                          |
    |                                                                      |
    ================================================================= --> *}

{ifFirstRendering}
    {putOtherMeta}
        {implantCSS}
            <link rel="stylesheet" href="{theme}css/header.css">
        {/implantCSS}
    {/putOtherMeta}
{/ifFirstRendering}

    {* <!-- ================================================================
    |                                                                      |
    |   А если модуль подключен где-то в общем макете, то скорее всего     |
    |   заголовочная секция страницы уже сгенерирована и нам остается      |
    |   имплантировать стили модуля прямо по месту, где находится сейчас   |
    |   указатель рендеринга в теле общего макета.                         |
    |                                                                      |
    ================================================================= --> *}

{ifNotFirstRendering}
    {implantCSS}
        <link rel="stylesheet" href="{theme}css/header.css">
    {/implantCSS}
{/ifNotFirstRendering}

    {* <!-- ================================================================
    |                                                                      |
    |   Теперь начинаем верстку. Переключатель гамбургер-кнопки.           |
    |                                                                      |
    ================================================================= --> *}

<header>
    <menu>
        {setValue}
            switch-header-menu-{randomId}
        {/setValue}
        <input id="{value}" type="checkbox">

        {* <!-- ============================================================
        |                                                                  |
        |   Гамбургер-кнопка.                                              |
        |                                                                  |
        ============================================================= --> *}

        <div class="logo">
            <label for="{value}">
                <span></span>
            </label>

            {* <!-- ========================================================
            |                                                              |
            |   Логотип (с админской кнопкой "заменить").                  |
            |                                                              |
            ========================================================= --> *}

            <a title="{polyglot asAttribute=TRUE}
                          {siteName}
                      {/polyglot}" class="image" href="{site}{htmlLangMarker}">
                {modAdminUpload}
                <img src="{theme}images/logo.png" alt="">
            </a>
        </div>

        {* <!-- ============================================================
        |                                                                  |
        |   Перечисляем корневые категории. Только актуальные, то есть     |
        |   разрешенные к показу на сайте, плюс видимые классу текущего    |
        |   пользователя, плюс непустые или у которых включен флажок       |
        |   "информативная" (это страница просто текст без списка товаров).|
        |                                                                  |
        ============================================================= --> *}

        {enumCategories}
            {ifActual}
                <div class="topic-{num}" {activeCategory}>
                    <a title="{polyglot asAttribute=TRUE}
                                  {itemTitle}
                              {/polyglot}" href="{url}{htmlLangMarker}">
                        <img src="{theme}images/icons/topic-{num}.svg" alt="">
                        <span>
                            {polyglot}
                                {name}
                            {/polyglot}
                        </span>
                    </a>
                </div>
            {/ifActual}
        {/enumCategories}

        {* <!-- ============================================================
        |                                                                  |
        |   Мини корзина.                                                  |
        |                                                                  |
        ============================================================= --> *}

        <div class="cart">
            <a href="{site}cart{htmlLangMarker}" rel="nofollow">
                <img src="{theme}images/icons/cart.svg" alt="">
                <span>
                    {polyglot}
                        Корзина
                    {/polyglot}
                </span>
                <em>{cartQuantity}</em>
            </a>
        </div>

        {* <!-- ============================================================
        |                                                                  |
        |   Ссылка "Контакты".                                             |
        |                                                                  |
        ============================================================= --> *}

        <div class="contacts">
            <a href="{site}contacts{htmlLangMarker}" rel="nofollow">
                <img src="{theme}images/icons/phone.svg" alt="">
                <span>
                    {polyglot}
                        Контакты
                    {/polyglot}
                </span>
            </a>
        </div>

        {* <!-- ============================================================
        |                                                                  |
        |   Ссылка "Телефон".                                              |
        |                                                                  |
        ============================================================= --> *}

        <div class="phone">
            <a data-href="{phone asUrl=TRUE}" rel="nofollow">
                <img src="{theme}images/icons/phone.svg" alt="">
                <span data-value="{phone}"></span>
            </a>
        </div>
    </menu>
</header>