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


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

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

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

Быстро-ссылки: Для быстрой пробы основных и всплывающих страниц сайта мы расположили сбоку все тестовые ссылки в рамках дефолтной демонстрационной базы данных, присутствующей сейчас на демо сайте. Щёлкайте их поочерёдно, каждая откроется в боковом окне.

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

Начальная заготовка будущего шаблона была исполнена на фреймворке Bootstrap v.3.3.7 в виде статического многостраничного HTML-макета с так называемыми демонстрационными Lorem-Ipsum-текстами, то есть выдуманными с потолка ради какого-то заполнения блоков воображаемых страниц.

Далее HTML-заготовку разрезали на кусочки - получились этакие воображаемые модули, их разместили по соответствующим папкам будущего шаблона. Затем в вёрстке модулей были проставлены теги ShortCodes, чтобы вместо Lorem-Ipsum-текста подставлялась настоящая информация из CMS - то есть движка сайта.

И в конце работы дизайнер-стилист чуть подкрасил использованную стандартную bootstrap-тему так, чтобы стили получившегося шаблона выглядели похоже на понравившуюся ребятам тему Flat UI Kit от DesignModo.
Бонус: Стилист приложил в перекрасочные стили второй вариант дизайна шапки и подвала сайта. Этот вариант виден при наведении курсора мышки на указанные элементы, а на планшете - достаточно прикоснуться к элементам.

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


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

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

Бонус
Авторы шаблона уже провели в его файлах всю грязную работу по доработкам поисковой оптимизации шаблона.
Файлы
Кстати, проводимые исследования показывают, что оценка сервиса PageSpeed Insights не оказывает сколько-нибудь значимого влияния на ранжирование сайта в поиске.

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

Чтобы уберечь вас от этих лишних и бесполезных трат, шаблон BookSeller уже оптимизирован под требования PageSpeed.

Посмотрите результат теста по ссылке - там единственное нарекание: сократить время ответа от сервера (что характерно для демо сайтов с их естественной высокой нагрузкой и решается включением серверного кеша в админпанели сайта или выбором нормального хостингового тарифа - тогда оценка получилась бы 100 из 100).
Tест PageSpeed

SEO характеристики


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

Вот список seo-правок, сразу внедрённых авторами шаблона на ваш сайт:

H1 = Единственный на странице и равен её названию, которое вы ввели в админпанели во время редактирования такой страницы. Подзаголовки центральных частей контента, если такие требуются по специфике страницы, сделаны тегом H2. Подзаголовки в боковых второстепенных блоках сделаны тегом H6.
Этот пункт порождает уже ставшее типичным требование для контент-менеджера: не пользоваться тегом H1 при написании текстовки страниц, пусть начинает с тега H2.

Главный текст = На каждой странице, контент которой предполагается пускать в индексацию (например категория, товар, публикация блога) - там главный текст, то есть который вы ввели в админпанели как текст полного описания страницы, становится обёрнут тегом <main>, чтобы обозначить поисковому роботу, где находится важнейшая часть контента. Побочные части страницы обёрнуты в семантические теги <header> - шапка, <nav> - навигация, <menu> - меню, <aside> - второстепенное, <footer> - подвал.
Впрочем, семантическая вёрстка не отменяет правило: контент - король продвижения, качество контента - решающий фактор из реализуемых на стороне сайта.

Анкоры = В верхнем меню, меню категорий слева, мини карточках листинга товаров или блога в центре - там везде текст анкора равен названию соответствующего объекта (то есть страницы, категории, товара, публикации), а тайтл анкора равен тайтлу страницы, куда ведёт анкор.
Анкоры на второстепенные страницы (типа Контакты, Обратный звонок, Корзина и т.п.) и на внутренние глубинные страницы листингов сделаны закрытыми через атрибут nofollow, что повышает поисковую конкуренцию основных страниц в пределах сайта.

Фото = Миниатюры фотографий в мини карточках листинга товаров и публикаций блога сделаны кликабельными, обёрнуты в семантический тег <figure>. Тайтл анкора и альт изображения во избежание поисковой конкуренции со вторым (главным, то есть чисто текстовым) анкором карточки сделан по форме "название товара | название сайта", которое было записано в его настройках - то есть то, что вы ввели в меню админпанели "настройки » Настройки сайта" и далее поле ввода [Название сайта:]. Альты прочих изображений на странице сделаны пустыми во избежание поисковой конкуренции с главными миниатюрами.
Сеошник может проверить и в случае необходимости исправить вёрстку мини карточек в следующих модулях шаблона: modules/news-item.htm это карточка публикации блога, modules/product.htm это карточка товара.

