Доработка Drupal 8 + Commerce 2

Главные вкладки

Аватар пользователя isuvar isuvar 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.zip1.36 КБ

Комментарии

Аватар пользователя Orion76 Orion76 13 декабря 2018 в 17:23

isuvar wrote:

что Product в Commerce 2 уже не является типом материала.

Еще не смотрел Коммерц в восьмерке, но скорее всего основной принцип сохранился:
1. Product - это просто информация о товаре. Сама сущность Product не должна нигде выводиться, кроме некоторых страниц в админке.
2.Product Display - это уже и есть "карточка товара" которая выводится покупателю.
По сути это просто обычная нода с полем Product (тот самый продукт)

isuvar wrote:

Может быть это делается через позиционирование полей, либо есть другие варианты

Как минимум скрыть или упорядочить поля можно на вкладке "Управление отображением" в настройках Product DIsplay .

Если еще установить модули:
https://www.drupal.org/project/ds
https://www.drupal.org/project/field_group

функций на той вкладке сильно прибавится.

Модуль Commerc в частности, и сам Drupal вообще - штуки мощные, но сложные.
Поэтому без некоторой теоретической подготовки браться с ними работать - огромные лишние траты времени.

Посмотрите хоть ролики на ютубе, коих море на любых языках..
Да и так, полезных обзорных статеек в интеренетах кучи, и про Drupal и про Commerce и т.п.

PS.. да.. судя по Вашему скриншоту, это и есть Product Display.

Аватар пользователя Andruxa Andruxa 13 декабря 2018 в 17:25

В DC2 дисплей теперь сущность Product, а старый product из DC1 - теперь Product variation.
Довольно спорное решение, мне оно не нравится. Мне вообще в DC2 много чего не нравится.

Аватар пользователя isuvar isuvar 13 декабря 2018 в 18:35

Orion76 wrote:

скрыть или упорядочить поля можно на вкладке "Управление отображением" в настройках Product DIsplay .
Если еще установить модули:
https://www.drupal.org/project/ds


Через Управление отображением порядок полей, как это обычно делается в типах материала, здесь настроить не получится. DS тоже не помогает. Скорее всего надо темизировать карточку товара, как это сделано в демотеме Belgrade. Но если можно сделать проще, то было бы лучше.

Аватар пользователя isuvar isuvar 13 декабря 2018 в 18:41

Orion76 wrote:

Посмотрите хоть ролики на ютубе, коих море на любых языках..

Да и так, полезных обзорных статеек в интеренетах кучи, и про Drupal и про Commerce и т.п.

Просмотрел и прочитал... Решение этих проблем нигде не рассматривается... Если кто даст ссылку на подходящую статью/видео был бы благодарен.

Аватар пользователя sas@drupal.org sas@drupal.org 14 декабря 2018 в 7:17

> Для начала хотел бы хотя бы настроить карточку товара. Может быть это делается через позиционирование полей, либо есть другие варианты. Что посоветуете? Вот что имею на данный момент
ds

Аватар пользователя isuvar isuvar 14 декабря 2018 в 12:44

В типах материала DS отличный инструмент, но в commerce с ним отформатировать карточку товара не получилось.

Аватар пользователя isuvar isuvar 14 декабря 2018 в 13:04

Может посоветуете хорошую платную тему для Commerce 2. Нормальных бесплатных я не нашел. Либо готов оплатить разработку способа адаптации существующих бесплатных тем типа бартика под Commerce 2.

Аватар пользователя gun_dose gun_dose 14 декабря 2018 в 13:18
1

Для крошек см. сюда
Модалки не работают, потому что у анонима не загружена библиотека аякс. Чтобы пофиксить, добавьте в файл "ваша_тема.libraries.yml" в секцию dependencies строчку
- core/drupal.ajax

Раскидать поля по регионам поможет layout_builder. А если бы у вас была тема на бустрапе, смогли бы заюзать bootstrap_layouts и накликать всю красоту тупо из админки.

Аватар пользователя isuvar isuvar 14 декабря 2018 в 20:56

gun_dose wrote:

