Описание товара в всплывающей подсказке

  • 8 Ответов
  • 224 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

*

Оффлайн forzi

Уважаемые джумловоды и виртуемартеры=профи. Вопрос такой. В каких файлах заменить переменные для вывода в всплывающей подсказке (при наведении курсора на картинку товара). То есть вместо названия товара там вывести список ингредиентов из краткого описания... Или может каким новым полем делать?

*

Оффлайн forzi

И дабы не делать новую тему - как убрать вот такое (см фото) - то есть при нажатии на кнопки добавления в корзину чтобы не появлялось такое окошко а сразу все летело в корзину?

*

Оффлайн forzi

Второй вопрос решил самостоятельно. Если кому то пригодится - опишу суть решения. (актуально для VirtueMart 3.0.12 - на более ранних подверсиях троечки немного по другому)
Решается все в файле components\com_virtuemart\assets\js\vmprices.js
Но для начала в настройках VirtueMart снимаем галочку  использовать FancyBox, тем самым переводим магазин на работу с использованием facebox
Далее открываем указанный выше файл текстовым редактором и находим блок
if(usefancy){
jQuery.fancybox({
"titlePosition" : "inside",
"transitionIn" : "fade",
"transitionOut" : "fade",
"changeFade"    :   "fast",
"type" : "html",
"autoCenter"    :   true,
"closeBtn"      :   false,
"closeClick"    :   false,
"content"       :   txt
}
);
} else {
jQuery.facebox( txt , 'my-groovy-style');
}

В этом блоке комментируем строку
jQuery.facebox( txt , 'my-groovy-style');У меня в итоге этот блок стал выглядеть так:
if(usefancy){
jQuery.fancybox({
"titlePosition" : "inside",
"transitionIn" : "fade",
"transitionOut" : "fade",
"changeFade"    :   "fast",
"type" : "html",
"autoCenter"    :   true,
"closeBtn"      :   false,
"closeClick"    :   false,
"content"       :   txt
}
);
} else {
// jQuery.facebox( txt , 'my-groovy-style');
}
Вот и все решение.

*

Оффлайн Liss

странное решение... а теперь открой консоль браузера и смотри ошибки
а как человек теперь поймет, что добавление товара в корзину состоялось? если это убираешь, надо что-то взамен сделать - должна быть какая-то визуальная реакция интерфейса на нажатие кнопки "купить"

*

Оффлайн forzi

странное решение... а теперь открой консоль браузера и смотри ошибки
а как человек теперь поймет, что добавление товара в корзину состоялось? если это убираешь, надо что-то взамен сделать - должна быть какая-то визуальная реакция интерфейса на нажатие кнопки "купить"
Стоит модуль корзины сверху и при клике на кнопку "Купить" визуально не пропустишь добавления товара в корзину.

*

Оффлайн forzi

По основному вопросу никто не подскажет? "   Описание товара в всплывающей подсказке" - я что то все файлы перерыл - но пока не нашел...

*

Оффлайн forzi

Вопрос снимается. Нашел решение самостоятельно. Ни Google ни прочие яндексы мне так и не подсказали. Само решение ниже:
ВАЖНО! Решение работает для версии VirtueMart 3.0.12, на более ранних версиях несколько по другому все.
Итак, что же нам требуется - нам требуется вывести содержимое поля Краткое описание во всплывающей подсказке при наведение на изображение товара (туда, где по умолчанию выводится наименование товара). Я по своей простоте искал исходники для редактирования по пути .../components/com_virtuemart/views/ но был не прав. Такие вещи лежат на другой полке, а именно тут: .../components/com_virtuemart/sublayouts/
Так вот, по указанному пути ищем файл products.php, открываем его для редактирования и ищем такой вот блок:
<div class="vm-product-media-container" >

<a title="<?php echo $product->product_name ?>" href="<?php echo $product->link.$ItemidStr?>">
<?php
echo $product->images[0]->displayMediaThumb('class="browseProductImage"'false);
?>

