Магазин на Drupal Commerce, часть 2: организация и представление товаров

19 Aug, 2014

Часть 1 / Часть 2 / Часть 3 / Демо

Немного теории

В Commerce применен несколько необычный подход к организации товаров: товар как таковой — это сущность (entity), а не нода. Он по умолчанию имеет цену, артикул и название. Можно добавить к нему дополнительные поля стандартным способом, например, размер или изображение. Также можно создать несколько типов товаров с разными полями. Посмотреть все товары и добавить новый можно на странице «Магазин → Товары» (admin/commerce/products).

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

Пример: у нас есть одна модель кроссовок разных размеров. Мы можем к товару добавить поле «размер», создать несколько вариантов этих ботинок разных размеров (41, 42, 43 и т. д.), и отобразить их в одной ноде. Покупатель на одной странице сможет выбрать себе нужный размер и добавить его в корзину. Также можно для разных размеров установить свою цену и количество на складе (с помощью модуля Commerce Stock). Т.е. то, что обычно делается с помощью атрибутов товара в других CMS или в Ubercart, в Commerce делается созданием отдельных вариантов товара.

При таком подходе, естественно, возникает вопрос: а не слишком ли напряжно на каждый чих создавать отдельный товар, да потом еще пытаться собрать несколько товаров в одном Product Display? Ну ладно, когда товаров 50 или 100, а если их 5000? Контент-менеджер повеситься! К счастью, существуют модули, которые облегчают создание и управление товарами и их отображениями, и дальше я о них расскажу.

Еще один непростой момент — это импорт большого количества товаров, например, из файла CSV, ведь нам нужно (желательно из одного файла) импортировать и товары, и Product Display к ним. Возможно, я раскрою этот процесс в одной из следующих статей, пока же скажу, что все решаемо с помощью модулей Feeds и Commerce Feeds. Рекомендую также посмотреть скринкасты по импорту: раз, два, три.

Как вы уже поняли, и к товару, и к Product Display можно добавлять поля для свойств, таких как производитель, цвет, изображение или категория. В каких же случаях эти поля надо добавлять к товару, а в каких — сразу к Product Dispaly? Мое мнение, что к товару надо добавлять только те поля, которые могут отличаться у одной модели: цвет, размер, в некоторых случаях фотография. Все остальное лучше прилепить к Product Display: бренд, категория и т. д. Но тут, конечно, надо исходить из конкретных ситуаций.

На этом я заканчиваю треп и перехожу к практике.

Структура каталога и его меню

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

Все ролики будут разделены на следующие категории: Фрискейт, Скоростные, Агрессивные, Фитнес и Детские.
Идем в Структура → Таксономия → Добавить словарь (admin/structure/taxonomy/add), и добавляем его со следующими параметрами:
Название : Каталог
Машинное имя : catalog

Сохраняем и добавляем термины (admin/structure/taxonomy/catalog/add)

Чтобы отобразить каталог, воспользуемся модулем Taxonomy Menu, который создаст блок с ссылками на наши термины. Скачиваем модуль, включаем, добавляем меню «Каталог»: Структура → Меню → Добавить меню (admin/structure/menu/add).

Затем идем в настройки словаря каталога (admin/structure/taxonomy/catalog/edit), где появится новый раздел с настройками модуля Taxonomy Menu. В выпадающем списке выбираем наше новое меню и сохраняем.

Идем в список блоков: Структура → Блоки (admin/structure/block) и размещаем наш блок в нужном месте.

Аналогично делаем для брендов. Создаем меню (admin/structure/menu/add), размещаем его в нужном регионе (admin/structure/block), затем создаем словарь и в его настройках указываем, в каком меню его отобразить. Остается только добавить термины брендов и готово.

Добавление полей к товарам и к Product Display

Размер

Изначально у каждого товара присутствуют следующие поля: название, артикул, цена, статус (вкл/выкл). Добавим еще одно: "Размер", чтобы покупатель сразу видел доступные к заказу размеры и мог выбрать нужный ему.

