сопутствующие товары VM

Для хорошей продажи интернет-магазина на базе VirtueMart надо не просто предложить «умные» цены, но и порадовать покупателя удобством поиска и выбора товара. Одна из таких возможностей открывается с помощью настройки сопутствующих товаров, и сегодня я расскажу на примере магазина 1.1.8 и Joomla, как сделать их красивый вывод.

Введение

Вообще не об одной красоте идёт речь, ведь модуль «сопутствующие товары» - это и отличная возможность для улучшения ПФ сайта и средство для подъёма конверсии. В версии VM 1xx СТ выводятся на карточках товара внизу, предлагая посетителю фото, название и цену сопутствующего товарного предложения. Покупку можно осуществлять и прямо из блока СТ и при переходе на саму карточку выбранной позиции. Как прикреплять товары к определённым страницам написано тут, ниже я расскажу, как изменить:

  1. - Отображение названия сопутствующих товаров,
  2. - Вывод картинок в блоке.

Редактируем блок сопутствующих товаров

Нужда в этом действии возникаем по той причине, что в шаблоне стоят настройки на вывод маленьких фото товаров, если же картинки большие, то цена и кнопка (ссылка) «купить» наезжают на фото и получается винегрет. Надо сместить текстовой блок ниже, заодно можно по вкусу отредактировать и название-ссылку товара.

productsnapshot.tpl

Через ftp заходим по адресу –

Components/com_virtuemart/themes/default/templates/common/productsnapshot.tpl

И открываем файл (F4 в Total Commander).

Блок <!-- The product name DIV. --> отвечает за вывод названия сопутствующего товара.

Здесь строка:

height: …px

отвечает за пробел между названием товарной позиции и фото, а строка:

line-height: …px;

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

width: …% -

это ширина блока вывода.

Ниже блок <!-- The product image DIV. -->, который отвечает за вывод картинки, цены и ссылки «купить».

Тут строка:

height: …px отвечает за расстояние между фото и кнопками, а строка margin-top: …px ответственна за высоту расположения фото на странице (выше-ниже).

На фото сверху вы видите, как может изменяться вывод картинки сопутствующих товаров до и после редактирования.

Кстати, цвет кнопки «купить» в сопутствующих товарах и её окружение background можно изменить по адресу – components/com_virtuemart/themes/default/themes.css. Там находите блок .addtocart_button_module, и правите то, что надо.

Как видим, сильно сложного ничего нет, однако советую перед правкой файла productsnapshot.tpl  сделать бекап и контролировать работу в плагине для браузера Mozilla – Firebug, иначе придётся долго тыкаться вслепую.

Комментарии   

+1 #1 Роман 18.08.2015 12:39
Спасибо за подробное описание настройки на конкретном примере. :-)
Цитировать

Добавить комментарий


Защитный код
Обновить