Drupal Commerce - базовые понятия. Стилизуем товары в каталоге

Drupal: 
Уровень сложности: 
Модули: 

Drupal Commerce - мощный модуль, позволяющий работать с товарами и отдельными полями: выводить нужные поля в требуемом формате, стиле.

Вместе с Views можно отображать товары в каталоге с различными фильтрами, форматами отображения, выводить только нужные поля. Рассмотрим несколько примеров.

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

В предложенном уроке все стили CSS пишутся в файл темы сайта. Используемую по умолчанию тему сайта можно узнать по кнопке Внешний вид admin/appearance . 

В наших примерах используем базовую тему Adaptive Theme и её подтему с нашим названием (по умолчанию SubTheme). Соответвтенно мы правим файл /sites/all/themes/subtheme/css/global.styles.css Для вашей темы это может быть файл style.css в корне темы или в папке styles, css. Если у вас Bartik, то файл стилей находится в /themes/bartik/css/style.css

 

Добавление собственного имени строки для продуктов

Зачем это нужно: на сайте бывает много Представлений товаров и других представлений, и нужно прописать только товарам одинаковые стили карточек товаров в каталоге. Модуль Views добавляет по умолчанию в каждом представлении для отдельного блока материала класс "view-row". Если в стилях описывать опции для .view-row, тогда другие представления не для товаров будут отображаться неправильно. Поэтому нужно для всех Представлений товаров сделать специальный класс строки (элемента).

Это делается так:

  1. Откройте редактирование Представления
  2. В разделе Формат в строке Формат: Неформатированный список (возможно, у вас другой формат) - нажмите Настройки
  3. В поле "Класс строки" пропишите product
  4. Сохраните
  5. Проделайте то же самое для всех других Представлений товаров

Теперь вы сможете в файле стилей задать свойства карточки товара для всех представлений, так как везде используется класс строки "product".

Это очень удобно для стилизации товаров в Тегах, Каталоге, на Главной и в других местах.

 

Вывести цену и форму добавления в корзину на одной строке в каталоге товаров

Чтобы отображать два поля на одной линии нужно использовать CSS-стили для этих полей (они имеют классы)

1. Что прописать в CSS

  1. Нажмите правой кнопкой мыши на цену и далее - Просмотр кода элемента (то есть запустите фаербаг и найдите это поле)
  2. Скопируйте имя касса поля Цены, а также имя поля формы доабвления в корзину. В моём случае на странице Views товаров это были такие имена классов: .views-field-commerce-price, .views-field-add-to-cart-form
  3. Пропишите в файле стилей код с опциями display или float для этих полей на ваше усмотрение:
    .views-field-add-to-cart-form {display:inline-block; margin-left:4%;}
    .views-field-add-to-cart-form {display: inline-block;}
  4. Закачайте обновлённый файл стилей и обновите страницу

Возможные ошибки: если вы не нашли в фаербаг классы этих полей, тогда настройте Представление товаров тут admin/structure/views : в настройках Формата в области Показать: Поля или Тизер по кнопке Настройки добавьте галку: "Предоставлять элементы обертки полей по умолчанию" - это добавит всем компонентам стандартные классы, содержащие имена полей.

Но это решение не даёт возможности сделать оба поля по центру. Если пытаться в CSS добавить опцию text-align: center; для обоих полей, то это не будет работать - поля станут отдельными строками. Для решения проблемы продолжаем: объединими два поля в один блок и отцентруем этот общий блок.

 

Сделать поля Цена и Добавить в корзину на одной строке и по центру

Для этого нужно объединить два поля в 1 div-блок. Это делается в Представлении.

  1. Создайте Представление товаров, добавьте нужные поля, обычно: Заголовок, Фото, Цена, Форма добавления в корзину.
  2. Поле Цена сделайте скрытым - то есть нажмите по этому полю в настройках Представления и отметьте галку "Исключить из вывода" или "Exclude from diaplay".
  3. Поле Форма дбавления в корзину настройте и откройте секцию Перезаписать результаты - там поставьте галку "Заменить выводимое полем значение" и напишите html-код, содержащий токены (используемые токены можно посмотреть ниже на странице редактирования поля в секции "Подстановочне шаблоны"). В нашем примере используется такой html-код:
    <div class="cart-form"><div class="views-field-commerce-price">[commerce_price]</div>[add_to_cart_form]</div>
    то есть в коде присутствует токен цены и формы добавления в корзину, и оба они объединены 1 блоком. Кстати, оба они итак будут объединены, так как будут выводиться в блоке формы добавления в корзину.
  4. Сохраните Представление и просмотрите в фаербаге код страницы. Там можно будет найти классы полей и стилизовать вывод в файле стилей.

В нашем пример стили выглядят так:

.product .views-field-commerce-price {display:inline-block;margin-right:4%;vertical-align: middle;font-size:18px;}
.product .views-field-add-to-cart-form {}
.product .cart-form {text-align:center;}
.product form.commerce-add-to-cart {display:inline-block;vertical-align: middle;}

В итоге карточка товара выглядит так:

стилизация товаров в каталоге commerce

Цена и форма добавления в корзину на одной строке и по центру

 

Заменить слово Добавить в корзину на Купить или В корзину

Если вы экономите место, или вам приятнее читать "Купить", то нужно редактировать строку "Добавить в корзину". Это делается разными способами, представим только простеший.

  1. Откройте конфигурация - Регион и язык  - Переводы - Переводы
  2. Найдите строку Add to cart или Добавить в корзину - регистр букв учитывается - если не нашли, то в фильтре выберите Переведенные и непереведенные строки
  3. Нажмите изменить и исправьте на нужное вам слово: Купить или В корзину
  4. Сохраните

Также карточка товара может содержать кнопки: купить в 1 клик, быстрый просмотр (с помощью колорбокс ноде или подгрузкой материала с другими js-функциями ри наведении)

 

Фото товара во всплывающем окне при клике

Это можно сделать с модулем Colorbox Node http://tlito.ru/node/7 если вы не хотите для всех фотографий запускать Колорбокс, а только для фото товара, тогда в Менеджере Дисплея типа содржимого Товар на витрине то есть тут /admin/structure/types - выберите для поля Фото товара формат Colorbox node или Изобпажение и с модулем Link сделайте это фото ссылкой на файл и добавьте класс colorbox-node.

 

Кнопка быстрого просмотра товара во всплывающем окне Colorbox Node

Для этого добавьте кнопку быстрого просмотра с предложенным самописным модулем colorbox_node_view_link

 

Оптимизация изображений товаров

Если вы или ваши пользователи грузят фото в формате PNG, и это заполняет дисковое пространство, которые ограничено у вас, тогда оптимизируйте изображения, переводите в формат JPG. Как это делать описано тут: Оптимизация изображений Drupal при создании материалов http://tlito.ru/node/51