Компонент JoomCreator позволяет создать на вашем сайте полноценный каталог продукции. Более того, владелец сайта может самостоятельно настраивать страницу товара. Как она будет выглядеть, какие поля будут использоваться — решать исключительно вам! Огромное количество возможностей данного расширения привело к тому, что количество настроек пугает неподготовленного пользователя. Чтобы пролить свет на то, как работает JoomCreator и убедить будущего владельца в том, что приобретая этот компонент он получает в свое распоряжение универсальный и удобный инструмент для создания каталога, мы подготовили данный учебный материал. Рассматривать работу с JoomCreator мы будем на примере Joomla 1.7

JoomCreator распространяется бесплатно. Чтобы загрузить компонент, перейдите по следующей ссылке:
 

Скачать Joomcreator (1.56 Мбайт)

Скаченный архив необходимо распаковать.

Далее необходимо открыть административную панель Joomla и установить пакет:

com_joomcreator.zip

Это дистрибутив компонента.

Рекомендуется также установить плагин plg_jcemediabox_1014_joomla16.zip. Он также прилагается к архиву. Плагин необходимо включить в административной панели после установки.

Условия задачи

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

Чтобы подробно не рассказывать о том, какие поля мы будем создавать, я хочу выложить изображение страницы с товаром, которое сделано по завершении настройки компонента:

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

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

Принцип работы JoomCreator

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

JoomCreator — это своего рода конструктор. И конструирование происходит с помощью специальных форм. 

Каждая форма состоит из элементов, которыми могут являться текстовые поля, кнопки, списки, яндекс — карты, изображения и т.д. Набор элементов для построения формы в JoomCreator поражает воображение и на первоначальном этапе работы может создать проблемы с освоением компонента.

Фактически первоначальная задача по настройке компонента сводится к следующим операциям:

1. Создание формы

2. Создание элементов для этой формы

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

Настройку отображения элементов в форме нам придется делать для следующих вариантов:

1. Форма ввода материала — для ввода материала с фронта сайта

2. Форма редактирования материала — для ввода материала с административной панели

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

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

Предварительная настройка JoomCreator

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

После того, как вы открыли административную панель Joomla, перейдите «Компоненты - joomcreator»

Далее переходим на вкладку «Настройка». И сразу же обращаем внимание на текстовое поле «URL сайта». Обязательно вводим сюда адрес вашего сайта. Поскольку специально для написания этой статьи был создан домен joomcreator.sitogon.ru, то в данное текстовое поле я вписал: http://joomcreator.sitogon.ru

Теперь обратите внимание на текстовые поля «Каталог размещения загружаемых файлов» и «Путь временных файлов пакетной загрузки», по умолчанию там стоит путь «images/stories/», однако нужно учитывать, что в Joomla 1.7 такого каталога по умолчанию не существует. Да и в целом, будет немножко неправильно складывать в одну папку все файлы, поэтому предлагаю посетить ваш сервер с помощью FTP менеджера и создать отдельные каталоги.

В моем случае были созданы «images/files/» и «images/tmp/» соответственно для загружаемых и временных файлов.

После того, как значения вышеописанных полей были изменены, рекомендую в правом верхнем углу нажать на кнопку «Сохранить и Закрыть»

Изменения внесённые нами вступили в силу и теперь необходимо все в том же разделе «Настройка» перейти на вкладку «Настройка изображений».

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

• Путь к оригиналам изображений

• Путь к картинкам категорий

• Путь к картинкам обложек альбомов

• Папка хранения аватаров

Для каждого из этих текстовых полей необходимо создать на сервере, где расположен ваш сайт, отдельный каталог и указать к созданной папке путь

После того, как каталоги созданы и путь к ним прописан в соответствующие поля, не забудьте нажать на кнопку «Сохранить и Закрыть» в правом верхнем углу экрана.

На этом предварительную настройку компонента прошу считать законченной.

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

Настало время посетить закладку «Формы».

На данный момент список форм пуст. Исправим же это недоразумение!

В правом верхнем углу нажимаем кнопку «Создать». Откроется окно редактирования формы, где в текстовое «Название формы» мы должны вписать заголовок, по которому впоследствии поймём: для чего предназначена именно эта форма. Я вписал в данное поле слово «Каталог».

Переставим переключатель «Публикация» в положение «ДА»

Далее в правом верхнем углу нажимаем на кнопку «Сохранить и Закрыть».

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

Создание категорий в JoomCreator

Для создания категории переходим на одноимённую вкладку и в правом верхнем углу нажимаем кнопку «Создать».

Если вы планируете использовать для своих категорий изображения, то они должны быть предварительно загружены в каталог, который мы ранее указывали в настройках компонента. В моем случае это была папка «images/category/» .

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