Логотип = Сделан незакрытой ссылкой на главную страницу, а тайтл анкора и альт картинки логотипа сделан по форме "название сайта | название компании", записанное в настройках сайта.
Сеошник может проверить вёрстку логотипа в модуле modules/header.htm шаблона и, если считает нужным сделать иначе, то просто пусть исправит указанный файл.

Облако тегов = Собрано из товарных тегов и кейвордов всего каталога - то есть тех перечислений ключевых слов или фраз через запятую, что вы вводили у товаров в поле "Meta Keywords:" (ищите на закладке МЕТА) и поле "Теги:" (ищите на закладке SEO) в меню админпанели "товары » Товары" и далее щёлкнуть [название] конкретного товара для его редактирования. Причём текст анкора в облаке тегов выводится по форме #ХешТег, а тайтл по кейвордной форме "хеш тег".
Сеошник может проверить вёрстку облака тегов в модуле modules/tags.htm шаблона. Обратите внимание, во избежание внутренней поисковой конкуренции эти анкоры тоже закрыты через атрибут nofollow.

Скрипты = Все подключения сведены к минимальному количеству, выполнены в конце страничной вёрстки, как требует концепция PageSpeed, минимизированы и, какие возможно, снабжены атрибутом async - разрешение на отложенную загрузку. Скрипты счётчиков, метрики, аналитики, чата онлайн-консультантов и тому подобного, которые вы могли указать в меню админпанели "настройки » Настройки сайта" и далее поле ввода [Коды счетчиков на страницах:] - все они подключаются ещё ниже, чтобы оградить посетителя от наибольшего торможения загрузки.
Сеошник может проверить подключение скриптов в общем макете страницы - это файл index.tpl шаблона. Там же в конце выполнена отправка серверных заголовков Last-Modified и Expires со сроком действия браузерного кеша 1 час.

Хлебные крошки = Выполнены с применением микроразметки Schema.org.
Вёрстка хлебных крошек находится в модуле modules/breadcrumbs.htm шаблона.

Заголовки HTML = Здесь реализована мета теговая разметка по спецификации Open Graph, чтобы страница могла быть распарсена сканером Facebook, и разметка по спецификации Twitter.Card для сканера Twitter.
Сеошник может просмотреть использованные заголовки в модуле modules/head.htm шаблона.

Пагинация = Её модуль самостоятельно добавляет в HTML-заголовки документа мета теги предзагрузки следующей и предыдущей страницы листинга. Также обратите внимание, что пагинатор через мета тег "noindex, follow" автоматически удаляет из поискового индекса так называемый мусор - листаемые страницы под номерами 2, 3, 4 и так далее, допуская в индекс только первую страницу как начало листинга.
Сеошник может проверить вёрстку пагинации в модуле navigation.htm шаблона и поправить, как считает нужным, в частности удалить автоматический выброс мусорных страниц. Однако следует помнить, что в интернет-магазинах такие дальние страницы считаются лишним путающим звеном в приёме визитёра из поиска.

Канонизация = Выполнена в виде безусловного мета тега, всегда канонизирующего адрес страницы на саму себя без GET-параметров, а любые страницы листинга - на его первую страницу.
Данный механизм реализован в модуле modules/head.htm шаблона.

Автовыброс = Кроме упомянутого выше пагинационного выброса мусорных страниц из поискового индекса, похожий автомат использован и для технических страниц (типа Корзина, Авторизация, Страница 404 и тому подобное), и для приватных страниц (типа Заказ, Личный кабинет и тому подобное), и тем более для всех страниц, генерируемых под аккаунтом клиента или администратора. Во всех этих случаях в HTML-заголовки страницы заносится мета тег "noindex, nofollow".

А также


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

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

Конфигурационные параметры


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

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

phone = Номер телефона 1 вашего магазина. Указывайте в международном формате: +СТР ОПС ННН-НН-НН, где СТР - код страны, ОПС - код оператора связи, ННННННН - номер абонента. Например +380 50 111-22-33.
phone2 = Номер телефона 2 вашего магазина. В международном формате.
Оба телефона видны в левом верхнем блоке сайта, а первый телефон также появляется под блоком выбора вариантов товара на его странице, если выбранного товара нет на складе и в настройках админпанели запрещена продажа под заказ.

