Virtuemart 2. Как добавить к товару ярлыки «скидка», «новинка» и т. д.(Кейс #4).

Часто, для привлечения внимания к определенным товарам интернет-магазина, на них добавляются ярлыки. Это может быть «Новинка», «Скидка», «Акция» и другие. Данных трюк позволяет быстрее продавать товары, или, как минимум, заинтересовать пользователей. Все любят скидки, даже если это просто рекламный ход. Virtuemart 2 позволяет достаточно легко реализовать данную функцию, но почему-то в Интернете описаны лишь способы требующие хаков ядра, либо оплаты за дополнительное расширение. В этой статье я расскажу, как самостоятельно, быстро и бесплатно добавить любые ярлыки к товарам Virtuemart 2 не используя дополнительных расширений и не прибегая к хакам.

Добавление ярлыков в Virtuemart 2. Планирование.

Прежде, чем приступать к реализации, было бы неплохо все спланировать. Весь процесс добавления ярлыков будет состоять из следующих этапов:

1. Выбор и подготовка изображений ярлыков.
2. Создание дополнительного поля Virtuemart 2 для ярлыков.
3. Добавление кода вызова дополнительного поля Virtuemart 2 в макетах категории и товара.
4. Добавление дополнительного поля для определенных товаров.
5. Оформление ярлыка в контексте товара.

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

Добавление ярлыков в Virtuemart 2. Выбор и подготовка изображений ярлыков.

Во-первых, нужно определиться, сколько мы хотим добавить ярлыков, подобрать подходящие изображения и привести их к единому стилю и размерам. Предположим, нам нужно создать три различных ярлыка с возможностью добавлять любой из них к любому товару. Пусть это будет «Скидка», «Новинка» и «Акция». На самом деле ярлыков может быть сколько угодно. Добавить их позже также не составит большого труда.

Вот наши ярлыки:

Они представляют собой три картинки формата PNG размеров 48x48 px. Если вы планируете поместить ярлыки непосредственно на изображения товаров, то картинки ярлыков обязательно должны иметь прозрачный фон, а соответственно быть форматов PNG или GIF.

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

1. Через FTP загрузить изображения ярлыков в папку:
    images\stories\virtuemart\product
2. Перейти в Медиа-менеджер Virtuemart 2 (Магазин –> Медиа-файлы) и нажать кнопку «Синхронизировать с Virtuemart».

Файлы ярлыков должны появиться в списке:

Когда ярлыки готовы и загружены на сайт можно переходить к следующему этапу.

Добавление ярлыков в Virtuemart 2. Создание дополнительного поля Virtuemart 2 для ярлыков.

Добавлять ярлыки к товарам мы будем с помощью дополнительного поля Virtuemart 2. Причем поле потребуется только одно. Переходим в менеджер дополнительных полей Virtuemart 2 и создаем новые поле типа «Изображение» с настройками, как показано на рисунке ниже:

Не забудьте указать позицию макета. Она должна быть уникальной и использоваться только для этого поля.

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

Добавление ярлыков в Virtuemart 2. Добавление кода вызова дополнительного поля Virtuemart 2 в макетах категории и товара.

Предполагается, что ярлыки будут показаться в категории товаров на некоторых товарах категории и в карточке товара. Ниже привожу коды отдельно для макета категории и товара.

Код вызова дополнительного поля ярлыков на странице категории товаров.

1. Копируем файл:

components/com_virtuemart/views/category/tmpl/default.php

в папку:

templates/[ваш_шаблон]/html/com_virtuemart/category/

Если каких-то каталогов не хватает, создаем их самостоятельно. Если файл уже присутствует в конечной папке, то заменять его не нужно.

2. В скопированном файле (который находится в папке с шаблоном), находим код вызова основного изображения и добавляем после него приведенный код:

<div class="product floatleft<?php echo $Browsecellwidth . $show_vertical_separator ?>">
	<div class="spacer">
		<div class="width30 floatleft center">
			<a title="<?php echo $product->product_name ?>" rel="vm-additional-images" href="/<?php echo $product->link; ?>"><?php echo $product->images[0]->displayMediaThumb('class="browseProductImage"', false);?>
			 </a> <!-- Окончание кода основоного изображения. После него нужно вставлять код, который представлен ниже!  -->
 <?php // Код вывода ярлыка
       if (!empty($product->customfields)) { //проверяем, есть ли дополнительные поля у текущего товара ?>
       <?php foreach ($product->customfields as $field){ // если поля есть, просматриваем все в поисках поля ярлыка
       if($field->layout_pos == 'product-label'){ // ищем поля ярлыка через позицию ?>	
       <div  class="category-product-label"><?php echo $field->display; //выводим ярлык ?>
       </div>
<?php }}} ?>	

Код вызова дополнительного поля ярлыков на странице товара.

1. Копируем файл:

components/com_virtuemart/views/productdetails/tmpl/default_images.php

в папку:

templates/[ваш_шаблон]/html/com_virtuemart/productdetails/

Если каких-то каталогов не хватает, создаем их самостоятельно. Если файл уже присутствует в конечной папке, то заменять его не нужно.

2. В скопированном файле (который находится в папке с шаблоном), находим код вызова основного изображения и добавляем после него приведенный код:

<div class="main-image"><?php echo $image->displayMediaFull("",true,"rel='vm-additional-images'"); ?>
	 <div class="clear"></div>
	<!-- Окончание кода вывода основного изображения. После него нужно вставлять код, который представлен ниже--> 
 <?php if (!empty($this->product->customfieldsSorted['product-label'])) { // Проверяем, есть ли у товара ярлык 
        $this->position = 'product-label'; ?>
	<div class="product-label"><?php echo $this->loadTemplate('customfields'); //Выводим ярлык ?>
	</div>
 <?php }?>

Перед правкой кода мы переопределяем макеты категории и страницы товара в используемый шаблон Joomla, что предотвратит исчезновение правок в случае обновления Virtuemart 2.

На этом правки кода закончены. Переходим к добавлению ярлыков для определенных товаров.

Добавление ярлыков в Virtuemart 2. Добавление дополнительного поля ярлыков для определенных товаров.

Здесь все очень просто. Выбираем в админке товар, к которому нужно добавить ярлык. Переходим в его настройки. Во вкладке «Настраиваемые поля» выбираем тип поля «Ярлык» и указываем для него необходимое изображение ярлыка.

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

Добавление ярлыков в Virtuemart 2. Оформление ярлыка в контексте товара.

Всё, что касалось работы с данными, мы сделали. Осталось исключительно оформление (верстка). Поскольку в коде мы задали уникальные классы, то остается только оформить ярлык с помощью CSS. Ниже я привожу CSS-код, который подходит для стандартного шаблон Virtuemart 2. Его использовать необязательно. Можно все оформить по-своему, но для примера привожу:

.category-product-label {
    left: 30px;
    position: relative;
    top: -25px;}
 .product-label {
    left: 50px;
    position: relative;
    top: -150px;}
 .category-product-label img, .product-label img {width:48px;height:48px;}
 .category-product-label .vm-img-desc, .product-label .vm-img-desc {display:none;}

После этого наши ярлыки выглядят так:

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

---------

Если вам надоело читать подобные статьи и ковыряться в коде, то ваш вариант - изготовление сайтов на заказ(http://www.savsolution.ru/). Можете воспользоваться услугами этой студии.

Об авторе

Wedal (Виталий). Веб-разработчик полного цикла (Full Stack). Создатель и автор сайта Wedal.ru.

Основной профиль – создание сайтов и расширений на CMS Joomla.

• Об авторе
• Портфолио
• Услуги
• Контакты