Biznes Ucoz Доски Объявлений
Задача, которую я поставил перед собой на сегодня - привести в порядок и настроить нужным мне образом еще один модуль системы - "Доска объявлений".
Это один из популярных модулей, возможности его использования довольно широки, и ограничиваются только вашей фантазией и знаниями. Мне необходимо будет решить такие подзадачи:
- добавить необходимые мне разделы и категории
- привести внешний вид модуля на всех этапах работы с ним к общему виду всего сайта
- добавить специфические возможности - например, удобный показ фотографий в объявлении, информацию итд.
Начнем с добавления необходимых разделов и категорий. Работа с ними построена в модуле так, что можно создать удобную иерархию объявлений, разделив их на понятные всем группы. Начну с разделов. На первое время я хочу чтобы пользователи могли размещать объявления связанные с автомобилями и запчастями к ним (впоследствии добавятся и другие разделы). Завожу два раздела - "Автомобили" и "Автозапчасти" . Чтобы структура была более понятна, и все объявления не были собраны в одну большую кучу - разделим их на категории. Для раздела "Автомобили" это будут категории "Продам авто", "Куплю авто", "Аренда авто" и "Автоуслуги".
Для раздела "Автозапчасти" это будут категории "Продам запчасти" и "Куплю запчасти". Для начала хватит. Результат моего труда можно увидеть на скриншоте.
Следующий этап - приведение внешнего вида модуля к единому стилю. Для этого я последовательно отредактировал каждый шаблон, применяя к нужным элементам разработанные ранее стили оформления, в частности класс:
.blockb { border:1px solid #666666; padding:2px; margin-bottom:1px; background:#EFEFEF; } Ничего нового в настройке дизайна модуля нет - поэтому подробно на этом останавливаться я не буду. Перейдем к более интересным задачам - в частности, созданию удобных функций для работы с объявлениями. Так как эффективное объявление само по себе предусматривает наличие фотографии предлагаемого товара, сделаем удобную навигацию по фото, прикрепленным пользователем к объявлению. Возможности системы позволяют добавлять до 10 изображений к объявлению - я ограничусь пятью, но сделаю их удобный просмотр непосредственно на странице объявления. В этом мне помогут предоставляемые системой коды, а именно $IMG_URL1..10$, $IMGS_ARRAY_JS$, $IMG_SMALL_URL1..10$. Реализую просмотр таким образом - слева от текста объявления будет размещен блок с изображениями, первое из которых будет показано сразу же, а остальные (если они будут) в виде небольших кликабельных изображений предпросмотра. По нажатию на изображение будет открываться большая картинка - изначально в новом окне, а чуть позднее я реализую это в виде лайтбокса.
Вот что получилось в итоге:
А это javascript, при помощи которого я сделал реализацию этой функции:
$IMGS_ARRAY_JS$ Хотелось бы задержаться на минутку и еще раз посмотреть на то, как работает код $IMGS_ARRAY_JS$. При добавлении нескольких изображений в объявление, для каждого из них формируется отдельная запись в переменной $IMGS_ARRAY_JS$, первый параметр которой содержит ссылку на изначальный вариант изображения и его размеры, а второй - на уменьшенный вариант для предпросмотра. Используя несложные функции мы разбираем этот массив - и выводим изображения так как нам надо.
