- Видео обзор и урок.
- Особенности шаблона.
- Интернет-магазин для людей с ограниченными возможностями.
- Русификатор.
JM ZoneStore – адаптивный готовый шаблон Joomla для интернет-магазина на DJ-Catalog2.
Видео обзор и урок
- Особенности шаблона – с 00:00:32.
- Расширенные возможности – 00:08:01.
Видео лучше просматривать с качеством 720 HD. Этот и другие видео уроки Вы можете найти на каналах сайта Aleksius.com в YouTube и Mail.ru. В статье «Видео урок по DJ-Catalog. Создание интернет магазина с нуля (часть 3)» показан пример настройки данного шаблона на демонстрационном сайте.
Шаблон полностью переведён на русский язык (админка и фронтальная часть). Помимо полноценного интернет-магазина можно создать каталог с кнопкой отправки запроса менеджеру вместо кнопки «Купить». Дизайн шаблона чем-то напоминает дизайн крупного интернет-магазина с мировым именем «Amazon». JM ZoneStore поможет создать понятный и простой интернет- магазин для пользователей. В нём преобладает минималистический дизайн. Шаблон может отображаться на всю ширину экрана пользователя или Вы можете задать фиксированную ширину. Продуманные страницы товаров, категорий, оформления заказа и т.д. упростят покупателям процесс покупки. Шаблон подойдёт для создания интернет-магазина одежды, электроники, мебели и так далее. По сути, ограничений по тематике нет. А учитывая то, что при помощи компонента интернет-магазина DJ-Catalog2 можно продавать загружаемые товары и подписки, то универсальность JM ZoneStore ещё больше увеличивается.
Так же при разработке учитывались рекомендации по созданию сайтов для людей с ограниченными возможностями WCAG 2.0. Данные рекомендации частично пересекаются с «ГОСТ Р 52872-2012 Интернет-ресурсы. Требования доступности для инвалидов по зрению. Национальный стандарт российской федерации. Интернет-ресурсы. Требования доступности для инвалидов по зрению».
У шаблона есть два быстрых старта («QuickStart»), они же доступны для предварительного просмотра в качестве демонстрационных сайтов:
В обзоре будет участвовать последняя, на момент написания статьи (14.12.2018), русскоязычная версия JM ZoneStore 1.0.2 с фреймворком EF4.8.4, в Joomla 3.9.1. Демонстрационный сайт, рассмотренный в статье, базируется на быстром старте шаблона и содержит англоязычный контент (описание товаров, пункты меню и т.д.).
Кроме самого шаблона Вы получите лицензию на такие расширения:
- DJ-Catalog2. Расширение для создания каталогов и сайтов интернет-магазинов на Joomla. Он оснащён фильтром товаров, сортировкой, импортом/экспортом, комбинациями, купонами на скидку и многим другим.
- DJ-MegaMenu Pro. Расширение (модуль, плагин) меню, мега-меню и мобильного меню со множеством настроек и поддержкой вставки модулей в меню. Можно создавать вертикальные и горизонтальные меню.
- DJ-MediaTools. Компонент галереи изображений и видео для Joomla с поддержкой DJ-Catalog2. Это позволит создавать галереи, слайдеры и слайд-шоу с изображениями из товаров DJ-Catalog2.
- DJ-Reviews. Расширение для создания отзывов и рейтингов. Поддержка микроразметки и интеграции с DJ-Catalog2.
Помимо платных расширений в JM ZoneStore предусмотрены стили для ряда бесплатных модулей:
- JM Social Icons.
- JM Simple Tabs.
- JM Additional Features.
- JM Intro Articles. Русскоязычный модуль для отображения «анонсов» материалов.
Естественно, что шаблон содержит стили для штатных компонентов, модулей и плагинов самой Joomla. Но Вы можете использовать любые расширения вместе с этим шаблоном (ограничений нет), если они подходят под версию Джумла, установленную на сайте. Стоит отметить, что для «сторонних» расширений в шаблоне может не быть стилей, и из-за этого подобные расширения отображаются не совсем красиво. Это решаемая ситуация – дописывание стилей (CSS).
Также Вы получите файл с графическими элементами шаблона в формате PSD, хорошую техническую поддержку и документацию. Документация и техническая поддержка на английском языке. Если Вас интересует документация на русском языке, обратитесь к этому разделу. В нём можно найти много информации, как о шаблонах от Joomla-Monster.com, так и о шаблонах Joomla в целом, включая уроки по работе с шаблонами.
Если Вас интересует простое создание магазина на новой версии Джумла, рекомендую ознакомиться со статьёй «Обзор DJ-EcoFood. Шаблон сайта Joomla 4 для интернет-магазина».
Особенности шаблона
Как и другие шаблоны от Joomla-monster.com, JM ZoneStore основывается на фреймворке EF4 и 12-ти колоночной сетке Bootstrap. А значит, он обладает всеми особенностями, присущими данному фреймворку. В состав фреймворка (в админке шаблона) есть ряд инструментов, которые позволяют оптимизировать сайт с точки зрения скорости его загрузки. Об этих инструментах можно немного детальнее прочесть в статьях: «Обзор JM Job Listings. Настраиваемый шаблон Joomla» и «Обзор JM Sport. Спортивный шаблон Joomla».
При создании шаблона учитывались такие «веб-стандарты», технологии и инструменты: Bootstrap, HTML5, LESS, CSS3, jQuery, Source maps, семантическая вёрстка. Шаблон хорошо отображается в большинстве современных браузеров, таких как: Edge, Firefox, Chrome, Safari, Opera, Internet Explorer 11, Яндекс.Браузер. Кроме этого поддерживаются мобильные браузеры, например, iOS Safari, Android Browser, Chrome для Android и другие. Есть поддержка письменности справа налево (RTL). Плюс в шаблоне заложено более 41 позиции для модулей с возможностью изменения модульной сетки прямо из админки (рисунок ниже).
На рисунке ниже показан пример главной страницы JM ZoneStore.
На рисунке ниже показана страница категории товаров. Есть вариант «блога» и таблицы.
На рисунке ниже показана страница товара.
На рисунке ниже показана первая страница оформления заказа.
Рассмотрим ряд «индивидуальных» особенностей, присущих именно JM ZoneStore. Сперва перечислю опции/возможности, отличающиеся от других шаблонов этого разработчика, доступные в настройках.
- Добавление логотипа в подвал.
- Возможность задавать фиксированную ширину области контента и бокового столбца для отдельных страниц сайта (рисунок ниже).
- Отключить левый/правый столбцы шаблона на страницах товаров интернет- магазина DJ-Catalog2.
- Отображение характеристик товара и отзывов на странице товара в виде аккордеона.
На вкладке Опции доступности (рисунок ниже) можно активировать инструменты для людей с ограниченными возможностями (слабовидящих).
При активации той или иной опции во фронтальной части сайта отображаются разные инструменты в шапке сайта в правом верхнем углу (рисунок ниже). Они позволяют:
- Включить ночной режим.
- Включить чёрно-белый, чёрно-жёлты, жёлто-чёрный режимы.
- Включить фиксированный или широкий макет.
- Изменить размер шрифта. Для этого надо включить опцию Переключатель размера шрифта на вкладке Инструменты сайта в настройках шаблона в разделе Основные настройки.
Немного подробнее на тему создания сайтов для слабовидящих можно прочесть в предыдущей статье. На рисунках ниже показаны примеры страницы товара интернет- магазина в разных режимах и с разными размерами шрифтов.
Также в настройках шаблона есть опции (рисунок ниже), позволяющие менять цвета кнопок добавления товара в корзину (если это интернет-магазин) или кнопок отправки запроса менеджеру (если это каталог).
Промо-страница товара. В шаблоне магазина Joomla предусмотрена «заготовка» для лендинга под какой-то товар или группу товаров (рисунок ниже).
Причём эта страница редактируется без правки кода. Так как она сделана при помощи бесплатного русскоязычного модуля JM Additional Features (рисунок ниже).
Страница справки (вопрос-ответ). В шаблоне предусмотрена «заготовка» для страницы справочной системы (рисунок ниже). Верхняя её часть сделана при помощи модуля JM Additional Features, а нижняя при помощи модуля JM Simple Tabs.
Интернет-магазин для людей с ограниченными возможностями
В статье выше описаны инструменты шаблона, которые могут быть полезными для людей с ограниченными возможностями (слабовидящих). Ранее я уже затрагивал эту тему. По данным за июль 2017 (источник) 1 из 5 человек, проживающих в США, обладают ограничениями по здоровью, которые не позволяют нормально использовать всё то, что могут использовать другие люди. Против интернет-магазинов было подано сотни судебных исков (источник) по дискриминации в рамках ADA (от англ. «Americans with Disabilities Act of 1990» – Закон об американцах с инвалидностью 1990 года является законом о гражданских правах, который запрещает дискриминацию по признаку инвалидности).
Думаю, что для СНГ, в юридическом плане, этот вопрос стоит не так остро. Но интерес к нему со стороны пользователей всё же есть, и он возрастает. Ниже показан пример статистики поисковых запросив в Яндекс за последний месяц (на 11.12.2018) по запросу «52872-2012» для России и СНГ. «52872-2012» – это номер ГОСТа «ГОСТ Р 52872-2012 Интернет-ресурсы. Требования доступности для инвалидов по зрению. Национальный стандарт российской федерации. Интернет-ресурсы. Требования доступности для инвалидов по зрению.».
Запросов, связанных с «сайты для слабовидящих» несколько больше, и они более высокочастотные (рисунок ниже).
Даже по запросу «WCAG 2.0» есть данные (рисунок ниже).
Рассмотрим основные моменты, связанные с адаптацией сайта интернет- магазина для людей с ограниченными возможностями, которые обеспечивает JM ZoneStore. Те, что уже были рассмотрены в статье выше, не будем повторять.
- Навигация по сайту при помощи клавиатуры (без мыши).
- Переход к нужной области сайта по нажатию на кнопку Tab на клавиатуре.
- Адаптация сайта для программ чтения с экрана.
Как видите данный шаблон интернет-магазина Joomla обладает весьма неплохим набором дизайнерских решений, которые помогут в создании удобного, понятного и простого в использовании сайта для Ваших покупателей. Наличие админки с множеством настроек позволит сконфигурировать шаблон под свои нужды, а «быстрые старты» ускорят этот процесс, дав наглядный пример.
| Похожие материалы |
|---|
| Автор статьи – Хорошевский Алексей |
|---|
 Кандидат технических наук, преподаватель Харьковского национального университета радиоэлектроники, веб-мастер и SEO-оптимизатор с опытом более 15 лет. Специалист по созданию сайтов на Joomla и WebSite X5. Автор научных публикаций, видеокурсов и обучающего контента по веб-разработке и SEO. Ведёт блог и YouTube-канал, где делится своими знаниями и практическим опытом. Предоставляет услуги по созданию, доработке, сопровождению и продвижению сайтов. Подробнее об авторе… Публикации и работа: |