Идем в Магазин → Товары → Типы товаров → Товар → Управление полями (admin/commerce/products/types/product/fields), добавляем поле со следующими параметрами:

Метка : размер
Машинное имя : field_size
Тип поля : Список (текст)
Виджете : Выбор из списка
Количество значений: 1

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

А также отмечаем «Enable this field to function as an attribute field on Add to Cart forms» (Активировать это поле как поле атрибута на форме добавления в корзину) в разделе «ATTRIBUTE FIELD SETTINGS», чтобы при просмотре товара рядом с кнопкой добавления в корзину был выбор размера.

Поля изображения, бренда и категории я добавлю не к самому товару, а к Product Display. Если вы используете чистый друпал, а не сборку, надо сначала добавить этот тип контента. Идем в Структура → Типы Материалов → Добавить материал (admin/structure/types/add) со следующими настройками:

Имя: Product Dispaly
Машинное имя: product_display
Комментарии: закрыто

Затем жмем «Сохранить и добавить поля».

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

На следующей форме добавляем поля для изображения, а также для каталога и бренда (тип — ссылка на термин).

Product Reference

Также нам надо добавить тип поля «Ссылка на товар» (Product Reference), чтобы мы могли указывать товары для отображения при создании Product Display. Количество значений в моем случае будет «неограниченно», т. к. у меня одному Product Display соответствует несколько товаров разных размеров. Также у этого поля доступны разные виджеты для выбора товаров: выбор из списка, флажки переключатели и автодополняемое текстовое поле. Пока можно выбрать любое.

Настройки поля Product Reference:
Метка: Product(s)
Машинное имя: field_products
Тип поля: ссылка на товар (product reference)
Виджет: выбор из списка
Количество значений: неограниченно.

Все встроенные виджеты поля Product Reference имеют один недостаток — мы не можем одновременно с созданием Product Display создать также и товары к нему, надо сперва создавать товары, затем Product Display и связывать их вместе. Конечно, это неудобно. И здесь нам на помощь приходит модуль Inline Entity Form.

Простое создание Product Display и товаров в одной форме

Inline Entity Form

Модуль Inline Entity Form позволяет нам создавать товары сразу при создании Product Display, в одной форме. Забираем модуль здесь, устанавливаем и снова идем в настройки нашего поля Product(s): Структура → Типы материалов → Product Display → Управление полями → Product(s) → изменить. Во вкладке «Тип виджета» у нас появились новые пункты: «Inline Entity Form — Multiple values» (выбираем, если одному Product Display соответствует несколько товаров) и «Inline Entity Form — Single Value» (если у нас один Product Display — один товар).

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

  • «Удалить зависимые товары когда родительская сущность удалена» - это позволит избежать «потерянных» товаров, которые не привязаны ни к одному Product Dispaly
  • «Автоматическое создание заголовка» - данная опция позволит не заботиться о заполнении названия товара, оно будет создаваться автоматически из названия Product Display и аттрибутов товара (в данном случае размера)

AutoSKU

Еще один классный модуль, который позволит нам избежать лишнего ручного труда — это AutoSKU. Он генерирует артикул товара по настраиваемому шаблону, например из названия товар и аттрибутов. Устанавливаем модуль, затем идем в Магазин → Товары → Типы Товаров → Product → Правка (admin/commerce/products/types/product). Отмечаем «Автоматическая генерация SKU» и настраиваем шаблон.

Настройка commerce autosku

Отлично, теперь при создании Product Display мы сразу может создать и товары, которые к нему относятся, а также нам не надо вводить название и артикул товаров, достаточно отметить размер и ввести цену. Кстати, ввод цены тоже легко автоматизировать, например, с помощью функции на javascript брать значение из первого созданного товара и добавлять его при создании остальных, но я пока не стал заморачиваться с этим.

Представление (views) для управления товарами

Итак, я заполнил сайт некоторым количеством контента, но как с ним управляться? Сейчас список наших товаров можно посмотреть на странице Магазин → Товары (admin/commerce/products), а созданные Product Display — на штатной странице управления содержимым (admin/content). Правда, хочется чего-то более удобного, и чтобы в все одном месте.