Модалки не работают, потому что у анонима не загружена библиотека аякс. Чтобы пофиксить, добавьте в файл "ваша_тема.libraries.yml" в секцию dependencies строчку
- core<span style="color: #66cc66;">/</span>drupal.ajax

Спасибо, на бартике модальные окна стали открываться и из-под анонима. В теме Pixture Reloaded 8.x-3.0 модальные окна корректно стали открываться через раз - то пассивные (полностью затемненные вместе с основной страницей), то активные.
gun_dose wrote:

Раскидать поля по регионам поможет layout_builder

Включил этот экспериментальный модуль, на странице Управление отображением Типа товаров (/admin/commerce/config/product-types/mezhkomnatnye_dveri_ekoshpon/edit/display) поставил галочку Use Layout Builder и после сохранения белое окно с надписью The website encountered an unexpected error. Please try again later. Не получилось.
gun_dose wrote:

А если бы у вас была тема на бустрапе, смогли бы заюзать  bootstrap_layouts и накликать всю красоту тупо из админки.

Пробовал. bootstrap_layouts работает через Display Suite и результат такой же как и у Display Suite, т.е. отрицательный.
gun_dose wrote:

Для крошек см. сюда

С программированием сложно Smile . В теме Belgrade каталог сделан через модуль Taxonomy Menu. Хлебные крошки выводятся по таксономии и видимо это реализовано уже в самой теме.

Аватар пользователя Orion76 Orion76 14 декабря 2018 в 21:06

Хм.. если DS Вам не помогает (хотя в чем конкретно, Вы никак не обозначили) то Вы прирожденный программист.
Хотя 95% подобных задач он неплохо решает..
Про Panels я даже опасаюсь упоминать..

Мышкой возят по экрану только лохи-)

Тогда начните с теории переопределения шаблонов.

Аватар пользователя gun_dose gun_dose 14 декабря 2018 в 21:16

Panels в восьмёрке всего лишь маленькая надстройка для page manager, который, к слову, глюченный вообще до невозможности. Например, в моей заготовке для сайтов в composer.json с ходу вкинуты три патча для пэйдж менеджера, один для панелей, и один для ядра, чтобы пофиксить баг, который проявляется только при использовании пэйдж менеджера.

Собственно, именно все эти обстоятельства заставили меня посмотреть в сторону layout builder. Сейчас собираю с его использованием уже второй сайт. Пока очень нравится. По функциональности и юзабилити пэйдж-менеджер в сравнении с лэйаут билдером - полный шлак. Единственный плюс ПМ - можно создавать страницы с несколькими аргументами в урлах, но это далеко не везде нужно.

Аватар пользователя gun_dose gun_dose 14 декабря 2018 в 21:08

Бутстрап-лэйаутс не работает через дисплэй сьют. Он просто предоставляет лэйауты, которые используются рядом модулей, в том числе и дисплэй сьют.

По поводу белого экрана - надо смотреть в логах.

Аватар пользователя gun_dose gun_dose 14 декабря 2018 в 21:31
1

Самый проверенный способ - скопировать шаблон в свою тему и там сделать всё, что нужно. Там всё просто. Надо только знать html и включить логику.

Аватар пользователя isuvar isuvar 14 декабря 2018 в 21:39

gun_dose wrote:
скопировать шаблон в свою тему

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

Аватар пользователя isuvar isuvar 14 декабря 2018 в 21:33

Orion76 wrote:

если DS Вам не помогает (хотя в чем конкретно, Вы никак не обозначили)

перестают отображаться картинка товара, поле цены и артикул.
Только в теме Bootstrap for Drupal Commerce 8.x-1.0-beta1 удалось разделить содержимое на две колонки через DS + bootstrap_layouts, но картинка товара, поле цены и артикул все также не отображаются.

Аватар пользователя isuvar isuvar 7 января 2019 в 0:30

mglaman предложил файл commerce-product--full.html.twig , который если положить в ../contrib/commerce_bootstrap/templates/commerce изменяет положение полей в регионе.

<article{{ attributes }}>
  <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 показывается справа вместо картинки. Как изменить код, чтобы картинки были справа, а описание товара слева?

