Обзоры расширений Joomla

 

 

JM ZoneStore – адаптивный готовый шаблон Joomla для интернет-магазина на DJ-Catalog2. Шаблон полностью переведён на русский язык (админка и фронтальная часть). Помимо полноценного интернет-магазина можно создать каталог с кнопкой отправки запроса менеджеру вместо кнопки «Купить». Дизайн шаблона чем-то напоминает дизайн крупного интернет-магазина с мировым именем «Amazon». JM ZoneStore поможет создать понятный и простой интернет- магазин для пользователей. В нём преобладает минималистический дизайн. Шаблон может отображаться на всю ширину экрана пользователя или Вы можете задать фиксированную ширину. Продуманные страницы товаров, категорий, оформления заказа и т.д. упростят покупателям процесс покупки. Шаблон подойдёт для создания интернет-магазина одежды, электроники, мебели и так далее. По сути, ограничений по тематике нет. А учитывая то, что при помощи компонента интернет-магазина DJ-Catalog2 можно продавать загружаемые товары и подписки, то универсальность JM ZoneStore ещё больше увеличивается

Так же при разработке учитывались рекомендации по созданию сайтов для людей с ограниченными возможностями WCAG 2.0. Данные рекомендации частично пересекаются с «ГОСТ Р 52872-2012 Интернет-ресурсы. Требования доступности для инвалидов по зрению. Национальный стандарт российской федерации. Интернет-ресурсы. Требования доступности для инвалидов по зрению».

У шаблона есть два быстрых старта («QuickStart»), они же доступны для предварительного просмотра в качестве демонстрационных сайтов:

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

В обзоре будет участвовать последняя, на момент написания статьи (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 предусмотрены стили для ряда бесплатных модулей:

Естественно, что шаблон содержит стили для штатных компонентов, модулей и плагинов самой Joomla. Но Вы можете использовать любые расширения вместе с этим шаблоном (ограничений нет), если они подходят под версию Джумла, установленную на сайте. Стоит отметить, что для «сторонних» расширений в шаблоне может не быть стилей, и из-за этого подобные расширения отображаются не совсем красиво. Это решаемая ситуация – дописывание стилей (CSS).

Также Вы получите файл с графическими элементами шаблона в формате PSD, хорошую техническую поддержку и документацию. Документация и техническая поддержка на английском языке. Если Вас интересует документация на русском языке, обратитесь к этому разделу. В нём можно найти много информации, как о шаблонах от Joomla-Monster.com, так и о шаблонах Joomla в целом, включая уроки по работе с шаблонами.

Видео обзор и урок

  • Особенности шаблона – с 00:00:32.
  • Расширенные возможности – 00:08:01.

 

 

Видео лучше просматривать с качеством 720 HD. Этот и другие видео уроки Вы можете найти на каналах сайта Aleksius.com в YouTube, Rutube и Mail.ru.

Особенности шаблона

Как и другие шаблоны от 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
JM ZoneStore

На рисунке ниже показана страница категории товаров. Есть вариант «блога» и таблицы.

Шаблон магазина Joomla
Шаблон магазина Joomla

На рисунке ниже показана страница товара. Пример страницы на демонстрационном сайте разработчика.

Русский шаблон интернет магазина
Русский шаблон интернет магазина

На рисунке ниже показана первая страница оформления заказа.

Шаблон интернет магазина Joomla 3
Шаблон интернет магазина Joomla 3

Рассмотрим ряд «индивидуальных» особенностей, присущих именно JM ZoneStore. Сперва перечислю опции/возможности, отличающиеся от других шаблонов этого разработчика, доступные в настройках.

  • Добавление логотипа в подвал.
  • Возможность задавать фиксированную ширину области контента и бокового столбца для отдельных страниц сайта (рисунок ниже).
  • Отключить левый/правый столбцы шаблона на страницах товаров интернет- магазина DJ-Catalog2.
  • Отображение характеристик товара и отзывов на странице товара в виде аккордеона.
Особые настройки JM ZoneStore
Особые настройки JM ZoneStore

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

Опции доступности
Опции доступности

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

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

Протестировать эти инструменты можно на демонстрационном сайте.

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

Ночной режим
Ночной режим
Чёрно-белый режим
Чёрно-белый режим
Увеличенный размер шрифта
Увеличенный размер шрифта

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

Настройки цветов
Настройки цветов

Промо-страница товара. В шаблоне магазина Joomla предусмотрена «заготовка» для лендинга под какой-то товар или группу товаров (рисунок ниже). «Живой» пример можно посмотреть на демонстрационном сайте разработчика.

Промо-страница товара
Промо-страница товара

Причём эта страница редактируется без правки кода. Так как она сделана при помощи бесплатного русскоязычного модуля JM Additional Features (рисунок ниже).

JM Additional Features
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 Интернет-ресурсы. Требования доступности для инвалидов по зрению. Национальный стандарт российской федерации. Интернет-ресурсы. Требования доступности для инвалидов по зрению.».

Статистика запросов для «52872-2012»
Статистика запросов для «52872-2012»

Запросов, связанных с «сайты для слабовидящих» несколько больше, и они более высокочастотные (рисунок ниже).

Статистика запросов для «сайты для слабовидящих»
Статистика запросов для «сайты для слабовидящих»

Даже по запросу «WCAG 2.0» есть данные (рисунок ниже).

Статистика запросов для «WCAG 2.0»
Статистика запросов для «WCAG 2.0»

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

  • Навигация по сайту при помощи клавиатуры (без мыши).
  • Переход к нужной области сайта по нажатию на кнопку Tab на клавиатуре.
  • Адаптация сайта для программ чтения с экрана.

Как видите данный шаблон интернет-магазина Joomla обладает весьма неплохим набором дизайнерских решений, которые помогут в создании удобного, понятного и простого в использовании сайта для Ваших покупателей. Наличие админки с множеством настроек позволит сконфигурировать шаблон под свои нужды, а «быстрые старты» ускорят этот процесс, дав наглядный пример.

 

Полезные ссылки: