Руководство пользователя

Благодарим за интерес к коммерческому адаптивному шаблону Ornamentals или приобретение готового решения (так называемой сборки сайта) на основе этого тиражного шаблона. Он был признан качественным изделием в нише тем для магазинов розничной продажи некаталогизированного товара и потому взят на витрину имперского маркета готовых решений.

Шаблон разработан группой Elma Themes и является их второй работой для движка Impera CMS, в которой вебмастера испытывали систему на пригодность для сборки сайта в течение суток: шаблон был нарисован с нуля и сразу же по рисунку собран на основе фреймворка Bootstrap версии 3.3.7 и шаблонизационной библиотеки ShortCodes версии 2017.11.17.


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

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


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

О коде  »  Авторам шаблона и самим нравится краткий, ясно читаемый код. Потому что его легко поддерживать. В этом шаблоне присутствует как раз такой код. А версия применённой в шаблоне библиотеки ShortCodes Helper равна v.2017.11.17. Наверняка её возможностей хватит вам надолго, но в любой момент можете закачать в шаблон более свежую версию той библиотеки.

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

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

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



Некоторые термины в руководстве

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

Что такое шаблон сайта  »  Это дизайнерская тема для какой-либо системы управления сайтом. Так называемый внешний вид веб-сайта, который легко меняется путём установки нового шаблона за несколько элементарных шагов.

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

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

Что такое система управления  »  Это программная оболочка, на базе которой работает административная и клиентская стороны сайта. Так называемый движок, или на языке программистов - скрипт сайта. Иногда его именуют CMS, по первым буквам английского названия - Content Management System.

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


Что такое Bootstrap  »  Это бесплатный пакет унифицированных эталонов на языке HTML и стандарте CSS для упрощения адаптивной вёрстки сайта.

Разрабатывался представителями компании Twitter сначала для внутренних целей. А как открытая разработка был представлен общественности в августе 2011 года, когда в полной мере проявилась универсальность эталонов.

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

Что такое jQuery  »  Это бесплатная библиотека на языке JavaScript для упрощения доступа к атрибутам и контенту элементов веб-страницы, манипуляции ими (в том числе визуальной) с клиентской стороны, реализации асинхронной связи с серверной стороной сайта.

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

Была представлена общественности в январе 2006 года. Получила огромную популярность в силу простых правил записи и хороших начальных возможностях.

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

Была разработана имперской лабораторией в декабре 2016 года как абстрактная технология. А одно из воплощений под конкретную CMS получила в бесплатной библиотеке ShortCodes Helper.

Что такое Impera CMS  »  Это современная система управления сайтом, рекомендуемая для создания интернет-магазинов. Развивается под влиянием идей пользователей, поэтому содержит богатый функционал. Имеет развитую систему шаблонизации, темы создаются профессионалами.

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



Установка движка на ваш сайт

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


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

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

Установка состоит из 5 простых экранов. Ниже показаны их скриншоты (нажмите и удерживайте для просмотра увеличенного вида).


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

адрес сервера баз данных MySQL - обычно это localhost
имя базы данных, созданной для вашего сайта
логин MySQL-пользователя этой базы данных
пароль MySQL-пользователя
Подсказка: Подобные сведения вам должен был прислать хостинг-провайдер, когда регистрировали свой сайт.

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

Такой ключ запрашивается автоматически в центре лицензирования, и тут же заносится на изображённый экран скрипта установки. Вам остаётся только нажать кнопку Далее.

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




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

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

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

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

Щёлкните по названию шаблона, чтобы сделать его дизайном по умолчанию.



Строение шаблона

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

css
    bootstrap.min.css
    styles.css            «-- стили дизайна
    restyle.css           «-- редизайн под заказчика

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

fonts
    glyphicons-halflings-regular.eot
    glyphicons-halflings-regular.svg
    glyphicons-halflings-regular.ttf
    glyphicons-halflings-regular.woff
    glyphicons-halflings-regular.woff2
    Montserrat-Cyrillic
        Montserrat-Black.ttf
        Montserrat-BlackItalic.ttf
        Montserrat-Bold.ttf
        Montserrat-BoldItalic.ttf
        Montserrat-ExtraBold.ttf
        Montserrat-ExtraBoldItalic.ttf
        Montserrat-ExtraLight.ttf
        Montserrat-ExtraLightItalic.ttf
        Montserrat-Italic.ttf
        Montserrat-Light.ttf
        Montserrat-LightItalic.ttf
        Montserrat-Medium.ttf
        Montserrat-MediumItalic.ttf
        Montserrat-Regular.ttf
        Montserrat-SemiBold.ttf
        Montserrat-SemiBoldItalic.ttf
        Montserrat-Thin.ttf
        Montserrat-ThinItalic.ttf
        OFL.txt

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