Аватар пользователя isuvar isuvar 7 января 2019 в 0:46

Путем подбора нашел такой вариант. Отображается как и требовалось. Есть ли в коде ошибки? Что можно подправить?

<div class="product-details">
  <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>
Аватар пользователя isuvar isuvar 7 января 2019 в 1:15

Вот код для небутстраповских тем типа bartik

<article{{ attributes }}>
  <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.

Аватар пользователя isuvar isuvar 7 января 2019 в 1:40

На themeforest.net смотрел темы под Commerce 2.x и не нашел, которые бы поддерживали отображение картинок вариантов товара. В частности именно такой темой является Porto . В этой теме картинка добавляется только ко всему товару. Отдельных картинок к вариантам товара добавить уже не получится. Можно, конечно, добавить свое поле Image в Product variation types , но это не имеет смысла, т.к. все равно картинка не будет отображаться на карточке товара, поскольку в twig-файлах это не предусмотрено. Если будут вопросы по теме Porto - обращайтесь в личку.

Аватар пользователя isuvar isuvar 8 января 2019 в 1:58

Кто знает объясните плиз почему mglaman для названия файла использовал вариант commerce-product--full.html.twig ?

В коде страницы предложено 6 вариантов названий. Почему он не воспользовался именем commerce-product.html.twig ? На что влияет выбор того или иного варианта?

<!-- FILE NAME SUGGESTIONS:
   * 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.
Но как мне понять какой вариант лучше выбрать?

Аватар пользователя gun_dose gun_dose 8 января 2019 в 6:39
1

Этот шаблон будет использоваться для полного отображения продукта. Для тизеров он использоваться не будет.
commerce-product--default будет использоваться для продуктов с типом default, а для других типов он использоваться не будет.
commerce-product--default--full будет использоваться только для полного отображения продуктов с типом default.
commerce-product--1 только для продукта с id=1

Аватар пользователя isuvar isuvar 8 января 2019 в 11:03
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 шаблона с таким названием нет.

<!-- FILE NAME SUGGESTIONS:
   * 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
и т.д.

Аватар пользователя isuvar isuvar 19 января 2019 в 19:01

Есть страница товара, на которой выведен один из ее вариантов с тремя изображениями.
Требуется изменить стиль первого и следующих изображений. У первого должен быть стиль Большой (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>

Аватар пользователя isuvar isuvar 19 января 2019 в 19:25

Здесь 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

Аватар пользователя isuvar isuvar 19 января 2019 в 19:33

Вот мой код для файла commerce-product--full.html.twig

<article{{ attributes.addClass(classes) }}>
  <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 к нему:

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

Аватар пользователя isuvar isuvar 19 января 2019 в 19:45

Это демо темы 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.

Аватар пользователя isuvar isuvar 19 января 2019 в 20:12

Букв много написал, что вопрос не сразу найдут. Поэтому продублирую вопрос:
Как сделать, чтобы миниатюры изображений варианта товара выводились не столбиком, а в строчку?
И если будет готовое решение - буду признателен. Эта проблема уже много раз многими решалась, т.к. магазинов на Drupal 8 уже много, вот только в Интернете подходящего решения не нашёл.

Аватар пользователя Orion76 Orion76 19 января 2019 в 20:58

isuvar wrote:

Как сделать, чтобы миниатюры изображений варианта товара выводились не столбиком, а в строчку?

В интернетах скорее всего про это почти нет информации.

Не потому что это секрет.

Лично я давно заметил такую закономерность: если решение вроде бы должно быть востребовано, но ты не можешь найти для его реализации конкретное описание, значит просто все про него знают, кроме тебя-))

много раз такое было лично со мной, в глубокой молодости и совсем недавно-)

Т.е. оно описано в какой-то всем известной документации.
В данном случае в документации к CSS.
почитайте про display: float, display: inline,display: inline-block, flexbox
возможно последнего (flexbox) Вам будет более чем достаточно-)

Аватар пользователя isuvar isuvar 19 января 2019 в 22:10

