Расширения

Уроки DJ-Classifieds (часть 4). Как сделать сайт доски объявлений

 

 

DJ-Classifieds 3 – готовое решение доски объявлений Joomla с шаблонами, множеством настроек и возможностью заработка.

Видео

 

  • Отображение модулей во вкладках (интеграция с DJ-Tabs) – с 00:00.
  • Свойства товаров – с 05:10.
  • Вложения файлов в форме обратной связи с продавцом – с 07:30.
  • Прикрепление файлов к объявлениям – с 08:35.
  • Как пользователям отправлять личные документы администратору – с 12:02.
  • Аукцион – с 13:04.
  • Изменение размера изображений – с 17:50.
  • Водяной знак на изображения – с 21:12.

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

Расширение переведено на русский, украинский, английский и другие языки. Есть интеграция с платёжными системами, включая Робокассу. Благодаря интеграции с различными компонентами можно расширить функциональность: создать систему личных сообщений между продавцами и покупателями, сделать галерею и слайдер объявлений, создать AMP версию страниц и многое другое.

В предыдущей статье «Уроки DJ-Classifieds (часть 3). Доска объявлений Joomla 3» мы, в основном, рассмотрели вопросы, связанные с дополнительными полями и скрытием/отображением тех или иных элементов на страницах категорий объявлений. В этой части поговорим об изображениях, интеграции с компонентом вкладок, добавлением видео и файлов на страницы объявлений.

В статье будет рассмотрена последняя, на момент её написания (20.09.2017), стабильная русскоязычная версия DJ-Classifieds 3.6.8 и Joomla 3.7.5. Шаблон фронтальной части сайта JM Services 1.0.4 (фреймворк EF 4.7.8), шаблон административной части сайта – Isis 1.0. Горизонтальное меню – DJ-MegaMenu Pro 3.5.4.

Демонстрационный сайт базируется на «пакете» с «быстрым стартом» (Quickstart), который предоставляется с DJ-Classifieds по отдельной подписке. Поэтому содержимое сайта (тексты объявления, названия категорий и т.д.) содержит англоязычные материалы.

Отображение модулей во вкладках (интеграция с DJ-Tabs)

Рассмотрим пример отображения модулей с объявлениями DJ-Classifieds во вкладках. В качестве расширения вкладок используется DJ-Tabs 1.3.4. Для примера отобразим во вкладках последние добавленные объявления и объявления с продвижением «Спец». Описанный ниже способ актуален для отображения во вкладках любых модулей, не только DJ-Classifieds. Предполагается, что DJ-Tabs у Вас уже установлен.

Шаг 1. Перейдите в Расширения – Модули и создайте модуль «DJClassifieds Items». В настройках модуля (рисунок ниже) укажите в качестве позиции какую-то уникальную позицию, в моём примере это «novye-obyavleniya». Для опции Число колонок оставьте «1», а на вкладке Привязка к пунктам меню выберите На всех страницах.

DJ-Classifieds
DJ-Classifieds

Шаг 2. По аналогии создайте ещё один такой же модуль. Но укажите другую позицию. Она тоже не должна совпадать с позицией шаблона или DJ-Classifieds. В моём примере – «spets-obyavleniya». Для опции Только платные ''Спец'' укажите Да.

Шаг 3. Перейдите в Компоненты – DJ-Tabs – Группы и создайте новую группу (рисунок ниже). Просто введите понятный Вам заголовок и сохраните её.

Шаг 4. В самом DJ-Tabs перейдите в раздел Элементы и создайте новый элемент (рисунок ниже). Укажите такие опции:

  • Название. В принципе, любое.
  • Группа. Та, что Вы создали на предыдущем шаге. В моём примере – «Объявления».
  • Тип. Позиция модуля.
  • Позиция. Название позиции модуля новых объявлений, который Вы создавали на первом шаге. В моём примере – «novye-obyavleniya»
  • Состояние. Опубликовано.
Новая вкладка
Новая вкладка

Шаг 5. По аналогии создайте ещё один такой же элемент, но для спец-объявлений. В моём примере его позиция – «spets-obyavleniya».