Рассмотрим подробно страничку создания категории. В поле «Название» вписываем заголовок категории, в выпадающем списке «Форма» необходимо выбрать ту форму в которой будут выводиться категории. Мы выбираем «Каталог».

Переключатель «Публикация» включаем в режим «ДА».

Выпадающий список «Категория — родитель» игнорируем на данный момент. Он необходим в том случае, если вы планируете создавать сложную иерархию категорий.

Картинка категории — здесь представлен выпадающий список изображений, загруженных в каталог категорий. Поскольку я решил создать категорию под названием «Чайники», то и выбрал соответствующую картинку
 

После того, как все поля заполнены, нажимаем в правом верхнем углу кнопку «Сохранить и закрыть».

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

Создание элементов формы

Один из самых ответственных моментов нашей работы — это создание элементов нашей формы. Переходим на вкладку «Элементы» и, практически по привычке, нажимаем кнопку «Создать» в правом верхнем углу экрана.

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

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

Несмотря на то, что элементы можно создавать в произвольном порядке, предлагаю в первую очередь создать обязательный элемент «Заголовок».

Приступим к изучению страницы создания элементов:

Формы — данный выпадающий список позволяет выбрать форму, к которой будет относиться выбранный элемент. Выбираем «Каталог»

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

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

Размер поля базы данных 1-255*** - это одно из загадочных полей для тех, кто незнаком с программированием сайтов.

На самом деле значения полей для каждого элемента прекрасно расшифрованы в разделе справки компонента. Однако, пользоваться справкой при создании элементов не всегда удобно, поэтому мы сохранили данную таблицу в отдельный PDF файл. Скачать его можно по этой ссылке: http://sitogon.ru/images/stories/Joomla/JoomCreator/elements.pdf

Откройте эту таблицу и обратите внимание на самый правый столбец, названый, как: «Размер поля базы данных для формирования поля таблицы Б»

Мы видим, что напротив элемента «Заголовок» написано, что можно выставлять значение не более 255. Прислушаемся же к умной таблице и поставим в текстовое поле «Размер поля базы данных» значение 255

Заголовок для элементов типа "Кнопка" — данное поле оставляем пустым, поскольку мы в данном случае не создаем кнопку

Комментарии — это поле выводится в форму ввода данных на фронте сайта всплывающей подсказкой

Публикация — выставляем данный переключатель в положение «ДА». В противном случае наш элемент будет не опубликован.

Обязательно для ввода — здесь, в общем-то, все понятно. Если данный элемент заполняется пользователем с фронта сайта через форму ввода, то это текстовое поле от него потребуют обязательно чем нибудь заполнить. В данном случае мы установим переключатель в положение «ДА».

Только для чтения — этот переключатель необходим в основном, если вы используете и создаете форму калькулятора. Предположим, посетителю сайта предоставлены в распоряжение несколько текстовых полей, куда он вносит информацию, а затем нажимаем кнопку «Рассчитать». Так вот поле в котором будет выводиться результат вычислений должно быть только для чтения. Мы же в данном случае ничего не трогаем и оставляем переключатель в положении «НЕТ»

Макс. количество символов — это то количество символов, которое разрешается вводить в данное поле

Размер поля ввода — Размер поля ввода, это его размер (size) если не используется настройка стилями (width). Для многострочных элементов указывается через запятую количество строк и столбцов.

Класс CSS — если в вашем файле со стилями предусмотрен отдельный класс для элемента, то его можно указать в этом поле

Ввод только определённых символов — если вы желаете, чтобы при вводе данных можно было ввести только определённые символы, укажите их в данном поле. Это может потребоваться, если у вас создаётся «Цифровое поле» и буквы, в общем-то, вводить не нужно. В таком случае в данное поле можно прописать: «0123456789». То есть, вписываем символы без пробелов.

Содержание по умолчанию — как следует из названия данного параметра, сюда вводится содержимое, которое будет в вашем элементе по умолчанию.

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

Например делаем многострочное поле под названием "Введите URL вашего сайта", в настройках пишем HTML код:

<a href="[value]" target="blank">Переход на сайт</a>

В процессе сохранения [value] заменится на то что введет пользователь.

Итак, мы вкратце разобрались с настройками создания элемента. Нажмем на кнопку «Сохранить и закрыть» и далее опять нажмем «Создать». На этот раз мы создаем элемент категории.

Согласно таблице http://sitogon.ru/images/stories/Joomla/JoomCreator/elements.pdf мы выставляем значение поля базы данных равным 11, а в выпадающем списке «Тип элемента» выбираем «Категория»

Нажимаем «Сохранить и закрыть» и приступаем к созданию следующего элемента, который будет являться обычным символьным полем. Размер поля базы данных для такого поля будет равен «255». Поле будет называться - «Материал»

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

