1. Додавання власного імені рядка для продуктів
2. Вивести ціну і форму додавання в корзину на одному рядку в каталозі товарів
3. Зробити поля Ціна і Додати в кошик на одному рядку і по центру
4. Замінити слово Додати в кошик на Купити або В кошик
5. Фото товару у спливаючому вікні при кліці
6. Кнопка швидкого перегляду товару у спливаючому вікні Colorbox Node
7. Оптимізація зображень товарів

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;}

В результаті картка товару виглядає так:

Ціна і форма додавання в корзину на одному рядку і по центру

Замінити слово Додати в кошик на Купити або В кошик

Якщо ви економите місце, або вам приємніше читати "Купити", то потрібно редагувати рядок "Додати в кошик". Це робиться різними способами, уявімо тільки простешій.

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

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

Фото товару у спливаючому вікні при кліці

Це можна зробити з модулем Colorbox Node / Node / 7 якщо ви не хочете для всіх фотографій запускати Колорбокс, а тільки для фото товару, тоді в Менеджері Дисплея типу содржімого Товар на вітрині тобто тут / admin / structure / types - виберіть для поля Фото товару формат Colorbox node або Ізобпаженіе і з модулем Link зробіть це фото посиланням на файл і додайте клас colorbox-node.

Кнопка швидкого перегляду товару у спливаючому вікні Colorbox Node

Для цього додайте кнопку швидкого перегляду із запропонованим самопісний модулем colorbox_node_view_link

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

Якщо ви або ваші користувачі вантажать фото в форматі PNG, і це заповнює дисковий простір, які обмежено у вас, тоді оптимізуйте зображення, переводите в формат JPG. Як це робити описано тут: Оптимізація зображень Drupal при створенні матеріалів / Node / 51