Шаг 6. Перейдите в Расширения – Модули и создайте модуль «DJ-Tabs». В качестве группы укажите ту, которую Вы создали на 3-м шаге (рисунок ниже). Укажите позицию шаблона или DJ-Classifieds, где нужно выводить модуль со вкладками.

Настройка модуля вкладок
Настройка модуля вкладок

На рисунке ниже показан пример того, что пользователь увидит на сайте.

Объявления во вкладках
Объявления во вкладках

Стиль вкладок можно изменить в настройках модуля вкладок, также можно отображать объявления не во вкладках, а в аккордеоне (опция Макет). Если нужно изменить заголовок вкладок, то это редактируется в Компоненты – DJ-Tabs – Элементы (опция Названия в настройках элементов). Если у Вас под вкладками отображаются заголовки модулей, то в настройках нужного модуля выберите Скрыть для опции Показывать заголовок.

Свойства товаров

Если Вас интересует, как сделать доску объявлений с возможностью продажи/покупки товаров прямо на сайте, ознакомьтесь с предыдущей статьёй «Уроки DJ-Classifieds (часть 2). Монетизация, валюта, оплата». У этих товаров могут быть дополнительные свойства, например, «Цвет», «Размер», «Тип обивки» и так далее.

Предполагается, что Вы уже настроили DJ-Classifieds для продажи товаров так, как описано в предыдущей статье и у Вас уже есть соответствующее объявление.

Чтобы настроить такие типы, создайте дополнительное поле и в его настройках перейдите на вкладку Купить сейчас (рисунок ниже). Покажу на примере поля из предыдущей статьи. Активируйте опцию Вариант продукта и укажите значения (через точку с запятой «;»).

Редактирование поля
Редактирование поля

Затем перейдите в настройки нужного Вам объявления на вкладку Купить сейчас (рисунок ниже, верхняя часть) и укажите количество доступных товаров с тем или иным свойством. Аналогично можно сделать во фронтальной части сайта (рисунок ниже, нижняя часть).

Настройка свойств товара
Настройка свойств товара

Во фронтальной части сайта (рисунок ниже) пользователь сможет выбрать нужный ему вариант товара.

Как сделать сайт доски объявлений
Как сделать сайт доски объявлений

Вложения файлов в форме обратной связи с продавцом

Как Вы знаете, DJ-Classifieds позволяет сделать сайт доски объявлений с возможностью связи покупателя с продавцом при помощи формы обратной связи. Ещё есть личные сообщения, но для этого нужен платный плагин. А вот форма обратной связи – штатное средство компонента. Вы можете включить возможность отправки файлов при помощи формы. Для этого перейдите в настройки DJ-Classifieds на вкладку Оформление и в области Вид объявления активируйте опцию Добавить файл в форму спросить продавца. Тут же Вы сможете указать, какие типы файлов можно передавать через форму (опция Форма спросите продавца файл - разрешенные типы) и какой их максимальный размер (опция Форма спросите продавца, файл - максимальный размер). В результате, во фронтальной части сайта пользователь увидит форму с дополнительным полем для вложения файлов (рисунок ниже).

Вложения в формы
Вложения в формы

Прикрепление файлов к объявлениям

DJ-Classifieds позволяет сделать сайт доски объявлений с возможностью прикрепления файлов к объявлениям и с возможностью прикрепления файлов пользователями к своему аккаунту для администратора. То есть, файлы, прикреплённые к объявлению, могут загружаться со страниц товаров, например, инструкции, рекламные брошюре, драйвера и так далее.

 А файлы, которые авторы объявлений прикрепляют в свой профиль – это личные файлы. Их видят только администраторы сайта и те, кто прикрепил эти файлы. Там могут быть сканы паспорта или других документов. Они могут понадобиться для удостоверения личности и так далее. Примерно так, как проверяют фрилансеров на сайтах бирж.

Для этого служит специальное расширение «Attachments App for DJ-Classifieds» (плагин «DJ-Classifieds - Файлы вложения»). Он не входит в стоимость обычной лицензии на DJ-Classifieds. Данный плагин работает с DJ-Classifieds 3.4 и более новыми версиями.