antispamEnabled = 1 если надо включить антиспам терапию в формах ввода. По умолчанию данная настройка равна 0, то есть считается выключенной.
Пояснение: Антиспам терапия - это техника неинвазивного лечения форм ввода на сайте, состоящая в досылании в уходящий пакет некоего контрольного, так называемого терапевтического поля, сообщенного сервером в обход формы ввода.

Настройки


Другая часть настроек, условно причисляемая к приватным деталям шаблона, разместилась в самом шаблоне, а именно его модуле настроек - это файл modules/settings.htm шаблона. Вот получившийся набор настроечных полей, объявленных в том модуле:

reviewId = Идентификатор блогового поста, созданного в меню админпанели "страницы » Новости" специально для отзывов о магазине.
Подсказка: Чтобы узнать в админпанели ИД какого-нибудь поста, подведите курсор мыши к его названию и смотрите в URL редакторской ссылки число, стоящее сразу за фрагментом &item_id=.

bodyCensor = Список замен в финальном теле страницы. По сути, это фикс каких-нибудь известных багов, допущенных верстальщиками, контент-менеджерами и так далее. Каждую замену следует писать как отдельный элемент массива и только в формате регулярных выражений.

Следующие настройки касаются появления отдельных блоков информации на главной странице сайта. По правде говоря, в движке с первых выпусков были подобные настройки, и по-хорошему, авторам шаблона следовало использовать те параметры со страницы админпанели "товары » Товары", где щёлкнуть ссылку [настройки] и смотреть поле [Длина списка:] у пакета настроек по каждому типу товаров. Но авторы шаблона решили изобрести свой велосипед с флажком типа Вкл/Выкл и наглухо вшитой длиной списка.

noHomeHit = TRUE если хотите убрать блок хитов с главной страницы сайта. По умолчанию равно FALSE.
noHomeAction = TRUE если хотите убрать блок акций с главной страницы сайта. По умолчанию равно FALSE.
noHomeNewest = TRUE если хотите убрать блок новинок с главной страницы сайта. По умолчанию равно FALSE.
Подсказка: Длина выводимых списков равна 6 товарам и вшита в код файла шаблона catalog.htm. В случае необходимости изменить длину какого-то списка, вашему вебмастеру следует открыть указанный файл и выставить там иной параметр count.

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

noBlog = TRUE если хотите убрать со страниц сайта функционал блога (это публикации типа "Новость"). По умолчанию равно FALSE.
noReviews = TRUE если хотите убрать со страниц сайта функционал обзоров (это публикации типа "Статья"). По умолчанию равно TRUE.
noComments = TRUE если хотите убрать со страниц сайта функционал комментирования. По умолчанию равно FALSE.
noCallme = TRUE если хотите убрать со страниц сайта функционал обратного звонка. По умолчанию равно FALSE.
noLogin = TRUE если хотите убрать со страниц сайта функционал авторизации. По умолчанию равно FALSE.
Понятно, что модуль страниц типа Статья, Авторизация и тому подобный функционал вы могли бы отключить в меню админпанели "страницы » Зарегистрированные модули", и отдельная похожая настройка в шаблоне вроде бы не нужна. Однако в случае магазина с несколькими темами под разную аудиторию, где второму шаблону как раз может требоваться такой функционал включённым, то иной раз важно прямо в шаблоне иметь приватную настройку, чтобы он вёл себя так, словно этот функционал отсутствует.

facebookLogin = TRUE если в форме авторизации хотим вывести кнопку входа через аккаунт Facebook. По умолчанию равно TRUE.
facebookId = Идентификатор вашего приложения Facebook. Ищите это число в настройках приложения на страницах вашего аккаунта разработчика Facebook.
facebookSecret = Секретное слово вашего приложения Facebook. Точно так ищите эту строку в настройках приложения.
Подсказка: Скриншот аккаунта разработчика показан ниже в главе "Вход через Facebook".

doCaching = TRUE если мы хотим включить STATIC-кеш шаблонов. По умолчанию равно FALSE.
Хочу сам!
Бывают ситуации, когда владельцу будущего интернет-магазина по какой-то причине надо поставить сайт самостоятельно. Авторы шаблона объясняют, как это сделать.
СкачатьДизайны

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


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

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

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

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

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


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

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

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

В имперских сборках такие элементы обычно располагают в папке images/demo вашего шаблона. Ещё несколько макетных файлов находятся в папке модулей html/modules, все они начинаются со слова demo-...htm. Просто удалите их, например через админпанель сайта или по FTP.