html
    index.tpl             «-- тот самый каркас (общий макет страницы)
    catalog.htm           «-- макет "Главная страница"
    feedback.htm          «-- макет "Обратная связь"
    products.htm          «-- макет "Товары категории"
    product.htm           «-- макет "Товар"
    search.htm            «-- макет "Поиск"
    cart.htm              «-- макет "Корзина"
    order.htm             «-- макет "Оформленный заказ"
    missing_template.htm  «-- макет "Ошибка 404"
    price.htm             «-- макет "Прайс-лист"
    navigation.htm        «-- блок "Пагинация страниц"
    helper.php            «-- упоминавшаяся в начале библиотека ShortCodes
    helper-settings.php   «-- настройки хелпера (библиотеки)
    abstract              «-- макеты абстрактных страниц
        contacts.htm
        manual.htm        «-- текст этого макета вы сейчас читаете
        terms.htm
    email                 «-- макеты писем
        feedback-to-admin.htm
        feedback-to-user.htm
    sms                   «-- макеты СМС
        feedback-to-admin.htm
        feedback-to-user.htm
    modules               «-- всякие модули
        antispam.htm      «--     модуль "Антиспам терапия"
        banner.htm        «--     модуль "Баннер (сверху на главной)"
        cart.htm          «--     модуль "Информер корзины (справа вверху)"
        check404.htm      «--     модуль "Проверка неучтённых случаев Ошибка404"
        demo-body.htm     «--     модуль "Демо текст 1"
        demo-body-2.htm   «--     модуль "Демо текст 2"
        demo-remark.htm   «--     модуль "Демо ремарка (сверху сайта)"
        demo-themes.htm   «--     модуль "Другие дизайны (снизу сайта)"
        faq.htm           «--     модуль "ЧаВО (слева в обратной связи)"
        featureds.htm     «--     модуль "Товары конкретного типа (на главной)"
        feedback.htm      «--     модуль "Форма ввода обратной связи"
        footer.htm        «--     модуль "Подвал"
        head.htm          «--     модуль "Заголовки страницы"
        info.htm          «--     модуль "Информация о товаре (всплывающая)"
        links.htm         «--     модуль "Дополнительные ссылки (под списком товаров)"
        menu.htm          «--     модуль "Верхнее меню"
        metrics.htm       «--     модуль "Метрика поста (над фотографией или возле)"
        modal.htm         «--     модуль "Модальное окно Товар"
        none.htm          «--     модуль "Сообщение ТОВАРЫ НЕ НАЙДЕНЫ"
        pagination.htm    «--     модуль "Ссылка на каталог (вместо пагинатора)"
        product.htm       «--     модуль "Мини карточка товара"
        scripts.htm       «--     модуль "Клиентские скрипты"
        search.htm        «--     модуль "Форма поиска"
        search-history.htm«--     модуль "История поиска (внизу в поиске)"
        seo.htm           «--     модуль "Блок SEO текста страницы"
        socials.htm       «--     модуль "Социальные ссылки (на главной)"
        tags.htm          «--     модуль "Теги поста (под фотографией или возле)"
        tags-2.htm        «--     модуль "Облако тегов (внизу в поиске)"

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

images
    404.jpg
    banner-mainpage.jpg
    favicon.ico           «-- ярлыковая иконка
    loading.gif
    no-photo.png          «-- картинка на случай "Нет фото"
    thumbnail.jpg         «-- иконка шаблона (для админки)
    demo
        product-1.jpg     «-- демо картинки товаров
        product-2.jpg
        product-3.jpg
        product...jpg
        product-18.jpg
        manual...jpg      «-- картинки из руководства

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

js
    bootstrap.min.js
    jquery.min.js
    scripts.js            «-- клиентские скрипты

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



Благодарности и пожелания

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

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

jQuery - jquery.org
Bootstrap - getbootstrap.com

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

Google Web Fonts - www.google.com/fonts
Jan Kovarik - www.glyphicons.com

За тест адаптивности:

Responsivator - imperacms.ru/responsivator

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

Unsplash - unsplash.com

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

imperacms.ru/products/ornamentals - адаптивный шаблон Ornamentals для создания симпатичного и простого интернет-магазина украшений.

Кстати, в своём сообщении можете упомянуть заявление разработчика Impera CMS: он даст покупателю этого готового решению скидку 50 USD при условии, что тот предоставит ссылку на работу частного мастера или вебстудии, которая производит шаблоны хотя бы на уровне или лучше имперских (по чистоте вёрстки, функциональности, простоте кода, seo оптимизации, масштабируемости, наличию руководства пользователя и так далее).

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


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