13 декабря 2018 в 12:18
Здравствуйте! Создаю сайт на Drupal 8 + Commerce 2. Готовых рабочих тем под Commerce 2 не нашел. Поэтому создал кастомную тему на базе Bartik по этой инструкции https://www.drupal.org/docs/8/theming-drupal-8/creating-a-drupal-8-sub-t... Файлы кастомного bartik прикрепил.
Понятно, что тему надо дорабатывать, хотя бы потому что в карточке товара поля отображаются друг над другом по вертикали, при этом цена оказалась в самом низу.
Нет хлебных крошек к карточке товара, хотя к статьям и другим типам материала они есть. Это видимо связано с тем, что Product в Commerce 2 уже не является типом материала.
К тому же почему-то не работают модальные окна, если их вызывать из-под незарегистрированного пользователя (при работе под админом попап окна открываются). Права проверял, но причину не нашел. Модальное окно создавал так:
<div><a class="use-ajax" data-dialog-type="modal" href="/form/submit-your-application">Оставить Заявку</a></div>
К сожалению плохо разбираюсь в CSS, PHP, JS... Поэтому прошу помощи. Думаю решения пригодятся многим пользователям друпала, которые захотят быстро запустить простой интернет-магазин на Bartik. Тем более что Commerce 2 реально очень удобен и понятен.
Для начала хотел бы хотя бы настроить карточку товара. Может быть это делается через позиционирование полей, либо есть другие варианты. Что посоветуете? Вот что имею на данный момент 
| Вложение | Размер |
|---|---|
 bartik_commerce.zip | 1.36 КБ |
