Шаблоны

Обзор JM Product Catalog. Шаблон каталога Joomla

  • Тип – шаблон каталога продукции.

 

 

JM Product Catalog – это адаптивный, универсальный шаблон каталога товаров Joomla на русском языке для DJ-Catalog2. Под универсальностью понимается то, что можно создавать на его основе каталоги для широкого спектра: товаров, услуг, организаций, шаблонов, сайтов, компаний, фирм, мебели, машин, недвижимости и так далее. Причём, в стоимость шаблона входит не только сам шаблон, но и лицензия на DJ-Catalog2 и другие расширения (читайте ниже).

 Помимо этого, шаблон прекрасно подойдёт для создания любых других сайтов и не обязательно каталогов. Наличие четырёх сбалансированных цветовых схем и возможности настройки цветов даже без правки CSS делает шаблон легко адаптирующимся под нужды каждого конкретного проекта. При создании шаблона учитывались такие «веб-стандарты»: HTML5, Bootstrap 2.3.2, LESS, CSS3, jQuery, Source maps, семантическая вёрстка. Шаблон хорошо отображается в большинстве современных браузеров: Edge, Firefox, Chrome, Safari, Opera, Internet Explorer 11, Яндекс.Браузер. Плюс, поддерживаются мобильные браузеры: iOS Safari, Android Browser, Chrome для Android и другие.

Сам шаблон каталога товаров можно посмотреть у разработчика в двух вариантах: вариант №1, вариант №2.

Обзор проводится в последней, на момент написания статьи (03.02.2017), русскоязычной версии JM Product Catalog 1.0.0 в Joomla 3.6.5. Кроме самого шаблона Вы получите лицензию на такие расширения (версии указаны на момент написания статьи):

  • DJ-Catalog2 3.5.5. Компонент каталога Joomla.
  • DJ-MediaTools 2.8.0. Компонент галереи изображений и видео для Joomla с поддержкой VirtueMart 3. Это позволит создавать слайдер VirtueMart, галереи с товарами и другое.
  • DJ-MegaMenu 3.5.1. Компонент (модуль, плагин) меню, мега-меню и мобильного меню со множеством настроек и поддержкой вставки модулей в меню.
  • DJ-Tabs 1.3.3.1. Расширение Joomla для отображения контента сайта во вкладках или аккордеоне.
  • DJ-EasyContact 1.4.4. Бесплатный модуль формы обратной связи.

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

Особенности JM Product Catalog

Вместе с присущими всем шаблонам от Joomla-Monster.com на фреймворке EF4 особенностями в типографике, оформлении модулей и работе с макетом\позициями шаблона у JM Product Catalog есть свои изюминки.

  • Наличие стилей для DJ-Catalog2, DJ-MediaTools, DJ-MegaMenu, DJ-Tabs и DJ-EasyContact. Что позволяет гармонично вписать эти расширения в общую дизайнерскую концепцию сайта.
  • Возможность изменять цветовое оформление некоторых элементов компонентов DJ-Catalog2, DJ-MediaTools, DJ-MegaMenu без правки CSS.
  • Возможность изменять цветовое оформление для некоторых суффиксов модулей.

На рисунках ниже приведены примеры некоторых страниц сайта с этим шаблоном.

JM Product Catalog
JM Product Catalog
Шаблон сайта каталога
Шаблон сайта каталога
Шаблон каталога Joomla
Шаблон каталога Joomla
Шаблон каталога продукции
Шаблон каталога продукции

Работа с Joomla

Как создать меню и его пункты

В Joomla есть меню, пункты меню и модули меню. Меню служит для объединения в себе пунктов меню и их сортировки в нужном порядке. Пункт меню -составляющая часть меню. А модуль меню необходим для того, чтобы показать на сайте (во фронтальной его части) меню и пункты меню.

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

Для создания меню в Джумла выберите Меню – Менеджер меню – Создать меню (рисунок ниже). На появившейся странице задайте значения для таких полей:

  • Заголовок. Можно использовать буквы любого алфавита, цифры и символы. Этот заголовок отображается только в админке сайта. Например, «Верхнее меню».
  • Тип меню. Это системное имя меню. Оно тоже отображается только в админке. Название типа меню может быть только английскими буквами, строчными и без пробелов. Например, «verkhnee-menyu». Если ввести русскими, то система автоматически преобразует его до нужного вида.

Поле Описание заполнять не обязательно. Сохраните изменения и перейдите в созданное Вами меню.

Создание меню в Joomla
Создание меню в Joomla

После этого можно приступать к созданию пунктов меню. Для этого нажмите кнопку Создать в левом верхнем углу окна или выберите команду Создать пункт меню в Меню – «Верхнее меню» (рисунок ниже).

Создание пункта меню
Создание пункта меню

На появившейся странице заполните поле Заголовок меню. Можно использовать буквы любого алфавита, цифры и символы. Этот заголовок будет отображаться в меню во фронтальной части сайта. Затем выберите Тип пункта меню (рисунок ниже).

