1. Главная
  2. Форумы
  3. Техподдержка Drupal
  4. Решение проблем

Изменение вывода товара

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

Аватар пользователя palovnik228 palovnik228 24 сентября 2019 в 9:15

У меня есть сверстанный фронтенд интернет-магазина, который нужно натянуть на Drupal. Использую плагин Ubercart.

Сейчас товары выводятся таблицей:

<table class="views-view-grid cols-4">
 
  <tbody>
          <tr class="row-1 row-first row-last">
                  <td class="col-1 col-first">
             
  <div class="views-field views-field-title">        <span class="field-content"><a href="/node/1">Товар 1</a></span>  </div>  
  <div class="views-field views-field-uc-product-image">    <span class="views-label views-label-uc-product-image">Изображение: </span>    <div class="field-content"><a href="/node/1"><img typeof="foaf:Image" src="http://lbgmpshl4kencia.h1n.ru/sites/default/files/styles/uc_product/publ... width="133" height="125" alt=""></a></div>  </div>  
  <div class="views-field views-field-display-price">    <span class="views-label views-label-display-price">Цена: </span>    <span class="field-content"><span class="uc-price">0.00 ₽</span></span>  </div>  
  <div class="views-field views-field-changed">    <span class="views-label views-label-changed">Обновлено: </span>    <span class="field-content">09/21/2019</span>  </div>          </td>
                  <td class="col-2">
             
  <div class="views-field views-field-title">        <span class="field-content"><a href="/content/good2">Товар 2</a></span>  </div>  
  <div class="views-field views-field-uc-product-image">    <span class="views-label views-label-uc-product-image">Изображение: </span>    <div class="field-content"><a href="/content/ogurec"><img typeof="foaf:Image" src="http://lbgmpshl4kencia.h1n.ru/sites/default/files/styles/uc_product/publ... width="250" height="188" alt=""></a></div>  </div>  
  <div class="views-field views-field-display-price">    <span class="views-label views-label-display-price">Цена: </span>    <span class="field-content"><span class="uc-price">15.00 ₽</span></span>  </div>  
  <div class="views-field views-field-changed">    <span class="views-label views-label-changed">Обновлено: </span>    <span class="field-content">09/23/2019</span>  </div>          </td>
                  <td class="col-3">
             
  <div class="views-field views-field-title">        <span class="field-content"><a href="/content/good3">Товар 3</a></span>  </div>  
  <div class="views-field views-field-uc-product-image">    <span class="views-label views-label-uc-product-image">Изображение: </span>    <div class="field-content"><a href="/content/rubaha"><img typeof="foaf:Image" src="http://lbgmpshl4kencia.h1n.ru/sites/default/files/styles/uc_product/publ... width="250" height="188" alt=""></a></div>  </div>  
  <div class="views-field views-field-display-price">    <span class="views-label views-label-display-price">Цена: </span>    <span class="field-content"><span class="uc-price">0.00 ₽</span></span>  </div>  
  <div class="views-field views-field-changed">    <span class="views-label views-label-changed">Обновлено: </span>    <span class="field-content">09/23/2019</span>  </div>          </td>
                  <td class="col-4 col-last">
                      </td>
              </tr>
      </tbody>
</table>

А мне нужно вывести товар с использованием сетки bootstrap - то есть, совсем по-другому:

<div class="col-12 col-md-6 col-lg-4 p-1">
        <div class="good-list-product-card">
                <div class="good-list-product-installment installment-visible">РАССРОЧКА 0-0-12</div>
                <div style="background-image: url(img/chair.png);" class="good-list-product-preview"></div>
                <p class="good-list-product-type">Категория товара</p>
                <p class="good-list-product-name">Название товара</p>
                <p class="good-list-product-price"><span class="good-list-product-value">25 000</span> ₽</p>
                <p class="good-list-old-price"><span class="good-list-old-value">25 000</span> ₽</p>
                <div class="cross-line good-list-cross-line"></div>
                <img src="img/cart-icon.svg" alt="" class="good-list-buy-icon">
        </div>
</div> <!-- col -->

Как можно реализовать такую замену шаблона?

Лучший ответ

Аватар пользователя VasyOK VasyOK 24 сентября 2019 в 10:44
1

Редактируете вьюс, которым у вас выводятся товары.
Во вьюсе меняете:
Формат: Неформатированный список (Сейчас сетка)
Класс строки good-list-product-card
CSS класс (всей вьюхи): col-12 col-md-6 col-lg-4 p-1

Чтоб такое сделать
<div class="good-list-product-installment installment-visible">РАССРОЧКА 0-0-12</div>
в настройки поля идете и там Настройки стиля - задаете формат контейнера и класс

такое:
<div style="background-image: url(img/chair.png);" class="good-list-product-preview"></div>
Ставим модуль https://www.drupal.org/project/image_url_formatter и форматируем урлом поле картинки
В настройках поля Перезаписать результаты

Обращаю внимание на ссылку во вьюхе "Информация" - по ней действительно можно переписать части шаблона вывода. Но делать это надо в последнюю очередь. А если из шаблонов удалять контейнеры запросто может AJAX отвалиться.

Комментарии

Аватар пользователя VasyOK VasyOK 24 сентября 2019 в 10:44
1

Редактируете вьюс, которым у вас выводятся товары.
Во вьюсе меняете:
Формат: Неформатированный список (Сейчас сетка)
Класс строки good-list-product-card
CSS класс (всей вьюхи): col-12 col-md-6 col-lg-4 p-1

Чтоб такое сделать
<div class="good-list-product-installment installment-visible">РАССРОЧКА 0-0-12</div>
в настройки поля идете и там Настройки стиля - задаете формат контейнера и класс

такое:
<div style="background-image: url(img/chair.png);" class="good-list-product-preview"></div>
Ставим модуль https://www.drupal.org/project/image_url_formatter и форматируем урлом поле картинки
В настройках поля Перезаписать результаты

Обращаю внимание на ссылку во вьюхе "Информация" - по ней действительно можно переписать части шаблона вывода. Но делать это надо в последнюю очередь. А если из шаблонов удалять контейнеры запросто может AJAX отвалиться.

Аватар пользователя VasyOK VasyOK 24 сентября 2019 в 11:50

И еще: на теме fusion не стоит работать если вы не понимаете зачем она. Если Бустрапом ползуетесь скорей всего вам надо другая базовая тема. Как правильно подключать Бустрап - ответить не могу. Не люблю его.