Комментарии
Еще не смотрел Коммерц в восьмерке, но скорее всего основной принцип сохранился:
1. Product - это просто информация о товаре. Сама сущность Product не должна нигде выводиться, кроме некоторых страниц в админке.
2.Product Display - это уже и есть "карточка товара" которая выводится покупателю.
По сути это просто обычная нода с полем Product (тот самый продукт)
Как минимум скрыть или упорядочить поля можно на вкладке "Управление отображением" в настройках Product DIsplay .
Если еще установить модули:
https://www.drupal.org/project/ds
https://www.drupal.org/project/field_group
функций на той вкладке сильно прибавится.
Модуль Commerc в частности, и сам Drupal вообще - штуки мощные, но сложные.
Поэтому без некоторой теоретической подготовки браться с ними работать - огромные лишние траты времени.
Посмотрите хоть ролики на ютубе, коих море на любых языках..
Да и так, полезных обзорных статеек в интеренетах кучи, и про Drupal и про Commerce и т.п.
PS.. да.. судя по Вашему скриншоту, это и есть Product Display.
В DC2 дисплей теперь сущность Product, а старый product из DC1 - теперь Product variation.
Довольно спорное решение, мне оно не нравится. Мне вообще в DC2 много чего не нравится.
Через Управление отображением порядок полей, как это обычно делается в типах материала, здесь настроить не получится. DS тоже не помогает. Скорее всего надо темизировать карточку товара, как это сделано в демотеме Belgrade. Но если можно сделать проще, то было бы лучше.
Просмотрел и прочитал... Решение этих проблем нигде не рассматривается... Если кто даст ссылку на подходящую статью/видео был бы благодарен.
> Для начала хотел бы хотя бы настроить карточку товара. Может быть это делается через позиционирование полей, либо есть другие варианты. Что посоветуете? Вот что имею на данный момент
ds
В типах материала DS отличный инструмент, но в commerce с ним отформатировать карточку товара не получилось.
Может посоветуете хорошую платную тему для Commerce 2. Нормальных бесплатных я не нашел. Либо готов оплатить разработку способа адаптации существующих бесплатных тем типа бартика под Commerce 2.
Для крошек см. сюда
Модалки не работают, потому что у анонима не загружена библиотека аякс. Чтобы пофиксить, добавьте в файл "ваша_тема.libraries.yml" в секцию dependencies строчку
- core/drupal.ajaxРаскидать поля по регионам поможет layout_builder. А если бы у вас была тема на бустрапе, смогли бы заюзать bootstrap_layouts и накликать всю красоту тупо из админки.
Спасибо, на бартике модальные окна стали открываться и из-под анонима. В теме Pixture Reloaded 8.x-3.0 модальные окна корректно стали открываться через раз - то пассивные (полностью затемненные вместе с основной страницей), то активные.
Включил этот экспериментальный модуль, на странице Управление отображением Типа товаров (/admin/commerce/config/product-types/mezhkomnatnye_dveri_ekoshpon/edit/display) поставил галочку Use Layout Builder и после сохранения белое окно с надписью The website encountered an unexpected error. Please try again later. Не получилось.
Пробовал. bootstrap_layouts работает через Display Suite и результат такой же как и у Display Suite, т.е. отрицательный.
С программированием сложно
Хм.. если DS Вам не помогает (хотя в чем конкретно, Вы никак не обозначили) то Вы прирожденный программист.
Хотя 95% подобных задач он неплохо решает..
Про Panels я даже опасаюсь упоминать..
Мышкой возят по экрану только лохи-)
Тогда начните с теории переопределения шаблонов.
Panels в восьмёрке всего лишь маленькая надстройка для page manager, который, к слову, глюченный вообще до невозможности. Например, в моей заготовке для сайтов в composer.json с ходу вкинуты три патча для пэйдж менеджера, один для панелей, и один для ядра, чтобы пофиксить баг, который проявляется только при использовании пэйдж менеджера.
Собственно, именно все эти обстоятельства заставили меня посмотреть в сторону layout builder. Сейчас собираю с его использованием уже второй сайт. Пока очень нравится. По функциональности и юзабилити пэйдж-менеджер в сравнении с лэйаут билдером - полный шлак. Единственный плюс ПМ - можно создавать страницы с несколькими аргументами в урлах, но это далеко не везде нужно.
Бутстрап-лэйаутс не работает через дисплэй сьют. Он просто предоставляет лэйауты, которые используются рядом модулей, в том числе и дисплэй сьют.
По поводу белого экрана - надо смотреть в логах.
Здесь говориться о темизации карточки товара https://docs.drupalcommerce.org/commerce2/developer-guide/products/displ...
Для меня темный лес
Самый проверенный способ - скопировать шаблон в свою тему и там сделать всё, что нужно. Там всё просто. Надо только знать html и включить логику.
уже стало понятнее, спасибо. хорошо бы на примере кастомного бартика это сделать. Если у кого будет время и желание это сделать, то дайте знать. Результат выложим в общий доступ, чтобы другим было проще.
перестают отображаться картинка товара, поле цены и артикул.
Только в теме Bootstrap for Drupal Commerce 8.x-1.0-beta1 удалось разделить содержимое на две колонки через DS + bootstrap_layouts, но картинка товара, поле цены и артикул все также не отображаются.
mglaman предложил файл commerce-product--full.html.twig , который если положить в ../contrib/commerce_bootstrap/templates/commerce изменяет положение полей в регионе.
<div style="width: 60%; float: left;">
{{- product|without('variation_attributes', 'variations', 'variation_title', 'variation_sku', 'variation_price') -}}
</div>
<div style="width: 40%; float: right;">
{{ product.variation_title }}
{{ product.variation_sku }}
{{ product.variation_price }}
{{ product.variations }}
</div>
</article>
Этот вариант не подходит, т.к. поле body показывается справа вместо картинки. Как изменить код, чтобы картинки были справа, а описание товара слева?
Путем подбора нашел такой вариант. Отображается как и требовалось. Есть ли в коде ошибки? Что можно подправить?
<div class="row">
<div id="main-image" class="col-sm-6">
{{ product.variation_field_image }}
</div>
<div id="about" class="col-sm-6">
{{ product.variation_title }}
{{ product.variation_sku }}
{{ product.variation_price }}
{{ product.variations }}
{{ product.body }}
</div>
</div>
</div>
Вот код для небутстраповских тем типа bartik
<div style="width: 50%; float: left;">
{{ product.variation_field_image }}
</div>
<div style="width: 50%; float: right;">
{{ product.variation_title }}
{{ product.variation_price }}
{{ product.variation_sku }}
{{ product.variations }}
{{ product.body }}
</div>
</article>
Выложил кастомную тему bartik_commerce с отредактированным файлом commerce-product--full.html.twig
Хорошо бы разобраться и с другими twig-файлами Commerce.
На themeforest.net смотрел темы под Commerce 2.x и не нашел, которые бы поддерживали отображение картинок вариантов товара. В частности именно такой темой является Porto . В этой теме картинка добавляется только ко всему товару. Отдельных картинок к вариантам товара добавить уже не получится. Можно, конечно, добавить свое поле Image в Product variation types , но это не имеет смысла, т.к. все равно картинка не будет отображаться на карточке товара, поскольку в twig-файлах это не предусмотрено. Если будут вопросы по теме Porto - обращайтесь в личку.
Заменил на исправленный вариант bartik_commerce-8.x , с подключённым drupal.ajax
Кто знает объясните плиз почему mglaman для названия файла использовал вариант commerce-product--full.html.twig ?
В коде страницы предложено 6 вариантов названий. Почему он не воспользовался именем commerce-product.html.twig ? На что влияет выбор того или иного варианта?
* commerce-product--1--full.html.twig
* commerce-product--1.html.twig
* commerce-product--default--full.html.twig
* commerce-product--default.html.twig
x commerce-product--full.html.twig
* commerce-product.html.twig
-->
Здесь написано:
The list of suggested template files is in order of specificity based on internal paths. One suggestion is made for every element of the current path, though numeric elements are not carried to subsequent suggestions.
Но как мне понять какой вариант лучше выбрать?
Этот шаблон будет использоваться для полного отображения продукта. Для тизеров он использоваться не будет.
commerce-product--default будет использоваться для продуктов с типом default, а для других типов он использоваться не будет.
commerce-product--default--full будет использоваться только для полного отображения продуктов с типом default.
commerce-product--1 только для продукта с id=1
Действительно, если создать дисплей Teaser и вывести через вьюс тизеры товаров на отдельную страницу, то в коде страницы вновь предлагается 6 вариантов и при этом используется commerce-product.html.twig , потому что именно для тизеров отдельного шаблона типа commerce-product--teaser.html.twig я не размещал в каталоге /themes/custom/bartik_commerce/templates/commerce, а в каталоге модуля
Commerce Product /modules/contrib/commerce/modules/product/templates шаблона с таким названием нет.
* commerce-product--1--teaser.html.twig
* commerce-product--1.html.twig
* commerce-product--default--teaser.html.twig
* commerce-product--default.html.twig
* commerce-product--teaser.html.twig
x commerce-product.html.twig
-->
Итог: чтобы было понятно при разборе кода для каждого дисплея лучше использовать название шаблона, которое бы указывало на этот дисплей.
Для дисплея Default - commerce-product--full.html.twig
Для дисплея Teaser - commerce-product--teaser.html.twig
и т.д.
Информация по выводу полей в заданной структуре есть на сайте Назарова Дмитрия.
Есть страница товара, на которой выведен один из ее вариантов с тремя изображениями.
Требуется изменить стиль первого и следующих изображений. У первого должен быть стиль Большой (480×480) , а у последующих Миниатюра (100×100). Затем надо будет подключить лайтбокс-плагин типа Colorbox. У всех найденных плагинов изображения также выводятся в столбик.
Значит придется править код в шаблоне поля field_image .
Создал шаблон field--commerce-product-variation--field-image--default.html.twig на основе field.html.twig с таким содержимым:
{%
set classes = [
'field',
'field--name-' ~ field_name|clean_class,
'field--type-' ~ field_type|clean_class,
'field--label-' ~ label_display,
]
%}
{%
set title_classes = [
'field__label',
label_display == 'visually_hidden' ? 'visually-hidden',
]
%}
{% if label_hidden %}
{% if multiple %}
<div{{ attributes.addClass(classes, 'field__items') }}>
{% for item in items %}
<div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div>
{% endfor %}
</div>
{% else %}
{% for item in items %}
<div{{ attributes.addClass(classes, 'field__item') }}>{{ item.content }}</div>
{% endfor %}
{% endif %}
{% else %}
<div{{ attributes.addClass(classes) }}>
<div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
{% if multiple %}
<div class="field__items">
{% endif %}
{% for item in items %}
<div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div>
{% endfor %}
{% if multiple %}
</div>
{% endif %}
</div>
{% endif %}
Предполагаю, что надо создать цикл, в котором первому div-блоку с первым изображением будет назначен один стиль, а всем остальным последующим блокам будет назначен стиль со свойствами типа float:left либо display:inline-block
Схожие ситуации рассматривали здесь
https://drupal.stackexchange.com/questions/171472/how-can-i-distinguish-...
https://coderteam.ru/en/node/248
Но мне не хватает знаний, чтобы самому написать в twig подобный цикл. Возможно есть и другие решения.
Например в теме Porto использовали такой код в файле commerce-product--default.html.twig
/**
* @file
*
* Default product template.
*
* Available variables:
* - attributes: HTML attributes for the wrapper.
* - product: The rendered product fields.
* Use 'product' to print them all, or print a subset such as
* 'product.title'. Use the following code to exclude the
* printing of a given field:
* @code
* {{ product|without('title') }}
* @endcode
* - product_entity: The product entity.
* - product_url: The product URL.
*
* @ingroup themeable
*/
#}
{% set images = product_entity.field_image %}
{% set thumbnail = product_entity.field_thumbnail %}
{% set image_hover = product_entity.field_image_hover %}
{% set ratingCount = 0 %}
{% set ratingPercent = 0 %}
{% set ratingNumber = 0 %}
{% set sizes = product_entity.field_product_size %}
{% set colors = product_entity.field_product_color %}
{% set layout_tab = product_entity.field_layout_tab.value %}
{% set stock = product_entity.field_commerce_stock.value %}
{% set view_mode = product.title['#view_mode'] %}
{% if view_mode == 'default' %}
<div class="product">
<figure class="product-image-area">
<a href="{{ product_url }}" title="Product Name" class="product-image">
{% if thumbnail.entity.fileuri %}
<img src="{{ file_url(thumbnail.entity.fileuri) }}" alt="Product Name">
{% endif %}
{% if image_hover.entity.fileuri %}
<img src="{{ file_url(image_hover.entity.fileuri) }}" alt="Product Name" class="product-hover-image">
{% endif %}
</a>
<a href="{{ product_url }}" class="product-quickview">
<i class="fa fa-share-square-o"></i>
<span>View</span>
</a>
{% if product.field_product_attributes|render|striptags|trim != '' %}
<div class="product-label"><span class="new">{{ product.field_product_attributes|render|striptags|trim }}</span></div>
{% endif %}
</figure>
<div class="product-details-area">
<h2 class="product-name"><a href="{{ product_url }}" title="Product Name">{{ product.title }}</a></h2>
<div class="product-ratings">
<div class="ct-rating">
{{ product.field_fivestar }}
</div>
</div>
<div class="product-price-box">
{% if product.field_regular_price|render|striptags|trim != '' %}
<span class="old-price">{{ product.field_regular_price|render|striptags|trim }}</span>
{% endif %}
{% if product.variation_price|render|striptags|trim != '' %}
<span class="product-price">{{ product.variation_price|render|striptags|trim }}</span>
{% endif %}
</div>
<div class="product-actions addcart">
{{ product.variations }}
</div>
</div>
</div>
{% elseif view_mode == 'teaser' %}
<div class="product product-sm">
<figure class="product-image-area">
<a href="{{ product_url }}" title="Product Name" class="product-image">
{% if thumbnail.entity.fileuri %}
<img src="{{ file_url(thumbnail.entity.fileuri) }}" alt="Product Name">
{% endif %}
{% if image_hover.entity.fileuri %}
<img src="{{ file_url(image_hover.entity.fileuri) }}" alt="Product Name" class="product-hover-image">
{% endif %}
</a>
</figure>
<div class="product-details-area">
<h2 class="product-name"><a href="{{ product_url }}" title="Product Name">{{ product.title }}</a></h2>
<div class="product-ratings">
{{ product.field_fivestar }}
</div>
{% if product.variation_price|render|striptags|trim != '' %}
<div class="product-price-box">
<span class="product-price">{{ product.variation_price|render|striptags|trim }}</span>
</div>
{% endif %}
</div>
</div>
{% else %}
<div class="product-view single-product">
<div class="product-essential">
<div class="row">
<div class="product-img-box col-sm-5">
<div class="product-img-box-wrapper">
{# {% if thumbnail.entity.fileuri %}
<div class="product-img-wrapper">
<img id="product-zoom" src="{{ file_url(thumbnail.entity.fileuri) }}" data-zoom-image="{{ file_url(thumbnail.entity.fileuri) }}" alt="Product main image">
</div>
{% endif %}#}
{% if images|length %}
<div class="product-img-wrapper">
<img id="product-zoom" src="{{ file_url(images.entity.fileuri) }}" data-zoom-image="{{ file_url(images.entity.fileuri) }}" alt="Product main image">
</div>
{% endif %}
<a href="#" class="product-img-zoom" title="Zoom">
<span class="glyphicon glyphicon-search"></span>
</a>
</div>
{% if images|length %}
<div class="owl-carousel manual" id="productGalleryThumbs">
{% for image in images %}
<div class="product-img-wrapper">
<a href="#" data-image="{{ file_url(image.entity.fileuri) }}" data-zoom-image="{{ file_url(image.entity.fileuri) }}" class="product-gallery-item">
<img src="{{ file_url(image.entity.fileuri) }}" alt="product">
</a>
</div>
{% endfor %}
</div>
{% endif %}
</div>
<div class="product-details-box col-sm-7">
<h1 class="product-name">
{{ product.title }}
</h1>
<div class="product-rating-container">
<div class="product-ratings">
{{ product.field_fivestar }}
</div>
<div class="review-link">
<a href="#" class="review-link-in" rel="nofollow"> <span class="count">1</span> customer review</a> |
<a href="#" class="write-review-link" rel="nofollow">Add a review</a>
</div>
</div>
{{ product.body }}
<div class="product-detail-info">
<div class="product-price-box">
{% if product.field_regular_price|render|striptags|trim != '' %}
<span class="old-price">{{ product.field_regular_price|render|striptags|trim }}</span>
{% endif %}
{% if product.variation_price|render|striptags|trim != '' %}
<span class="product-price">{{ product.variation_price|render|striptags|trim }}</span>
{% endif %}
</div>
{% if stock == '1' %}
<p class="availability">
<span class="font-weight-semibold">Availability:</span>
In Stock
</p>
{% else %}
<p class="availability">
<span class="font-weight-semibold">Availability:</span>
Our of Stock
</p>
{% endif %}
</div>
<div class="product-actions">
<div class="cart-detail">
{{ product.variations }}
</div>
</div>
<div class="product-share-box">
<div class="addthis_inline_share_toolbox"></div>
</div>
</div>
</div>
</div>
<div id="id-review">
{% if layout_tab == '2' %}
<div class="panel-group produt-panel" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse1One">
Description
</a>
</h4>
</div>
<div id="collapse1One" class="accordion-body collapse">
<div class="panel-body">
{{ product.field_description }}
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse1Two">
Additional
</a>
</h4>
</div>
<div id="collapse1Two" class="accordion-body collapse">
<div class="panel-body">
{{ product.field_product_additional }}
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse1Three">
Tags
</a>
</h4>
</div>
<div id="collapse1Three" class="accordion-body collapse">
<div class="panel-body">
<div class="product-tags-area">
{{ product.field_product_brand }}
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse1Four">
Reviews
</a>
</h4>
</div>
<div id="collapse1Four" class="accordion-body collapse">
<div class="panel-body">
{{ product.field_comments }}
</div>
</div>
</div>
</div>
{% elseif layout_tab == '3' %}
<div class="tabs tabs-vertical tabs-left product-tabs">
<ul class="nav nav-tabs col-sm-3 col-lg-2">
<li class="active">
<a href="#product-desc" data-toggle="tab">Description</a>
</li>
<li>
<a href="#product-add" data-toggle="tab">Additional</a>
</li>
<li>
<a href="#product-tags" data-toggle="tab">Tags</a>
</li>
<li>
<a href="#product-reviews" data-toggle="tab">Reviews</a>
</li>
</ul>
<div class="tab-content">
<div id="product-desc" class="tab-pane active">
{{ product.field_description }}
</div>
<div id="product-add" class="tab-pane">
{{ product.field_product_additional }}
</div>
<div id="product-tags" class="tab-pane">
<div class="product-tags-area">
{{ product.field_product_brand }}
</div>
</div>
<div id="product-reviews" class="tab-pane">
{{ product.field_comments }}
</div>
</div>
</div>
{% else %}
<div class="tabs product-tabs">
<ul class="nav nav-tabs">
<li class="active">
<a href="#product-desc" data-toggle="tab">Description</a>
</li>
<li>
<a href="#product-add" data-toggle="tab">Additional</a>
</li>
<li>
<a href="#product-tags" data-toggle="tab">Tags</a>
</li>
<li>
<a href="#product-reviews" data-toggle="tab">Reviews</a>
</li>
</ul>
<div class="tab-content">
<div id="product-desc" class="tab-pane active">
{{ product.field_description }}
</div>
<div id="product-add" class="tab-pane">
{{ product.field_product_additional }}
</div>
<div id="product-tags" class="tab-pane">
<div class="product-tags-area">
{{ product.field_product_brand }}
</div>
</div>
<div id="product-reviews" class="tab-pane">
{{ product.field_comments }}
</div>
</div>
</div>
{% endif %}
</div>
</div>
{% endif %}
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-581b726c069c6315"></script>
Здесь https://commerce.acromedia.com/product/adventure-begins-camping-mug в файле commerce-product.html.twig использовали такой код https://slexy.org/view/s2MGMN5RRE
а здесь https://demo.commercekickstart.com/product/black-headphones в файле commerce-product--full.html.twig такой код https://slexy.org/view/s2SjzD1vPh
Вот мой код для файла commerce-product--full.html.twig
<div class="product-variation_field_image">
{{ product.variation_field_image }}
</div>
<div class="product-description">
{{ product.variation_title }}
{{ product.variation_price }}
{{ product.variation_sku }}
{{ product.variations }}
{{ product.field_short_description }}
</div>
<hr class="clear-left clear-right">
<div class="clear-left">
{{ product|without('field_short_description', 'variation_title', 'variation_price', 'variation_sku', 'variations', 'variation_field_image') }}
</div>
</article>
Может кому пригодится. Одна проблема - изображения товара выводятся столбиком.
А это CSS к нему:
border-bottom-style: none !important;
}
.product-variation_field_image {
width: 50%;
float: left;
}
@media screen and (max-width: 576px){
.product-variation_field_image {
float: none;
display: block;
width: 100%;
}
}
.product-description {
width: 50%;
float: right;
}
@media screen and (max-width: 576px){
.product-description {
float: none;
display: block;
width: 100%;
}
}
.clear-left {
clear:left;
}
.clear-right {
clear:right;
}
.product--variation-field--variation_price__label {
font-size: 20px;
}
.product--variation-field--variation_price__item {
font-size: 20px;
}
}
Это демо темы Porto https://www.refaktor.org/drupal/porto7/shop6/pink-dress
Продублирую код из файла commerce-product--default.html.twig темы Porto здесь. Модераторы если захотят могут удалить аналогичный код в сообщении выше
https://slexy.org/view/s2FkKTz41W
Кстати, темы демо-сайтов Urban Hipster, Porto, Belgrade сделаны на Bootstrap.
Букв много написал, что вопрос не сразу найдут. Поэтому продублирую вопрос:
Как сделать, чтобы миниатюры изображений варианта товара выводились не столбиком, а в строчку?
И если будет готовое решение - буду признателен. Эта проблема уже много раз многими решалась, т.к. магазинов на Drupal 8 уже много, вот только в Интернете подходящего решения не нашёл.
В интернетах скорее всего про это почти нет информации.
Не потому что это секрет.
Лично я давно заметил такую закономерность: если решение вроде бы должно быть востребовано, но ты не можешь найти для его реализации конкретное описание, значит просто все про него знают, кроме тебя-))
много раз такое было лично со мной, в глубокой молодости и совсем недавно-)
Т.е. оно описано в какой-то всем известной документации.
В данном случае в документации к CSS.
почитайте про display: float, display: inline,display: inline-block, flexbox
возможно последнего (flexbox) Вам будет более чем достаточно-)
Если бы проблема решалась только через CSS, то это было бы супер
. К сожалению первый {{ item.content }} должен выводиться по центру и иметь стиль Большой (480×480) , а все последующие {{ item.content }} должны выводиться под ним в строчку и иметь стиль Миниатюра (100×100). CSS здесь как поможет? Эту логику придется реализовывать с помощью twig через цикл. Других вариантов пока не вижу.
Здесь написано:
https://www.drupal.org/docs/develop/coding-standards/twig-coding-standards
. Думаю есть готовые решения. Если бы кто поделился решением задачки 
Для меня набор слов
Вам надо просто в препроцессе шаблона изменить путь к нужному стилю первой картинки
а остальное: css
http://htmlbook.ru/css/first-child
Стиль сперва нужно сгенерировать, а для этого форматтер подходит больше, чем препроцесс.
сгенерировать ссылку на картинку нужного стиля, т.е. грубо говоря указать нужную папку со стилем..
с этим и пара-тройка строчек в препроцессе справится.
Если открыть папку стиля картинки, который никогда не генерировался, то будет 404. Правильно будет не указывать папку, а менять имя стиля в рендер-массиве.
Создатели темы SShop видимо не стали заморачиваться вариантами товара и отображением нескольких изображений для одного товара. По крайней мере на их демосайте я этого не нашел https://sshop.optasy.com/product/aenean-ut-eros-et-nisl
Вот их commerce-product.html.twig https://slexy.org/view/s21r45YBcf
Если бы вы смотрели не только на статичную картинку из макета, а полазили бы по настоящим нормальным магазинам, то поняли бы, что это не первое изображение в другом стиле выводится, а сверху идёт слайдер из больших картинок по одной, а снизу слайдер из маленьких картинок, отображаемых несколько сразу, и нижний слайдер - это пейджер для верхнего. При этом большие фотки по клику должны увеличиваться.
Как ни странно, такая заурядная функциональность никак не решается контрибными модулями. По хорошему надо писать свой форматтер. Само собой, что на уровне одного только твига этот вопрос не решается.
Видимо имеется в виду это
http://flexslider.woothemes.com/thumbnail-slider.html
http://flexslider.woothemes.com/asnavfor-rtl.html
Если изображения еще будут выводиться и через лайтбокс-плагины, то будет то, что нужно.
Осталось разобраться как для переменной {{ item.content }} это прописать в шаблоне или на вкладке "Управление отображением", чтобы ее значения выводились в слайдере.
Есть ли у кого опыт в этом деле? Какие модули лучше использовать? Что прописать в шаблоне (если это требуется)?
В шаблоне Porto упоминается слайдер Owl Carousel. Но https://www.drupal.org/project/owlcarousel среди установленных модулей на демосайте Porto нет.
Установил модуль Flex Slider. Во вкладке "Управление отображением" (Типы вариаций товаров) для поля Image выбрал формат FlexSlider Option set: Default Стиль изображения: Большой (480×480). Теперь при смене вариантов товара картинка не меняется. Модуль не подходит.
К тому же Flex Slider не интегрируется с лайтбокс-плагинами, миниатюры также почему-то вывести не получилось, хотя соответствующие option set я тестировал.
Идеальным решением мог бы быть Field Slideshow https://www.drupal.org/project/field_slideshow http://xandeadx.ru/blog/drupal/478 . Его плюс в интеграции с Colorbox. К сожалению ни на странице варианта товара, ни на других страницах сайта он не заработал. Придется ждать, когда пофиксят баги и выпустят новую версию.
Если знаете другой модуль, который мог бы помочь, то напишите плиз.
В файле field--commerce-product-variation--field-image--default.html.twig всем
<div>добавил style="float: left;"Теперь миниатюры изображений варианта товара отображаются в строку, что и требовалось. Интеграция с PhotoSwipe (аналог Colorbox-a) работает, изображения вариантов меняются при смене вариантов товара.
Задача решена.
Как можно было правильнее решить задачу?
Решение получше - создать отдельное поле для миниатюр (вывести его через twig переменной {{ product.variation_field_images }}) и задать ему стиль
.field--name-field-images {
display: flex;
flex-wrap: wrap;
}
В Управлении отображением для полей Изображение и Изображения вырбать формат Colorbox.