Если бы проблема решалась только через CSS, то это было бы супер Smile . К сожалению первый {{ item.content }} должен выводиться по центру и иметь стиль Большой (480×480) , а все последующие {{ item.content }} должны выводиться под ним в строчку и иметь стиль Миниатюра (100×100). CSS здесь как поможет? Эту логику придется реализовывать с помощью twig через цикл. Других вариантов пока не вижу.

Здесь написано:

Выражения: зацикливание
Twig использует for циклы, а в Drupal мы привыкли использовать foreach циклы.

Если вам не нужны ключи массива, ваш цикл должен выглядеть так:

{% for item in navigation %}

  • {{ item.caption }}
  • {% endfor %}

    Если вам нужны и ключи, и значения, ваш синтаксис цикла будет выглядеть так:

    {% for key, value in items %}

    {{ value }}

    {% endfor %}

    https://www.drupal.org/docs/develop/coding-standards/twig-coding-standards
    Для меня набор слов Smile . Думаю есть готовые решения. Если бы кто поделился решением задачки Smile

    Аватар пользователя Orion76 Orion76 25 января 2019 в 23:55

    сгенерировать ссылку на картинку нужного стиля, т.е. грубо говоря указать нужную папку со стилем..
    с этим и пара-тройка строчек в препроцессе справится.

    Аватар пользователя gun_dose gun_dose 26 января 2019 в 10:10

    Если открыть папку стиля картинки, который никогда не генерировался, то будет 404. Правильно будет не указывать папку, а менять имя стиля в рендер-массиве.

    Аватар пользователя isuvar isuvar 19 января 2019 в 22:17

    Создатели темы SShop видимо не стали заморачиваться вариантами товара и отображением нескольких изображений для одного товара. По крайней мере на их демосайте я этого не нашел https://sshop.optasy.com/product/aenean-ut-eros-et-nisl
    Вот их commerce-product.html.twig https://slexy.org/view/s21r45YBcf

    Аватар пользователя gun_dose gun_dose 19 января 2019 в 22:25
    1

    Если бы вы смотрели не только на статичную картинку из макета, а полазили бы по настоящим нормальным магазинам, то поняли бы, что это не первое изображение в другом стиле выводится, а сверху идёт слайдер из больших картинок по одной, а снизу слайдер из маленьких картинок, отображаемых несколько сразу, и нижний слайдер - это пейджер для верхнего. При этом большие фотки по клику должны увеличиваться.

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

    Аватар пользователя isuvar isuvar 19 января 2019 в 22:52

    Видимо имеется в виду это
    http://flexslider.woothemes.com/thumbnail-slider.html
    http://flexslider.woothemes.com/asnavfor-rtl.html
    Если изображения еще будут выводиться и через лайтбокс-плагины, то будет то, что нужно.
    Осталось разобраться как для переменной {{ item.content }} это прописать в шаблоне или на вкладке "Управление отображением", чтобы ее значения выводились в слайдере.
    Есть ли у кого опыт в этом деле? Какие модули лучше использовать? Что прописать в шаблоне (если это требуется)?

    Аватар пользователя isuvar isuvar 20 января 2019 в 1:14

    Установил модуль 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. К сожалению ни на странице варианта товара, ни на других страницах сайта он не заработал. Придется ждать, когда пофиксят баги и выпустят новую версию.

    Если знаете другой модуль, который мог бы помочь, то напишите плиз.

    Аватар пользователя isuvar isuvar 20 января 2019 в 1:45

    В файле field--commerce-product-variation--field-image--default.html.twig всем <div> добавил style="float: left;"
    Теперь миниатюры изображений варианта товара отображаются в строку, что и требовалось. Интеграция с PhotoSwipe (аналог Colorbox-a) работает, изображения вариантов меняются при смене вариантов товара.
    Задача решена.

    Как можно было правильнее решить задачу?

    Аватар пользователя isuvar isuvar 25 января 2019 в 12:18

    Решение получше - создать отдельное поле для миниатюр (вывести его через twig переменной {{ product.variation_field_images }}) и задать ему стиль
    .field--name-field-images {
    display: flex;
    flex-wrap: wrap;
    }
    В Управлении отображением для полей Изображение и Изображения вырбать формат Colorbox.