{* *}{strip} {putOtherMeta} {/putOtherMeta} {$title = 'Руководство пользователя' scope=global} {$keywords = '' scope=global} {$description = '' scope=global}

{title}

Благодарим за интерес к бесплатному шаблону {themeName}. Его начальная, коммерческая версия создана дизайнером Unvab и разработана nKdev. А бесплатную вариацию вебмастер Максим Пилавов адаптировал для потребителей современных движков и веб-технологий. Поэтому адаптация выполнялась под систему Impera CMS на основе ShortCodes - техника разметки алгоритма генерации контента с помощью простых тегов, расставленных в html-макете таких страниц.

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

В демонстрируемом здесь шаблоне использован билд v.{shortCodesVersion} программной реализации словаря ShortCodes под конкретную CMS, в данном случае Имперу. И этот билд поддерживает следующие команды словаря:

А сам билд представлен файлом helper.php в шаблоне. Для обновления словаря, то есть поддержки новых команд, следует закачать вместо указанного только что файла новую версию ShortCodes Helper - так называется реализация словаря под имперский движок..

Соглашение

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

  • Продавать этот шаблон.
  • Изготавливать на основе шаблона другие модификации на продажу.

Поддержка, консультация по бесплатным шаблонам отсутствует. Просьбы что-либо доработать в шаблоне не рассматриваются.


Как установить движок

Прежде всего необходимо скачать с официального сайта Impera CMS скрипт установки - это файл imperacms.ru/impera_cms.zip. Он представляет собой архив, который следует распаковать на свой компьютер. Тогда в папке компьютера, куда развернули этот архив, появятся следующие файлы:

  • install.php - непосредственно скрипт установки
  • ImperaCMS_sources.zip - так называемое ядро движка

Эти два файла необходимо скопировать в корень своего сайта, например с помощью файлового менеджера в панели управления хостингом. Затем нужно открыть в браузере страницу http://ваш.сайт/install.php, после чего следовать инструкциям скрипта установки.

Установка состоит из 5 простых экранов. На одном из них от вас потребуются такие сведения:

  • адрес сервера баз данных MySQL - обычно это localhost
  • имя созданной базы данных для вашего сайта
  • логин MySQL-пользователя этой базы данных
  • пароль MySQL-пользователя

Эти сведения вам должен был прислать хостинг-провайдер, когда регистрировали свой сайт.

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


Как установить шаблон

Когда движок сайта установлен, теперь можно перейти к загрузке шаблона. Сначала его надо скачать в виде архива - это файл imperacms.ru/files/media/Snow.zip (кому интересно, файловое содержимое архива перечислено в следующей главе).

Далее перейдите в админпанели сайта на страницу дизайн » Дизайны сайта. Там в правом верхнем углу есть ссылка загрузить, которая относится к блоку Дизайны клиентской стороны. Нажмите эту ссылку.

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

Опять показали скриншот экрана установки, и снова всё выполняется парой простых действий.


Из чего состоит шаблон

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

Условно шаблон поделен на 5 подпапок. В первой размещаются так называемые стилевые файлы.

{/strip}
css
    combined.css{strip}
                        

В следующей подпапке собраны все шрифты, которые используются в дизайне. Очень часто подобные ресурсы, чтобы не хранить их у себя на сайте и не заботиться обновлением, просто подключают с внешних хранилищ наподобие Google Web Fonts. Однако владельцам магазинов как правило не важно обновление шрифтов, а кроме того ценится независимость от сторонних хранилищ. Поэтому копии шрифтов размещают в шаблоне и грузят только со своего сайта.

{/strip}
fonts
    fontawesome-webfont.eot
    fontawesome-webfont.svg
    fontawesome-webfont.ttf
    fontawesome-webfont.woff
    fontawesome-webfont.woff2
    OpenSans-Bold.ttf
    OpenSans-Regular.ttf
    Pe-icon-7-stroke.eot
    Pe-icon-7-stroke.svg
    Pe-icon-7-stroke.ttf
    Pe-icon-7-stroke.woff
    Raleway-Bold.ttf
    Raleway-Medium.ttf
    Raleway-Regular.ttf{strip}
                        

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