Ещё один кандидат на удаление - это макетный файл того руководства пользователя, которое вы сейчас читаете. Данный файл находится в папке макетов абстрактных страниц html/abstract вашего шаблона и назван так manual.htm - тоже удалите его после окончательной установки и настройки сайта.

Как выглядит


Вот скриншоты экрана при установке движка. Нажмите миниатюру и удерживайте для увеличения скриншота.

А вот скриншот экрана при установке шаблона.

Слайды
Допускается по два на основные типы страницы, а загружаются как изображения шаблона.
Картинки

Управление баннером


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

banner-static = Для так называемых статических страниц (Доставка, Оплата, Контакты, Обратный звонок и тому подобное).

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

banner-home = Для главной страницы.
banner-blog = Для листинга публикаций блога.
banner-category = Для листинга товаров категории.
banner-404 = Для страницы "Ошибка 404".
Вообще говоря, вёрстка модуля баннера находится в файле modules/banner.htm шаблона, и в принципе может быть изменена так, чтобы вместо картинок, находящихся в перечисленных выше папках шаблона, использовались картинки, загруженные в конкретную страницу. Для понимания этого принципа пусть ваш вебмастер посмотрит модуль modules/photos.htm, которым выводятся картинки товара на его странице.

Пару слов по теории


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

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

Ну допустим, мы хотим прямо в этом месте руководства взять 2 последних поста блога и вывести в линию все изображения, что были прикреплены (загружены) в эти посты. Вот что получается.

И теперь вот как это выглядит в коде шаблона:

<div class="gallery">
    {getNews count=2}
    {enumNews}
        {enumImages}
            <figure class="thumbnail">
                <img src="{thumb}" width="150" alt="">
            </figure>
        {/enumImages}
    {/enumNews}
</div>
здесь getNews - получить список недавних постов блога, количество указывайте в параметре "count" (по умолчанию 240) enumNews - перечислить элементы полученного списка постов enumImages - перечислить список прикреплённых фотографий текущего перечисленного поста thumb - распечатать URL миниатюры текущей перечисленной фотографии

Управление логотипами оплат


В левом нижнем углу сайта под видом принимаемых оплат выводится некий набор логотипов. Вы можете изменить его произвольным образом, достаточно среди картинок шаблона, - а их смотрите в меню админпанели "дизайн » Файлы картинок", - переключиться на папку payments, удалить из неё все картинки и загрузить туда желаемый набор изображений. Сейчас в ту папку загружены следующие изображения:

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

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

{getSlides folder=payments}
{enum}
    <figure class="previewer previewer-zoom">
        <img src="{item}" alt="">
        <img src="{item}" alt="">
    </figure>
{/enum}
здесь getSlides - получить список слайдов из какой-то папки картинок шаблона, имя папки указывайте в параметре "folder" enum - перечислить элементы полученного списка item - распечатать текст текущего перечисленного элемента

Как выглядит


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

Бонус
В шаблоне реализован функционал отзывов о сайте, но прежде создайте особый пост.
Посты

Отзывы о магазине


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

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

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

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

Пробуем


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

Всплывающие


Отзыв о сайте
Бонус
В шаблоне реализован функционал входа через социальную сеть.

Вход через Facebook


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


Подсказка: Если вашему вебмастеру понадобится поменять что-либо в логике авторизационного модуля Facebook, пусть мастер смотрит вёрстку модуля в файле modules/facebook.htm шаблона. Именно там написана серверная часть авторизации. Сама же кнопка, инициирующая диалог входа через Facebook, свёрстана в модуле авторизационной формы - это файл modules/login.htm шаблона.
Исходники
Основные части шаблона доступны через админпанель. Простейшие исправления можно сделать там же. Масштабные правки обычно делают на компьютере, предварительно скачав весь дизайн (шаблон), а затем закачивают назад его исправленную версию.
МакетыСтилиКартинкиДизайны

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


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

css
    bootstrap.min.css
    styles.css            «-- стили дизайна
    restyle-none.css      «-- раскраска дизайна (когда не нужна)
    restyle-v1.css        «-- раскраска дизайна (пример 1)
    restyle-v2.css        «-- раскраска дизайна (пример 2)

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

fonts
    Consolas-Bold.ttf
    Consolas-Bold-Italic.ttf
    Consolas-Italic.ttf
    Consolas-Regular.ttf
    -----
    glyphicons-halflings-regular.eot
    glyphicons-halflings-regular.svg
    glyphicons-halflings-regular.ttf
    glyphicons-halflings-regular.woff
    glyphicons-halflings-regular.woff2

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

