
Часто, для привлечения внимания к определенным товарам интернет-магазина, на них добавляются ярлыки. Это может быть «Новинка», «Скидка», «Акция» и другие. Данных трюк позволяет быстрее продавать товары, или, как минимум, заинтересовать пользователей. Все любят скидки, даже если это просто рекламный ход. Virtuemart 2 позволяет достаточно легко реализовать данную функцию, но почему-то в Интернете описаны лишь способы требующие хаков ядра, либо оплаты за дополнительное расширение. В этой статье я расскажу, как самостоятельно, быстро и бесплатно добавить любые ярлыки к товарам Virtuemart 2 не используя дополнительных расширений и не прибегая к хакам.
Содержание
Планирование
Прежде, чем приступать к реализации, было бы неплохо все спланировать. Весь процесс добавления ярлыков будет состоять из следующих этапов:
- Выбор и подготовка изображений ярлыков.
- Создание дополнительного поля Virtuemart 2 для ярлыков.
- Добавление кода вызова дополнительного поля Virtuemart 2 в макетах категории и товара.
- Добавление дополнительного поля для определенных товаров.
- Оформление ярлыка в контексте товара.
Здесь этапы описаны кратко, но дают возможность понять, что именно требуется сделать. Ниже разберем каждый этап подробно и с примерами.
Выбор и подготовка изображений ярлыков
Во-первых, нужно определиться, сколько мы хотим добавить ярлыков, подобрать подходящие изображения и привести их к единому стилю и размерам. Предположим, нам нужно создать три различных ярлыка с возможностью добавлять любой из них к любому товару. Пусть это будет «Скидка», «Новинка» и «Акция». На самом деле ярлыков может быть сколько угодно. Добавить их позже также не составит большого труда.
Вот наши ярлыки:
Они представляют собой три картинки формата PNG размеров 48x48 px. Если вы планируете поместить ярлыки непосредственно на изображения товаров, то картинки ярлыков обязательно должны иметь прозрачный фон, а соответственно быть форматов PNG или GIF.
После того, как ярлыки подготовлены, необходимо загрузить их на сайт. Проще всего сделать так:
- Через FTP загрузить изображения ярлыков в папку:
images\stories\virtuemart\product - Перейти в Медиа-менеджер Virtuemart 2 (Магазин –> Медиа-файлы) и нажать кнопку «Синхронизировать с Virtuemart».
Файлы ярлыков должны появиться в списке:
Когда ярлыки готовы и загружены на сайт можно переходить к следующему этапу.
Создание дополнительного поля 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.
На этом правки кода закончены. Переходим к добавлению ярлыков для определенных товаров.
Добавление дополнительного поля ярлыков для определенных товаров
Здесь все очень просто. Выбираем в админке товар, к которому нужно добавить ярлык. Переходим в его настройки. Во вкладке «Настраиваемые поля» выбираем тип поля «Ярлык» и указываем для него необходимое изображение ярлыка.
Сохраняем. Если все сделано правильно, то после этого действия на сайте, в категории и товаре, появится наше изображение. После этого останется лишь красиво его оформить.
Оформление ярлыка в контексте товара
Всё, что касалось работы с данными, мы сделали. Осталось исключительно оформление (верстка). Поскольку в коде мы задали уникальные классы, то остается только оформить ярлык с помощью 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/). Можете воспользоваться услугами этой студии.
.category-product-label .vm-img-desc, .product-label .vm-img-desc, .product-fields-title {display:none;}
templates/ваш_шаблон/modules/имя_модуля/
Код нужно ставить туда, где удобнее. Там посмотрите по коду макета, посмотрите на сайте через Firebug.
С CSS опять же поможет Firebug.
Сорри за -, все работает
1. комментарии (попробуйте аккуратно удалить комментарии автора)
2. пробелы между ключевыми словами
phpif => php if)
А вообще отличная идея, спасибо автору!!!
Warning: Invalid argument supplied for foreach() \www\components\com_virtuemart\views\productdetails\tmpl\default_customfields.php on line 26
проблема в этом куске
не
либо в настройках дополнительного поля указана другая позиция.
// Проверяем, есть ли у товара ярлык $this->position = 'product-label';
если убрать эти строчки - пропорции восстанавливаются , но картинка становится таким размером как заданы миниатюры в шаблоне VM2.category-product-label img, .product-label img {width:60px;height:60px;}
.category-product-label .vm-img-desc, .product-label .vm-img-desc {width:60px;height:60px;}.
А может быть проблема default.php ведь проблема появляется именно в карточке товара, на странице категорий всё отлично
Ну а так, для общего развитию - спасибо за инфу =)
http://lindtextil.cz/ru/magazin/gotovye-shtory/cerame-1-detail
Здесь нет:
http://lindtextil.cz/ru/magazin/gotovye-shtory
Все прекрасно работает за исключением двух моментов:
1) в товаре не отображается ярлык и,
2) в рекомендуемых товарах также нет этих значков.
Вы не можете подсказать как добавить ярлыки на указанные страницы?
Если в карточке товара несколько изображений, то при переходе по ним, меняется изображения встраимого ярлыка на маленькие изображения самих фото, вот пример:http://lindtextil.cz/cz/obchod/hotove-zaclony/cerame-1-detail
1) http://screencast.com/t/4ifI4OuoV
2) http://screencast.com/t/EweG0yHIyJxc
В категориях сработало, а вот в карточке товара не получилось. Даже, не знаю, в чем может быть загвоздка, помогите разобраться. Смотрю html-код, div с классом product-label есть, но он пустой.
Сайт пока на локальном хостинге.
Копировала код из статьи, а там фрагмент кода идет подряд за комментом, то есть тоже закомментирован. Надо было лишь нажать Enter)
Друзья, кто знает как правильно избавится от пробелов? Правильно ли я вставляю код?
Спасибо Вам огромное за Ваши статьи.
.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://онлайн31.рф/katalog/kraska-dlya-volos-prestige-vip-s-rosaimpex-bolgariya/prestizh-balzam-ottenochnyj-silver-effect-detail
.product-label
добавьте стиль:
z-index:65000;
http://forum.virtuemart.net/index.php?topic=119971.0
Но не сказать, что хорошее решение.
Вообще дело, как я понял, в некорректной обработке при создании миниатюр изображений. Самое простое решение - использовать JPG.
Т.е. отдельно получить путь к изображению, отдельно получить ссылку на полное изображение и изобразить примерно то, что вы видите в html странице в коде макета. После этого вы сможете подсунуть в тег картинку ярлыка.
Спасибо!
Как это можно исправить?
Нужна помощь. Сделать вывод иконок статуса товара в модуле, категории и карточке товара выше описанным способом.
Joomla! 2.5 / VM 2.0.20b
Возможно кто знает альтернативные расширения, как платные так и халяву. Буду признателен в советах.
но есть маленький нюанс - как убрать лишние пробелы после вывода в категориях?
рядом картинка без стикера и сразу внизу название, артикул, цена.
а если со стикером, то получается куча пустого мета между картинкой и названием товара
подскажите, пожалуйста, куда нужно скопировать последний CSS-код?
.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;}
все делал по Вашей инструкции кроме: Код вызова дополнительного поля ярлыков на странице товара.
у меня в карточке товара есть поле Ярлык и уже можно выбрать закруженные картинки
спасибо
Ярлыки и экспортируются и импортируются точно также, как и любое другое дополнительное поле VM. На сайте CSVI есть подробная инструкция по экспорту/импорту custom fields.
Товары стоят в определенном порядке. Например, стул 1 красный - стул 1 синий - стул 1 зеленый. На всех стоит ярлык "в наличии" (бесспорно, большое спасибо Вам за этот метод, все прекрасно работало до определенного момент), но вот возникла проблема. При добавлении сопутствующих товаров (в моем случае - похожих товаров) всплыло кое-что. Если я добавляю к красному стулу синий и зеленый в сопутствующие (и по этому же методу добавлю сопутствующие к синему и зеленому) , то ярлык только у красного (в категории, не использую ярлыки в карточке товара), если поставить сопутствующие к синему и зеленому без красного, то будут отображаться у первых двух и тд. То есть, сопутствующие товары "отрубают" ярлык у последующих по списку товаров в категории. Вы с таким не сталкивались?
Я рассматривал решение с прямым обращение в БД для загрузки доп. полей. Но, в моём случае, это не сработает. Т.к. мне нужно выводить плагин. Плагин считает стоимость комплекта. Видимо остаётся только получать данные из плагина и производить расчёт на странице категории. Но, это конечно тот ещё костыль. Может подскажете более элегантное решение?
Что может быть?
Вот код:
Вы увидите, как хранятся данные. Найдите то, что вам нужно, и сможете вывести. Главное понимать, что если тип - объект, то нужно использовать ->поле, а если тип - массив, то ['поле'].
VirtueMart 3.2.2
вставляю предложенный Вами код в файл "шаблон/html/com_virtuemart/category/default.php" ничего не меняется. В этом файле нет кода вызова основного изображения
икал этот код в \components\com_virtuemart\views\category\tmpl\default.php
Вероятно я не правильно понял - подскажите решение.
Возможно в VirtueMart3 другой файл отвечает за изображение на странице категорий - подскажите куда вставлять предложенный Вами код.
Спасибо
/components/com_virtuemart/sublayouts/products.php
Код не выводит настраиваемое поле в ViruteMart3
Подскажите пожалуйста, как правильно сделать.
В категории все товары одинаковые, а один особенный. Повесить на него ярлычок-картинку для выделения.