</a>

</div>
Именно этот блок отвечает за вывод изображения товара и его титла (всплывающей при наведении курсора подсказки) Далее небольшое отступление.
Можно пойти двумя путями.
1 путь - просто сменить текст и все, делается это так. В строке:
<a title="<?php echo $product->product_name ?>" href="<?php echo $product->link.$ItemidStr; ?Вместо product_name вставляем product_s_desc (то есть по сути заменяем название товара на его описание) В принципе тут бы и успокоится, так как после сохранения файла и его внедрения в ваш сайт (на нужное место) все и заработает. Но...
Мы же не ищем легких путей и хотим, что бы всплывающая подсказка была красивая... И идем по второму пути. А вот и он:
2 путь - свой стиль для подсказки.
Итак, начнем. Берем все тот же блок
<div class="vm-product-media-container" >

<a title="<?php echo $product->product_name ?>" href="<?php echo $product->link.$ItemidStr?>">
<?php
echo $product->images[0]->displayMediaThumb('class="browseProductImage"'false);
?>

</a>

</div>

Но теперь не трогаем строку со ссылкой, нам она уже не нужна. Мы берем самую первую строку, ту, в которой открывается DIV
<div class="vm-product-media-container" >И вписывыем в эту строку еще одну конструкцию, а именно вот это:
data-title="<?php echo $product->product_s_desc ?>"В результате у нас получается вот такая вот ДИВооткрывашка:
<div class="vm-product-media-container" data-title="<?php echo $product->product_s_desc ?>">В принципе в этом файле и все... Можно пить чай... но не сразу. Файл сохраняем и заливаем его на нужное вам место. И идем далее...
Переходим по пути .../templates/вашстиль/css/ и вынимаем оттуда файл template.css, и далее вносим в него некоторые добавления.
В самом конце этого файла добавляем следующий блок
.vm-product-media-container {
      position: relative; /* Относительное позиционирование */
   }
   .vm-product-media-container:hover::after { /* включает подсказки только при наведении курсора */
    content: attr(data-title); /* Выводим текст */
    position: absolute; /* Абсолютное позиционирование */
width: 190px !important; /* ширина блока подсказки */
    left: 20%; top: 30%; /* Положение подсказки */
    z-index: 1; /* Отображаем подсказку поверх других элементов */
    background: rgba(255,255,230,0.9); /* Полупрозрачный цвет фона */
    font-family: Arial, sans-serif; /* Гарнитура шрифта */
    font-size: 13px; /* Размер текста подсказки */
    padding: 5px 10px; /* Поля */
    border: 1px solid #333; /* Параметры рамки */
border-radius: 4px; /* Скругляем углы рамки */
   }

В принципе после всех этих манипуляций у вас уже должно все работать. Вот как это выглядит у меня:

*

Оффлайн fsv

Цитировать
По основному вопросу никто не подскажет?
Так вопроса то нет. Кроме вас никто не знает, о чем вы спрашиваете. А выяснять на 10 постов никому не надо.

ЕСЛИ в категории:
\components\com_virtuemart\sublayouts\products.php
Код: (html4strict) [Выделить]
<a title="<?php echo $product->/*product_name*/product_s_desc ?>" href="<?php echo $product->link.$ItemidStr?>">Файл переопределить!

Цитировать
визуально не пропустишь
не верю. ссылка?

P.S. опередил, ну и молодец, спасение утопающих - дело рук...
Заказать разработку:    расширения Joomla  |   интерфейсы на javascript(jQuery)  |  мобильные приложения

*

Оффлайн forzi


не верю. ссылка?

P.S. опередил, ну и молодец, спасение утопающих - дело рук...
1. Не люблю показывать неоконченные работы
2. .. самих утопающих))) Только я пошел дальше банального спасения а еще и рамочку спасенному нарисовал)))