Мы сделаем вьюху, которая будет отображать картинку, название, бренд и категорию Product Display, а также цену товаров. Кроме того, надо иметь возможность фильтровать по названию, бренду и категории, и сортировать по колонкам. Выглядеть это будет так:

Идем в Структура → Представления → Добавить представление (admin/structure/views/add), и делаем вьюху со следующими параметрами:

Имя представления: Product Manager
Машинное представлениe: product_manager
Показать «Содержимое» типа «Product Display»
Создать страницу: отмечено (по умолчанию)
Заголовок страницы: Управление товарами
Путь: http:mysite.com/admin/content/product-manager
Формат отображения: таблица
Элементов отображения: 30
Использовать постраничную навигацию: отмечено (по умолчанию)

Жмем «Продолжить редактирование» и идем дальше.

Пока мы можем показать только данные, которые относятся к Product Display, но ведь мы хотели также, чтобы в табличке была цена, а цена у нас относится к товарам. Поэтому раскрываем свернутый раздел «Расширенный», напротив «Связи» нажимаем «Добавить», добавляем «Содержимое: Referenced products»

Тут появляется проблема: если у нас к одному Product Display относятся несколько товаров, то Product Display будут дублироваться по числу входящих в него товаров. Если же у нас структура: один Product Display — один товар, то проблемы нет.

Чтобы убрать дублирование, меняем «Использовать агрегацию», на "Да". Пока эффекта нет, но сейчас будет.

Добавляем фотографию товара: Поля → добавить → отмечаем «Содержимое:Изображение» → Применить.

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

Тип агрегации: Группировать результаты (по умолчанию)
Колонка группы: Идентификатор сущности (Entity ID в англ. версии)

Жмем «Применить и продолжить», далее:

Создать метку: отмечено
Метка: Изображение
Стиль изображения: Thumbnail (100x100)
Изображение как ссылка на: Содержимое

В общем, аналогично изображению добавляются бренд, категория и цена (Commerce Товар: Price), ничего сложного нет.

Сортировка

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


Фильтр

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

Настройка доступа и меню

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

Тип: Обычный пункт меню
Заголовок: Управление товарами
Меню: Management

В итоге настройки этого представления выглядят так:

а менеджер сайта увидит примерно такую картину:

Представление (Views) для отображения каталога товаров пользователям

Представление каталога является во многом похожим на то, которое делалось для управления товарами ранее, поэтому я не буду столь подробно останавливаться на нем. Основные моменты таковы:

Нам надо указать путь для представления как «/taxonomy/term/%», это перезапишет стандартный вывод таксономии на наше представление, и добавить контекстный фильтр «Содержимое: Имеет идентификатор термина таксономии»
В связях тоже понадобится добавить «Содержимое: Product(s)» для того, чтобы отобразить цену товара и иметь возможность сортировать товары по цене.

Чтобы отобразить доступные размеры и кнопку «Положить в корзину», добавим поле «Содержимое: Product(s)», и в настройках поля в выпадающем списке «Средство форматирования» выбрать «Форма добавления в корзину»

Настройки данного представления выглядят так:

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

Создание магазина на Drupal Commerce:
Часть 1 / Часть 2 / Часть 3 / Демо

2 комментария

by Сергей on вс, 28/09/2014 - 18:23

Здравствуйте. Спасибо за ваши очень классные уроки. Однако, на этапе создания
Представление (Views) для отображения каталога товаров пользователям, я столкнулся с проблемой. При включении агрегации каталог не отображается. А при выключении каталог товаров появляется, но не функционирует поле списка размер т.е. при выборе размера
цена товара остается прежней. Поясните пожалуйста детальнее настройки полей в представлении для отображении каталога товаров. До этого этапа все шло отлично!

by Попутчик on ср, 11/03/2015 - 11:50

Отличный материал. Очень трудно найти по этой теме что-нибудь стоящее. Спасибо!

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

Filtered HTML

  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешённые HTML-теги: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Строки и параграфы переносятся автоматически.

Plain text

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