В обновлённой версии были добавлены новые возможности.

Предполагается, что плагин «DJ-Classifieds - Файлы вложения» у Вас уже установлен. Рассмотрим, как можно прикрепить файл к объявлению. Перейдите в Расширения – Плагины, найдите плагин «DJ-Classifieds - Файлы вложения» и зайдите в его настройки (рисунок ниже).

Сделать сайт доски объявлений
Сделать сайт доски объявлений

Обязательно включите плагин и активируйте опцию Загрузки в объявлениях. По большому счёту, этого достаточно. Но Вы можете ещё задать разрешённые для загрузки форматы файлов (опция Форматы вложений), ограничение по размеру файла (опция Макс. Размер вложения [Кб]) и включить ограничение на количество загружаемых файлов из административной и фронтальной части сайта (опции Макс. лимит вложений (бэкенд) и Макс. лимит вложений (фронтэнд) соответственно).

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

Прикрепления файлов к объявлениям
Прикрепления файлов к объявлениям

На странице объявления пользователь увидит небольшой список с заголовками, размером и форматом файла (рисунок выше, нижняя часть). Обратите внимание, что «реальный» URL файла «скрыт». То есть пользователи не увидят, где именно на сервере лежит сам файл.

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

Как пользователям отправлять личные документы администратору

Действия аналогичны вышеописанным, только в настройках плагина «DJ-Classifieds - Файлы вложения» нужно активировать опцию Загрузки в профиле. После этого, во фронтальной части сайта пользователи смогут добавлять свои личные документы, доступные только администратору (рисунок выше, средняя часть).

Администраторы смогут скачать эти файлы в админке, в самом компоненте DJ-Classifieds – Профили пользователей – Имя пользователя – Вложения (рисунок выше, верхняя часть).

Добавление видео в объявление

На своём сайте рекламных объявлений Вы можете позволить посетителям добавлять видео к описанию их товаров/услуг. Для этого перейдите в настройки DJ-Classifieds на вкладку Глобальные и в области Специальные настройки включите опцию Использовать 'Видео'. Теперь можно добавлять ссылку на видео с YouTube или Vimeo при создании и редактировании объявлений. Это можно сделать как в админке, так и во фронтальной части сайта.

Добавление кнопок социальных сетей

В предыдущей статье «Обзор AddThis Joomla. Статистика социальных сетей» уже рассматривался сервис кнопок социальных сетей. Из него Вам нужно получить только код для вставки. Как альтернативу предлагаю ещё такие сервисы:

Когда настроите один из понравившихся сервисов и получите код для вставки на сайт, перейдите в настройки DJ-Classifieds на вкладку Оформление и в области Вид объявления активируйте опцию Позиция социальных кнопок, выбрав нужное положение кнопок и вставьте полученный в сервисе код в поле Код социальных кнопок. На рисунке ниже, в верхней части, показан пример вставки кнопок от AddThis, когда для опции Позиция социальных кнопок задано Сверху. А в нижней части рисунка ниже – Снизу.

Сайт объявлений Джумла
Сайт объявлений Джумла

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

Аукцион

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

Давайте рассмотрим, как сделать доску объявлений с аукционом.

Шаг 1. Сперва перейдите в настройки DJ-Classifieds на вкладку Глобальные и в области Специальные настройки включите опцию Аукционы. В поле Аукционы - ставки отображаются можно указать количество последних добавленных ставок, отображаемых на странице объявления. При помощи опции Имя участника торгов можно скрыть или отобразить имена участников торгов на странице объявления.

Шаг 2. Спуститесь ниже к области Настройки уведомлений и для опции Триггер отправки уведомлений выберите Ссылка на CRON. Сама ссылка такова: «http://vash-sajt.com/index.php?option=com_djclassifieds&task=cronNotifications». Замените «http://vash-sajt.com» на протокол и доменное имя Вашего сайта. Теперь Вам нужно настроить задачи (планировщик, CRON) у себя на хостинге. Если Вы не знаете, как это сделать, обратитесь в службу технической поддержки Вашего хостинг-провайдера. Предоставьте ему ссылку, уже с Вашим доменом и попросите установить интервал, например, 10-20 минут. Это нужно для регулярных автоматических отправок писем с уведомлениями о событиях на Вашей доске объявлений. В частности, о новых ставках.

