Модуль Views. Вывод списка товаров Ubercart.

Аватар пользователя userok

Вывод списка товаров при помощи представления (модуль views)

Приветствуем всех посетителей нашего сайта. В этой статье мы рассмотрим как выводить список товаров Интернет магазина, созданного на Drupal 7 с помощью модуля Ubercart. Напомним, что в предыдущих статьях нами были рассмотрены следующие вопросы:

Создание Интерннет-магазина Drupal 7 + Ubercart. Часть 1
Создание Интерннет-магазина Drupal 7 + Ubercart. Часть 2
Создание Интерннет-магазина Drupal 7 + Ubercart. Часть 3
Импорт товаров в Интернет-магазин Ubercart. Часть 1
Импорт товаров в Интернет-магазин Ubercart. Часть 2

На основании, материала, рассмотренного в указанных статья мы и будем продолжать совершенствовать наш Интернет-магазин.
Чем нас может не устроить вывод списка товаров стандартными средствами Drupal и как можно изменить это с помошью views? Давайте посмотрим наглядно:

Рисунок 1.

Views


Выбрав в меню группу товаров "Мыло", мы получили пустой список товаров, хотя было бы логичнее, чтобы появившийся список содержал все товары из двух дочерних категорий: «Мыло импортное» и «Мыло отечественное».

Рисунок 2.

Views

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

Устанавливаем модуль views. Включаем Views и Views UI в группе "Представления" в меню «Администрирование->Модули»

Рисунок 3.

Views


Выберем любую категорию в меню и обратим внимание на URL-адрес открывшейся страницы. Так как ранее мы создали наше меню на основе таксономии, мы видим, что при выборе категорий меню в адресной строке присутствуют символы «/taxonomy/term/» и после слэша следует номер термина, пока запомним этот момент, далее будет понятно по какой причине.

Рисунок 4.

Views


Итак, создадим своё представление для вывода списка товаров, переходим на страницу
«Администрирование->Структура->Представления» и жмём «Добавить новое представление».

Рисунок 5.

Views

Рисунок 6.

Views


В разделе «Показать» выбираем «Содержимое» типа «Товар», мы же список товаров собираемся отображать. Выводить представление на сайте будем в виде страницы, поэтому ставим соответствующую галочку. В поле путь указываем taxonomy/term/%, это необходимо для того, чтобы наше представление подменяло собой содержимое когда пользователь выбирает какую-либо категорию в меню, символ процента здесь - это знак подстановки, т.е если путь в адресной строке будет выглядеть …/taxonomy/term/113, то значение 113 будет передано нашему представлению.

Формат отображения выбираем по своему вкусу и потребностям, однако «неформатированным списком» легче будет потом управлять при помощи CSS. Жмём «Продолжить редактирование».

Рисунок 7.

Views


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

Содержимое: Body
Содержимое: Изображение
Товар: Стоимость для продажи (Цена)
Товар: Форма добавления в корзину

Нажимаем ссылку «Добавить» напротив метки «Поля», в появившемся диалоге отмечаем галочками вышеперечисленные поля и нажимаем «Применить». Этого должно хватить для начала. Настраиваем поля как показано на рисунках ниже и после настройки каждого поля нажимаем «Применить(это отображение)»

Рисунок 8.

Views

Рисунок 9. Содержимое: Body

Views


Убираем галку создать метку и в раскрывающемся списке средство форматирования выбираем «Краткое содержание или обрезанный текст»

Рисунок 10. Содержимое: Изображение

Views


Убираем галку «Создать метку», «Стиль изображения» - thumbnail, чтобы картинки отображались миниатюрами, а не полноразмерными. Также выберем куда будет ссылаться картинка.

Рисунок 11. Товар: Стоимость для продажи (Цена)

Views


Ставим метку «Цена».

Рисунок 12. Товар: Форма добавления в корзину

Views


Убираем галочку «Метка». Сохраняем изменения. Следующее поле для редактирования - «Критерии сортировки». Здесь можно задать порядок сортировки списка товаров. Мы сделаем сортировку по цене. Нажимаем «Добавить» напротив метки критерий сортировки.

Рисунок 13.

Views


Выбираем «Товар. Стоимость для продажи» и нажимаем «Применить».

Рисунок 14.

Views


Ставим галку «Раскройте эту сортировку для посетителей, чтобы позволить изменять её». Те. пользователи будут иметь возможность отсортировать список по возрастанию и убыванию цены товара. Жмём «Применить». Включаем AJAX. Это необходимо чтобы при выборе другого порядка сортировки обновлялись данные на странице. В блоке «Расширенный» в группе «Прочие» → «Использовать AJAX- нет» нажимаем на ссылку «Нет» и включаем AJAX:

Рисунок 15. AJAX

Views


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

Рисунок 16.

Views

Рисунок 17. Content. Has taxomomy term ID with depth.

Views


Выбираем «Содержимое: Имеет идентификатор термина таксономии (с глубиной)» и нажимаем «Применить»

Рисунок 18.

Views


Выбираем значение для поля глубина, зависит от глубины вложенности вашего меню. Если вы хотите, чтобы выводились только товары из выбранной категории и дочерних, выбираете 1, если вам необходимо также вывести товары из выбранной категории, дочерних и являющихся дочерними по отношению к дочерним(:-)) выбираете 2 и.т.д. На нашем тестовом сайте пока нет большой вложенности, поэтому значение 5 полностью перекроет наши потребности.

В поле «Когда значение фильтра НЕ доступно» выбираем «Передать значение по умолчанию» и в раскрывающемся списке «Тип» «ID термина таксономии из URL», ставим галку «Загрузить фильтры по умолчанию со страницы термина». Нажимаем «Применить» и сохраняем изменения.

Представление создано. Теперь посмотрим что у нас получилось.

Рисунок 19.

Views


Мы видим, что работает сортировка по цене, при выборе категории «Мыло» отображаются товары из подкатегорий: «Мыло импортное» и «Мыло отечественное», т. е. мы улучшили функционал Интернет-магазина с помощью модуля views. Как выше упоминалось расположение полей товаров неформатированного списка можно настроить, например, с помощью CSS таблиц вашей темы, однако эта тема отдельной статьи. Можно поиграться с альтернативными значениями формата вывода на странице настройки представления, такими как: HTML список, Меню перехода, Неформатированный список, Сетка, Таблица, но это уже самостоятельно, а наша статья на этом закончена. Оставайтесь с нами.

Скачать статью с DepositFiles

Эта статья опубликована под Creative Commons Attribution ShareAlike лицензией.

Владислав (не проверено)
<p>Скажите пожалуйста ,а как вы заменили старое представление на вновь созданное?</p>

Добавить комментарий