Настройка пункта меню
Настройка пункта меню

Обратите внимание, что состав типов пунктов меню будет сильно зависеть от того, какие расширении (компоненты) у Вас установлены. Помимо «стандартных» типов пунктов меню Joomla у меня ещё есть пункты меню расширения каталога продукции DJ-Catalog2, галереи DJ-MediaTools и вкладок DJ-Tabs. Более того, от выбранного Вами типа пункта меню (рисунок ниже) будет зависеть не только то, что отображается пользователям по нажатию на этот пункт меню, но и доступные настройки пункта меню в админке Joomla.

Типы пунктов меню
Типы пунктов меню

Для примера выберу пункт меню DJ-Catalog2 Список товаров (таблица или блог/плитка). Немного подробнее о пунктах меню каталога товаров можно прочесть в статье «Обзор DJ-Catalog2. Каталог Joomla». Как видите (рисунок ниже), набор опций этого пункта меню изменился согласно его типу.

Пункт меню каталога товаров
Пункт меню каталога товаров

После создания нужного Вам набора пунктов меню перейдите в Расширения – Менеджер модулей и создайте новый модуль, нажав на зелёную кнопку Создать в левом верхнем углу окна и выберите тип модуля Меню. Обратите внимание, что существует много модулей меню. Не только встроенный Меню. В случае, например, с шаблоном сайта каталога JM Product Catalog, для создания верхнего горизонтального меню можно выбирать тип DJ-MegaMenu. Но далее в примере будет рассматриваться стандартный модуль Меню (рисунок ниже).

Настройка модуля меню
Настройка модуля меню

Вам нужно указать заголовок меню (на любом языке), указать позицию, сделать состояние модуля – Опубликовано и из спадающего списка Выбор меню выбрать название ранее созданного Вами меню. Заголовок модуля можно скрыть при помощи одноимённой опции. А вот в какой позиции нужно опубликовывать модуль – это зависит от Вашего шаблона и текущей необходимости. Например, в случае с шаблонами Joomla Monster на фреймворке EF4 нужно публиковать в позиции «Верхнее меню [top-menu-nav]», если Вы хотите создать верхнее горизонтальное меню. А если боковое вертикальное, то в позиции «Левый столбец [left-column]» или «Правый столбец [right-column]».

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

Как создать категорию материалов и материал

Материалы (статьи) в Joomla распределены по категориям. Если на сайте ещё нет категорий, то для удобства и дополнительных возможностей нужно их создать. Под удобством понимается упрощение дальнейшей работы с большим количеством материалов в менеджере материалов Joomla за счёт фильтрации списка материалов по категориям. А под дополнительными возможностями подразумевается, например, возможность вывода нескольких материалов в виде «блога» при помощи пункта меню тип Материалы – Блог категории. Так, например, реализован на сайте раздел, посвящённый шаблонам Joomla.

Для создания категории Joomla перейдите в Материалы – Менеджер категорий – Создать категорию (рисунок ниже).

Создание категории материалов Joomla
Создание категории материалов Joomla

На появившейся странице достаточно указать только заголовок. Он будет виден в админке Joomla. В моём примере заголовок категории «Пример заголовка». Сохраните изменения.

Для создания материала Joomla перейдите в Материалы – Менеджер материалов – Создать материал. Или, если Вы находитесь на стартовой странице админки Joomla, то в левой панели выберите Создать материал.

Создание материала Joomla
Создание материала Joomla

По минимуму Вам нужно указать Заголовок материала (он может отображаться на сайте), выбрать Состояние (Опубликовано), указать категорию и внести само содержимое материала (рисунок ниже).

Материал Joomla
Материал Joomla

Как вставить модуль в материал

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

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

Задание позиции модуля
Задание позиции модуля

Теперь перейдите в менеджер материалов Joomla, откройте нужную Вам статью и в той её части, где нужно отобразить модуль, разместите этот код, но в фигурных скобках (рисунок ниже):

 

loadposition moya-pozitsiya

 

Где «moya-pozitsiya» – название Вашей позиции.

Вставка модуля в материал
Вставка модуля в материал

Вставка HTML кода в материал

Иногда может возникать необходимость вставки HTML-кода в текстовый редактор Joomla (в материал). Например, не создавать ссылку визуальными средствами редактора, а поместить её код:

 

<a class="telefon" title="Напишите нам" href="mailto:[email protected]?subject=Вопрос с сайта Didzhej.kh.ua&amp;body=Здравствуйте, Игорь." target="_blank" rel="alternate"><span style="font-size: 18pt;">[email protected]</span></a>

 

Обратите внимание, что код выше - это не просто ссылка, это адрес электронной почты «[email protected]», по нажатию на который у пользователя откроется почтовая программа, и в поля «Кому», «Тема» и «Текст письма» будут вставлены предварительно заданные значения (рисунок ниже). Также в коде выше видно, что тексту задано какое-то оформление и назначен CSS-класс «telefon». Это применяется для того, чтобы можно менять размер шрифта в зависимости от ширины области просмотра страницы в браузере. То есть, чтобы надпись адекватно смотрелась при разных разрешениях экрана.

