Для хорошей продажи интернет-магазина на базе VirtueMart надо не просто предложить «умные» цены, но и порадовать покупателя удобством поиска и выбора товара. Одна из таких возможностей открывается с помощью настройки сопутствующих товаров, и сегодня я расскажу на примере магазина 1.1.8 и Joomla, как сделать их красивый вывод.
Введение
Вообще не об одной красоте идёт речь, ведь модуль «сопутствующие товары» - это и отличная возможность для улучшения ПФ сайта и средство для подъёма конверсии. В версии VM 1xx СТ выводятся на карточках товара внизу, предлагая посетителю фото, название и цену сопутствующего товарного предложения. Покупку можно осуществлять и прямо из блока СТ и при переходе на саму карточку выбранной позиции. Как прикреплять товары к определённым страницам написано тут, ниже я расскажу, как изменить:
- - Отображение названия сопутствующих товаров,
- - Вывод картинок в блоке.
Редактируем блок сопутствующих товаров
Нужда в этом действии возникаем по той причине, что в шаблоне стоят настройки на вывод маленьких фото товаров, если же картинки большие, то цена и кнопка (ссылка) «купить» наезжают на фото и получается винегрет. Надо сместить текстовой блок ниже, заодно можно по вкусу отредактировать и название-ссылку товара.
Через 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, иначе придётся долго тыкаться вслепую.