html
    abstract              «-- макеты абстрактных страниц
        blog.htm
        comments.htm
        contacts.htm
        manual.htm        «-- текст этого макета вы сейчас читаете
        reviews.htm
        sitemap.htm
        terms.htm
        sitemap.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
    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
    modules               «-- всякие модули
        antispam.htm      «--     модуль "Антиспам терапия"
        article.htm       «--     модуль "Мини карточка обзора"
        aside-left.htm    «--     модуль "Левая боковая панель"
        aside-right.htm   «--     модуль "Правая боковая панель"
        aside-top.htm     «--     модуль "Верхняя боковая панель"
        banner.htm        «--     модуль "Баннер (сверху на главной)"
        blog.htm          «--     модуль "Краткий листинг блога (слева на посте)"
        breadcrumbs.htm   «--     модуль "Хлебные крошки (над заголовком поста)"
        callme.htm        «--     модуль "Форма ввода обратного звонка"
        cart.htm          «--     модуль "Информер корзины (справа вверху)"
        categories.htm    «--     модуль "Меню категорий (левое)"
        check404.htm      «--     модуль "Проверка неучтённых случаев Ошибка404"
        comment.htm       «--     модуль "Мини карточка отзыва"
        comments.htm      «--     модуль "Комментарии поста (под текстом товара или поста)"
        demo-body.htm     «--     модуль "Демо текст 1"
        demo-body-2.htm   «--     модуль "Демо текст 2"
        demo-body-3.htm   «--     модуль "Демо текст 3"
        demo-body-4.htm   «--     модуль "Демо текст 4"
        demo-body-5.htm   «--     модуль "Демо текст 5"
        demo-body-6.htm   «--     модуль "Демо текст 6"
        demo-remark.htm   «--     модуль "Демо ремарка (сверху сайта)"
        demo-themes.htm   «--     модуль "Другие дизайны (снизу сайта)"
        facebook.htm      «--     модуль "Обработка facebook авторизации"
        faq.htm           «--     модуль "ЧаВО (слева в обратной связи)"
        featureds.htm     «--     модуль "Товары конкретного типа (на главной)"
        feedback.htm      «--     модуль "Форма ввода обратной связи"
        footer.htm        «--     модуль "Подвал"
        form.htm          «--     модуль "Форма ввода отзыва"
        head.htm          «--     модуль "Заголовки страницы"
        header.htm        «--     модуль "Шапка"
        login.htm         «--     модуль "Форма ввода авторизации"
        menu.htm          «--     модуль "Верхнее меню"
        metrics.htm       «--     модуль "Метрика поста (справа от заголовка)"
        modal.htm         «--     модуль "Модальное окно Обратная-Связь"
        modal-2.htm       «--     модуль "Модальное окно Обратный-Звонок"
        modal-3.htm       «--     модуль "Модальное окно Авторизация"
        modal-4.htm       «--     модуль "Модальное окно Регистрация"
        modal-5.htm       «--     модуль "Модальное окно Написать-Отзыв"
        news-item.htm     «--     модуль "Мини карточка поста блога"
        photos.htm        «--     модуль "Фотографии поста или товара (слева на товаре)"
        price.htm         «--     модуль "Цена товара и выбор варианта (справа на товаре)"
        price-2.htm       «--     модуль "Цена товара и кнопка В Корзину (справа вверху на товаре)"
        product.htm       «--     модуль "Мини карточка товара"
        properties.htm    «--     модуль "Свойства товара (справа на товаре)"
        registration.htm  «--     модуль "Форма ввода регистрации"
        reviews.htm       «--     модуль "Краткий листинг обзоров (слева на обзоре)"
        search-history.htm«--     модуль "История поиска (слева в поиске)"
        settings.htm      «--     модуль "Настройки шаблона"
        tags.htm          «--     модуль "Облако тегов (слева на главной)"
    -----
    index.tpl             «-- тот самый каркас (общий макет страницы)
    -----
    account.htm           «-- макет "Личный кабинет"
    articles.htm          «-- макет "Наши обзоры"
    article.htm           «-- макет "Пост обзора"
    callme.htm            «-- макет "Обратный звонок"
    catalog.htm           «-- макет "Главная страница"
    feedback.htm          «-- макет "Обратная связь"
    login.htm             «-- макет "Авторизация"
    registration.htm      «-- макет "Регистрация"
    news.htm              «-- макет "Наш блог"
    news_item.htm         «-- макет "Пост блога"
    products.htm          «-- макет "Товары категории"
    product.htm           «-- макет "Товар"
    search.htm            «-- макет "Поиск"
    sitemap.htm           «-- макет "Карта сайта"
    static_page.htm       «-- макет "Статическая страница"
    -----
    cart.htm              «-- макет "Корзина"
    order.htm             «-- макет "Оформленный заказ"
    -----
    missing_template.htm  «-- макет "Ошибка 404"
    price.htm             «-- макет "Прайс-лист"
    -----
    navigation.htm        «-- блок "Пагинация страниц"
    helper.php            «-- упоминавшаяся в начале библиотека ShortCodes
    helper-settings.php   «-- настройки хелпера (библиотеки)

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