Автоматическое заполнение полей письма
Автоматическое заполнение полей письма

Покажу на примере встроенного в Joomla 3.6.5 редактора TinyMCE 4.4.3. Перейдите в материал (или там, где есть редактор, например, в модуле тип «HTML-код»), поставьте курсор в то место материала, куда нужно вставить код и нажмите на инструмент Исходный код (рисунок ниже). В появившееся окно вставьте Ваш код и нажмите кнопку Ok. После этого код добавится и преобразуется в области редактора в то, что указано в коде. В моём случае это ссылка с текстом «[email protected]»

Исходный код
Исходный код

Есть ещё один вариант. Перейдите в материал и под областью окна редактора нажмите Выключить редактор. После этого можно вставить код.

Ещё один вариант. Сперва убедитесь, что в Расширения – Менеджер плагинов включён плагин «Редактор - CodeMirror». Затем перейдите в Пользователи – Менеджер пользователей, найдите своего пользователя и на вкладке Параметры в спадающем списке Редактор выберите Редактор – CodeMirror (рисунок ниже).

Выбор редактора Joomla
Выбор редактора Joomla

После этого откройте нужный Вам материал и вставляйте код (рисунок ниже).

CodeMirror
CodeMirror

Но бывают случаи, когда Joomla режет код, не смотря на вышеописанный способ. Это может быть в ситуациях, когда Вы вставляете код карты Яндекс или Google, когда пытаетесь вставить код видео с YouTube или что-то при помощи тега «iframe». Для вставки видео рекомендую плагин AllVideos.

Можно попробовать это исправить. Перейдите в Система – Общие настройки – Фильтр теста и убедитесь, что для группы пользователей, от имени которого Вы вставляете код, в столбце Тип фильтра указано Нет фильтрации (рисунок ниже).

Настройки фильтрации текста
Настройки фильтрации текста

Затем перейдите в Расширения – Менеджер плагинов и зайдите в настройки плагина «Редактор - TinyMCE» (если в качестве редактора Вы используете именно его). На вкладке Плагин найдите опцию Запрещённые теги и уберите те теги, которые режет Joomla. Если нужно убрать все теги, то впишите вместо них любое слово английскими буквами, например, «nichego» (без кавычек). Сохраните изменения и повторите попытку.

Если и это не помогло, можно попробовать перейти в Пользователи – Менеджер пользователей, найти своего пользователя и на вкладке Параметры в спадающем списке Редактор выберите Редактор - Без редактора. После этого вставить код в статью и сохранить материал. Но если потом Вы включите другой редактор и повторно сохраните материал, то Джумла опять обрежет код.

Добавление изображения для вступительного и полного текста материала

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

Изображение материала
Изображение материала

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

Изображение материала (полное)
Изображение материала (полное)

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

После того, как картинки будут готовы и загружены в папку изображений на хостинге, перейдите в Материалы – Менеджер материалов и зайдите в настройки нужного материала на вкладку Изображения и ссылки (рисунок ниже). При помощи опций Изображение для вступительного текста материала и Изображение полного текста материала можно задать соответствующие изображения.

Изображения и ссылки
Изображения и ссылки

Как сменить заголовок страницы в браузере

Заголовок страницы в браузере отображается не только во вкладке браузера, но и является важным, с точки зрения SEO, элементом – тегом «title». Важность его состоит в том, что поисковые системы могут отображать данный текст в сниппетах поисковой выдачи (рисунок ниже), использовать для формирования быстрых ссылок и, по мнению SEO-специалистов, заголовок является достаточно важным «фактором» определения релевантности страницы запросу пользователя (в контексте внутренних факторов оптимизации страницы).

Сниппет
Сниппет

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

Есть сторонние SEO-расширения, которые помогают в управлении мета-данными, включая заголовки. Например, sh404SEF или RSSeo.

 

Надеюсь, что данная статья о шаблоне сайта каталога продукции для Joomla поможет Вам не только определиться с выбором самого шаблона, но и ответит на некоторые вопросы касательно работы с самой CMS Joomla. А в следующей статье «Обзор JM Sport. Спортивный шаблон Joomla» мы рассмотрим ещё один шаблон, изменения в фреймворке и продолжим ответы на часто задаваемые вопросы по Джумла. Причём не только в текстовом но и видео формате.

Похожие материалы
Автор статьи – Хорошевский Алексей

Хорошевский Алексей Примерно с 2008 года и по сегодняшний день создаю сайты «под ключ» на Joomla и WebSite X5. Также занимаюсь их доработкой, SEO-продвижением, контекстной рекламой, защитой от взлома и оптимизацией скорости загрузки сайта.

Кандидат технических наук по специальности «Информационные технологии».

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