Шаг 3. Перейдите в раздел Шаблоны писем и отредактируйте (переведите) такие шаблоны:

  • Аукционы - конец - уведомление автора по электронной почте.
  • Аукционы - конец - уведомление автора по электронной почте - нет заявок.
  • Аукционы - конец - уведомление автора по электронной почте - резервная цена не достигнута.
  • Аукционы - конец - уведомление претендентов по электронной почте.
  • Аукционы - конец - уведомление победителя по электронной почте.
  • Аукционы - конец - уведомление победителя по электронной почте - резервная цена не достигнута.
  • Аукционы - новое предложение - уведомление автора по электронной почте.
  • Аукционы - новое предложение - уведомления претендентов по электронной почте.
  • Аукционы - новое предложение - перекупить пользователю - уведомление по электронной почте.

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

Шаг 4. Теперь перейдите в настройки нужного Вам объявления и на вкладке Аукцион настройте существующие опции (рисунок ниже, верхняя часть). Тут же отображаются ставки, которые были сделаны другими пользователями. Во фронтальной части сайта это выглядит аналогично (рисунок ниже, нижняя часть). Опция Резервная цена – это минимальная цена, ниже которой товар не может быть продан. А на вкладке Новое, в поле Цена можно задать стартовую цену.

Аукцион
Аукцион

На странице объявления это выглядит так, как показано на рисунке ниже.

Аукцион на сайте
Аукцион на сайте

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

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

Изменение размера изображений

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

Для этого перейдите в настройки DJ-Classifieds на вкладку Изображения и в области «После внесения изменений секции изображения…» измените значения ширины и высоты. Тут есть настройки для изображений в разных частях сайта (в категориях, на страницах объявлений и так далее). Все они подписаны.

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

На этой вкладке Вы сможете настроить «алгоритм обрезки» путём конфигурации опций: Метод обработки изображений, Область обрезки (горизонтально), Область обрезки (вертикально).

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

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

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

Водяной знак на изображения

DJ-Classifieds позволяет сделать сайт доски объявлений с автоматическим нанесением водяных знаков на загружаемые изображения. Чтобы воспользоваться данной возможностью перейдите в настройки компонента на вкладку Изображения и в области «Водяной знак…» и активируйте опцию Водяной знак. При помощи неё Вы сможете указать, на какие изображения необходимо наносить знак (только изображения объявлений или и на аватарки пользователей).

Тут же Вы можете настроить размер (опция Размер водяного знака) и горизонтальное/вертикальное положение изображения (опции Позиция водяного знака (горизонтальная) и Позиция водяного знака (вертикальная)).

Лучше всего для файла изображения водяного знака использовать формат PNG. Имя файла должно быть «djcf_watermark.png». Файл должен размещаться в корне папки изображений Joomla – «images».

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

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

Замена изображения «Нет изображения»

В случаях, когда в настройках DJ-Classifieds отключена опция Требуется изображение (вкладка Изображения), и Ваши посетители не добавили изображения к объявлениям, на сайте появится «изображение-заглушка». Для того, чтобы задать свою «заглушку», перейдите в настройки компонента на вкладку Изображения и в поле Пустые пути изображения укажите путь к Вашему «изображению-заглушке». Например, «/components/com_djclassifieds/assets/images/». По умолчанию, файлы называются так: «no-image.png», «no-image-big.png», «no-image-old.png». Форматы файлов могут быть такими: GIF, JPG и PNG.

В следующей статье «Уроки DJ-Classifieds (часть 5). Создание сайта доски объявлений» будут рассмотрены вопросы ограничения доступа пользователей к разным частям сайта, вопросы по работе с картой Google и адресами.

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

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

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

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