images
    demo
        article-1.jpg     «-- демо картинки постов "Обзоры"
        article-2.jpg
        article-3.jpg
        article-4.jpg
        article-5.jpg
        -----
        news-1.jpg        «-- демо картинки постов "Блог"
        news-2.jpg
        news-3.jpg
        news-4.jpg
        news-5.jpg
        -----
        product-1.jpg     «-- демо картинки товаров
        product-2.jpg
        product-3.jpg
        product-4.jpg
        product-5.jpg
        product...jpg
        product-30.jpg
        -----
        manual...jpg      «-- картинки из руководства
    payments              «-- логотипы принимаемых оплат
        icon-1-mastercard.png
        icon-2-visa.png
        icon-3-maestro.png
        icon-4-belkart.png
        icon-5-raschet.png
    banner-404            «-- слайды баннера при Ошибка404
    banner-blog           «-- слайды баннера в блоге
    banner-category       «-- слайды баннера в рубрике
    banner-home           «-- слайды баннера на главной
        slide-1.jpg
        slide-2.jpg
    banner-static         «-- слайды баннера для разного
    -----
    banner-sizer.png
    favicon.ico           «-- ярлыковая иконка
    flag-popular.svg
    icon-book.png
    icon-calendar.png
    icon-chat.png
    icon-clipboard.png
    icon-compas.png
    icon-gift-box.png
    icon-html.png
    icon-infinity-loop.png
    icon-mail.png
    icon-mail-2.png
    icon-map.png
    icon-pencils.png
    icon-pocket.png
    icon-retina-ready.png
    icon-toilet-paper.png
    icon-watches.png
    loading.gif
    logo.png              «-- логотип вверху страницы
    -----
    no-photo.png          «-- картинка на случай "Нет фото"
    thumbnail.jpg         «-- иконка шаблона (для админки)

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

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

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

Особенности


Вообще-то, в реализации бизнес-логики на страницах макетов бывают разные нюансы, не всегда заметные с первого раза. Упомянём некоторые из них.

Страница товара: Обратите внимание, как там исполнен выбор вариантов товара в блоке справа.

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

Когда вариант отсутствует на складе и в меню админпанели "настройки » Настройки сайта » [Корзина:]" выключен флажок [Разрешить продажу товаров под заказ], то под блоком выбора вариантов товара появляется жёлтое уведомление с номером телефона магазина.

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

И ещё одна особенность страницы товара.

Страница товара: Если при редактировании товара в поле [Поставщик:] ему был выбран какой-то из зарегистрированных пользователей сайта, тогда Ф.И.О этого пользователя будет показано в роли продавца перед описанием товара. Иначе продавцом считается фирма, имя которой вы указали в меню админпанели "настройки » Настройки сайта" и далее поле [Организация:].

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

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


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


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

Google Web Fonts - https://www.google.com/fonts

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

Responsivator - http://imperacms.ru/responsivator

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

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

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

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

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


Поскольку вы рассматриваете сейчас шаблон BookSeller на демо сайте, и наверняка вам так понравится данная работа, что задумаетесь о её подгонке к своим задачам, то авторы этого шаблона вывели данную подсказку на случай, если позже захотите что-то переделать в шаблоне самостоятельно, но ещё не знаете где что находится. Файлы макетов можно редактировать в меню админпанели дизайн / Файлы шаблона »(на демо сайте установлен такой логин/пароль: admin/123).


Сразу уточним, все подсказки, демо тексты, демо фотографии товаров и демо картинки публикаций блога выводятся только на демо сайте (точнее, при работе сайта в демонстрационном режиме) и автоматически исчезают на реальном сайте. Или же можете в файлах шаблона просто удалить соответствующие модули. Например, этот маленький блок текста выведен с помощью модуля modules/demo-body-5.htm.