А вот для поля «Цена» мы выберем соответствующий тип элемента - «Стоимость»

Далее мы создадим два элемента, которые будут выводить изображение товара. Возникает законный вопрос — почему элементов будет два?

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

Начнём с так называемой обложки товара и создадим элемент, где в качестве типа укажем «Файл»

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

Пришло время создать следующий элемент, отвечающий за вывод нескольких изображений. В данном случае мы выбираем тип элемента, как «Файл в пакет»

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

При желании вы можете добавить два элемента, которые носят название «Теги» и «Краткое описание».

Элемент «Теги» позволит вам впоследствии добавлять ключевые слова, а «Краткое описание» - это так называемое мета описание (Meta Description)

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

Для этого в правом верхнем углу нажимаем кнопку «Generate Forms».

Настройка отображения каталога на сайте и в административной панели

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

Предлагаю перейти на закладку «Формы» и открыть недавно созданную форму «Каталог» для редактирования.

Перейдем на вкладку «Форма редактирования материала» и создадим нечто подобное:

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

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

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

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

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

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

Нажмём в правом углу экрана «Сохранить и Закрыть» и перейдем на вкладку «Материалы», где нажмём кнопку «Создать» в правом верхнем углу.

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

Заполним все требуемые поля и нажмём кнопку «Сохранить и закрыть». Не забудьте после сохранения поставить материал на публикацию:

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

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

Рассмотрим подробнее то, что я ввел в визуальном редакторе. Начнем с верхней части:

Тег [field11] — это обложка — изображение нашего товара

Тег [subject] — его название

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

Вот дальше мы видим два интересных тега.

{readon} — этот тег показывает кнопку «Подробнее». К примеру, если бы вместо {readon} было бы {readon Подробнее}, то на странице каталога, в кратком описании товара, под ценой появилась бы ссылка с текстом «Подробнее» ведущая на страничку с полным описанием продукта.

В нашем случае нам не нужен текст на этой ссылке, да и ссылка, в общем-то, абсолютно не нужна. Переходить на полное описание товара посетитель сайта будет после клика по его заголовку. Поэтому мы указывает тег {readon} без каких либо параметров.

{readmore} — данный тег сообщает о том, что вступительная часть материала завершена. И все, что будет расположено после этого тега — это страница полного описания товара

Ниже у меня создана вот такая таблица:

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

Под таблицей я разместил тег {socbm}, который выводит на сайт социальные закладки.

Если вы создавали элементы «Теги» и «Краткое описание», которые, как мы помним отвечают за ключевые слова и метаописание соответственно, то должны вставить в форму вывода два этих тега.

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

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

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

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

Настало время нажать на кнопку «Сохранить и закрыть» в правом углу экрана и приступить к созданию пунктов меню нашего каталога
 

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

Первоначально создадим пункт меню, переход по которому будет выводить весь список товаров нашего каталога. Для этого в административной панели зайдем «Меню — Главное меню— Создать пункт меню»

Далее нажимаем на кнопку «Выбрать» напротив текста «Тип меню».

В открывшемся списке, в разделе «JoomCreator» выбираем пункт «Материалы»

Нас отправит назад в раздел настроек пункта меню, где в поле «Заголовок» впишем слово «Каталог», а в правой части окна, в выпадающем списке «Выберете форму», сделаем одноимённый выбор.

Далее создадим пункты меню, привязанные к нашим категориям. Порядок действий будет аналогичен вышеописанному, за исключением того, что при выборе «Тип меню», мы на этот раз выбираем не «Материалы», а «Категории».

Далее в настройках меню укажем форму «Каталог», а в выпадающем списке необходимую категорию.

Чтобы список категорий выглядел, как подменю к основному пункту «Каталог», предлагаю выбрать данный пункт родительским. Делается это в выпадающем списке «Родительский элемент»

Таким образом создаем прочие пункты меню, для других категорий. Результат нашей работы можно посмотреть на сайте http://joomcreator.sitogon.ru/

На момент написания статьи в нашем каталоге размещался всего один товар, определенный в категорию «Чайники».
 

Заключение

Сегодня мы освоили азы работы с компонентом JoomCreator, узнали как сделать каталог на Joomla под его управлением. Основной и наиболее важный момент, который мы постигли в процессе данного урока — это то, что JoomCreator предоставляет в ваши руки мощнейший инструмент по созданию практически любого решения. Это необязательно будет каталог под Joomla. JoomCreator - превосходный компонент каталога для Joomla!

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

В будущем мы продолжим изучение JoomCreator, в планах статья, посвященная созданию формы обратной связи

Пишите, задавайте вопросы на форуме

С уважением, Владимир Егоров