Давайте рассмотрим несколько интересных моментов в реализации данного интернет-магазина Stendmodels.

Сайт реализован на Drupal 6 и Ubercart с дополнительными модулями. Выбрна 6-ка из-за наличия многочисленных модулей для Ubercart и отсутсвия их под 7-ку.

Визуальные эффекты сайта

Попробую начать с самого верха сайта.

Эффекты в верхнем меню сайта реализованы с помощью jQuery эффекта animation при наведении на элемент.

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

Эффект затухания меню

Рис.1 Эффекты меню

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

При наведении на изображении товара в каталоге оно автоматически увеличивается - это работа модуля Imagecache hover preview - замечательный модуль.

Работа модуля Image Hover Preview

Рис. 2 Работа модуля Image Hover Preview

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

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

Функциональные особенности разработки сайта

Каталог товаров

Первое, что явно бросается в глаза - это замена дефалтного каталога ubercart. Мы создали представление и переписали пути для отображения каталога не с помощью уберкартовой заготовки, а с помощью нашей вьюхи. Это позволило очень гибко настроить каталог так, как нам это было нужно: добавить фильтры необходимые, сортировки каталога, ну и конечно, сам внешний вид каталога тоже был преображен. Еще одной особенностью отображения каталога является то, что при клике на категорию товара мы выводим сразу не саму вьюху, а панель, с двумя представлениями. Первое представление - это непосредственно каталог, а второе, сразу под ним, это описание выбранной категории. Фильтрация идет по аргументу из панели, который берется из адресной строки браузера и является термином таксономии. Таким образом при клике на раздел, скажем "Техника" отображается панель, которая показывает 2 представления и передает этим представлениям фильтр - термин таксономии "техника". Первое представление соответственно отображает каталог на основе этого  термина, а второе отображает описание текущего раздела каталога (тоже осуществляется выборка материала определенного типа, с фильтром по термину). Специально для описания категорий был создан дополнительный тип материала, с привязкой его к словарю категорий товаров магазина.

Измененный каталог Ubercart, фильтры и сортировка каталога

Рис. 3 Измененный каталог Ubercart, фильтры и сортировка каталога

Еще одной интересной особенностью каталога является возможность использования фильтров и сортировки с помощью выпадающего списка. Это стало возможно с помощью использования модуля Views c 3-й версией API

Главная страница интернет магазина

Главную страницу формируем с помощью панели - модуль Panels. Это дает нам возможность выводить столько блоков товара, сколько нам нужно. Конкретно в данном сайте, мы вывели блок товаров "Специальные предложения" и блок "Топ просмотров".

Блок специальные предложения отображает товары с метками таксономии "специальное предложение", которые проставляет модератор сайта при редактировании или добавлении товара. Ну а дальше мы создаем вьюху, которая отбирает для нас товары с этой меткой и выводит с помощью еще одного замечательного модуля Views Slideshow и его плагина Views Slideshow: SingleFrame. Немного правки CSS и мы получаем горизонтальные слайды, которые превосходно сменяют друг друга с возможностью выбора эффекта смены слайдов.

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

AJAX блок корзины

В качестве блока корзины мы использовали Ubercart AJAX Cart - что позволяет делать заказы и добавлять товары в корзину не перегружая текущую страницу сайта, например прямо из каталога можно нажать кнопку купить и спокойно дальше листать каталог

Отображение старницы товара

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

Под описание основных свойств товара и кнопку покупки мы разместили 3 поля в вкладках - описание, доставка и оплата. Это сделано с помощью модулей CCK Fieldgroup Tabs и Tabs (jQuery UI tabs)

Отображение товара и группировка полей в группы с помощью Tabs

Рис. 4 Отображение товара и группировка полей в группы с помощью Tabs

Ну и в самом низу товара с помощью Taxonomy Redirect мы редиректим отображаемые вместе с товаром термины таксономии на соответствующие страницы каталога

Раздел статьи

Хороший раздел для продвижения интернет магазина по поисковикам. Отображаем ленту статей, с сортировкой по дате,  с помощью Views.

Функциональная часть интернет магазина

Склад товаров

Наш заказчик попросил добавить ему возможность автоматического отслеживания товаров на складе и блокировку возможности заказа товаров, которых уже нет в наличии. Собственно возможность ведения склада товаров включается модулем Store, который входит в состав Ubercart, а возможность деактивирования кнопки "купить" у товаров, которых нет в наличии реализует модуль Ubercart Out of stock Notification, который кроме того, что заменяет кнопку "купить" у товаров, которых нет на складе, также отправляет уведомления администратору сайта о том, что достигнуто определенное пороговое значения товара.

Адреса пользователей и заказчиков

Модуль Ubercart Addresses добавляет возможность указания, введения, хранения и выбора нескольких адресов непосредственно в профиле пользователя. Очень удобный модуль. Так как по умолчанию профиль пользователя и Ubercart никак не связаны между собой. Этот же модуль добавляет адреса из Ubercart в профиль пользователя.

 

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