{/strip}
html
    abstract
        comments.htm      «-- содержит заглушку
        discount.htm
        manual.htm        «-- текст этого макета вы сейчас читаете
    email
        callme-to-admin.htm
        callme-to-user.htm
        feedback-to-admin.htm
        feedback-to-user.htm
        login-to-admin.htm
        login-to-user.htm
        registration-to-admin.htm
        registration-to-user.htm
    modules               «-- всякие модулёчки
        body.htm
        check404.htm
        comments.htm
        demo-themes.htm
        feedback.htm
        filter.htm
        news.htm
        photos.htm
        product.htm
        search.htm
        seo.htm
        tags.htm
        use-variable.htm
    sms
        callme-to-admin.htm
        callme-to-user.htm
        feedback-to-admin.htm
        feedback-to-user.htm
        login-to-admin.htm
        login-to-user.htm
        registration-to-admin.htm
        registration-to-user.htm
    account.htm           «-- содержит заглушку
    article.htm
    articles.htm
    callme.htm            «-- содержит заглушку
    cart.htm              «-- содержит заглушку
    catalog.htm
    feedback.htm
    index.tpl             «-- тот самый каркас (общий макет страницы)
    login.htm             «-- содержит заглушку
    missing_template.htm
    navigation.htm
    news.htm
    news_item.htm
    order.htm             «-- содержит заглушку
    password_remind.htm   «-- содержит заглушку
    price.htm
    product.htm
    products.htm
    registration.htm      «-- содержит заглушку
    search.htm
    sitemap.htm           «-- содержит заглушку
    static_page.htm
    helper.php            «-- упоминавшаяся реализация ShortCodes
    email_notifyme_confirm.htm
    email_order_payment_to_admin.htm
    email_order_payment_to_user.htm
    email_order_to_admin.htm
    email_order_to_user.htm
    email_password_remind.tpl
    sms_order_change_to_user.htm
    sms_order_payment_to_admin.htm
    sms_order_payment_to_user.htm
    sms_order_to_admin.htm
    sms_order_to_user.htm{strip}
                        

Следующая подпапка содержит картинки, используемые в дизайне. В её подпапке demo собраны демонстрационные картинки товаров, брендов, новостей и статей. Такие картинки видны только на демо сайте (или в демо режиме). Они демонстрируются случайным образом при каждой загрузке страницы, чтобы вы могли в общих чертах понять, как выглядит сайт при некотором воображаемом наполнении графикой.

{/strip}
images
    demo
        article-1.jpg
        ...
        article-4.jpg
        brand-1.jpg
        ...
        brand-16.jpg
        manual-module-1.jpg
        ...
        manual-module-3.jpg
        manual-setup-1.jpg
        ...
        manual-setup-6.jpg
        news-1.jpg
        ...
        news-4.jpg
        product-1.jpg
        ...
        product-30.jpg
    about-me-signature.png
    bg-feedback.jpg
    bg-home.jpg
    bg-menu.jpg
    bg-page404.jpg
    bg-pattern.jpg
    bg-search.jpg
    bg-static-page.jpg
    favicon.png
    logo.png
    logo-light.png
    map.jpg
    no-photo.png
    thumbnail.jpg{strip}
                        

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

{/strip}
js
    combined.js{strip}
                        

Как устроены модули

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

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

Например, в шаблоне Snow идентичный по разметке текст вступительного описания выводится и на страницах разделов, и в списке публикаций блога, и в списке обзоров. Так вот там мы поставили тег {modBody}, а повторяющийся кусок вынесли в файл html/modules/body.htm. Вот распечатка этого файла:


Распечатанный код представляет собой смесь обычных:

  • HTML-тегов - для разметки элементов
  • тегов словаря ShortCodes - для указаний где какие сведения вывести, например
    • {body} - показать текст, который менеджер ввёл в админпанели как полное описание этой страницы

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

  • Начнём с документации:
    • {* *} - в таких скобках пишут комментарий для личных целей
  • Теперь кое-что из оптимизации:
    • {strip} - минифицировать все строки ниже, то есть склеить в одну, удалив пустые строки, символы перевода, ведущие и замыкающие пробелы
  • А вот это уже чистая защита "от дурака":
    • {modUseVariable} - подключить в этом месте наш модуль html/modules/use-variable.htm, чтобы он разобрался, а есть ли вообще видимые нам сведения
    • {ifHasBody} - вывести этот фрагмент, если в доступных нам сведениях присутствует непустой текст описания страницы

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

Например модуль фильтра - это же обычный HTML, смотрите распечатку кода из файла html/modules/filter.htm:

Притом анимационная составляющая работы фильтра обеспечена чудесным плагином jQuery Isotope, а наполнение значениями свойств реализовано с помощью функции initFilter(), которая помещена в тот же файл скриптов js/combined.js что и плагин Isotope. В сущности работа функции, инициализирующей фильтр, состоит:

  • в пробегании по мини карточкам товаров
  • считывании из карточек следующих атрибутов
    • data-filter-category - название раздела
    • data-filter-brand - название бренда
    • data-filter-properties - список характеристик, перечисленных через вертикальную черту
  • занесении собранных позиций в соответствующие изначально пустые списки
    • UL.nk-isotope-filter.type1 - разделы
    • UL.nk-isotope-filter.type2 - вендоры
    • UL.nk-isotope-filter.type3 - свойства

Здесь следует сразу же показать, как устроен модуль мини карточки товара - это файл html/modules/product.htm в шаблоне. Вот распечатка этого файла:


Поясним значения тегов, вот эти выводят:

  • {name} - название товара
  • {itemCategory} - категория товара
  • {itemBrand} - бренд товара
  • {url} - адрес страницы товара
  • {cartUrl} - ссылка для добавления товара в корзину
  • {thumb} - маленькая фотография товара

Эти служат для вывода атрибутов, которые стилизуются под флажки:

  • {hit} - выведет атрибут data-hit, если товар помечен менеджером как "хит продаж"
  • {newest} - выведет атрибут data-newest, если товар помечен как "новинка"
  • {actional} - выведет атрибут data-actional, если товар помечен как "акционный"

А эти помогают вывести варианты товара:

  • {enumVariants} - перечислить варианты товара
  • {price} - вывести цену (в текущей валюте)
  • {sign} - знак текущей валюты

Страница Ошибка 404

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

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


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

За картинки, фотографии и прочие графические материалы:

  • behance.net
  • shutterstock.com
  • mockupworld.co
  • graphicburger.com
  • freebiesbug.com
  • unsplash.com

За шрифты, иконки и значки:

  • Google Web Fonts - https://www.google.com/fonts
  • http://themes-pixeden.com/font-demos/7-stroke/
  • Font-Awesome - https://github.com/FortAwesome/Font-Awesome

За средства разработки:

  • jQuery - https://github.com/jquery/jquery
  • Bootstrap - https://github.com/twbs/bootstrap/tree/v4-dev
  • ShortCodes Helper - http://imperacms.ru/short-codes-helper
  • GSAP - https://github.com/greensock/GreenSock-JS
  • Jarallax - https://github.com/nk-o/jarallax
  • Isotope - https://github.com/metafizzy/isotope
  • Flickity - https://github.com/metafizzy/flickity
  • Hammer.js - https://github.com/hammerjs/hammer.js
  • nanoScrollerJS - https://github.com/jamesflorentino/nanoScrollerJS
  • Tether - https://github.com/HubSpot/tether

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


Дискламация

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