Навороты для товара в виде всплывающих рекламных блоков

  • 28 Ответов
  • 680 Просмотров

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

*

Alex GOOD

  • Осваиваюсь на форуме
  • ***
  • 188
  • 0
  • я только учусь...
Всем привет!
Подскажите можно ли как то осуществить данную задачу.
В общем списке товаров, на изображении товара добавить несколько блоков в виде какой либо картинки.
При наведении или клике по данному блоку всплывает какая-нибудь реклама в виде акции или чего-либо еще.
Тут нарисовал схематично: http://joxi.ru/RmzkWppI96KR2O
...есть ли какой-нибудь вариант для решения данного вопроса?

*

pvi1

  • Завсегдатай
  • *****
  • 527
  • 11
В новом шаблоне от Yootheme Finch есть похожая фишка - свой виджет Popover для Виджеткита. Посмотри ее принцип и подумай, как все это перенести в JS. Информация о внедрения Widgetkit в JS на форуме есть

*

dmitry_stas

  • Профи
  • ********
  • 9666
  • 930
особо не вижу проблем сделать это просто на CSS безо всякого "какого-нибудь варианта"
Тут дарят бакс просто за регистрацию! Успей получить!
Все советы на форуме раздаю бесплатно, то есть даром. Индивидуально бесплатно консультирую только по вопросам стоимости индивидуальных консультаций

*

Alex GOOD

  • Осваиваюсь на форуме
  • ***
  • 188
  • 0
  • я только учусь...
особо не вижу проблем сделать это просто на CSS безо всякого "какого-нибудь варианта"
а как просто в самом модуле создать пару div с ссылками в виде картинки и к ней прописать при наведении всплывающее окошко?
...может где какой пример есть похожий?

*

nevigen

  • Moderator
  • *****
  • 8832
  • 754
  • http://n*****n.com
хувер эффект
htmlbook.ru
Профессиональные / Бесплатные решения для JoomShopping
Не лечи бесплатно, ибо тот, кто лечится бесплатно, рано или поздно перестает ценить свое здоровье,
а тот, кто лечит бесплатно, рано или поздно перестает ценить результаты своего труда/ (с) Гиппократ?
Не ищите ответов, ищите решение !

*

Alex GOOD

  • Осваиваюсь на форуме
  • ***
  • 188
  • 0
  • я только учусь...
нашел интересный вариант - может кому пригодится http://ruseller.com/lessons.php?rub=2&id=664

*

vipiusss

  • Профи
  • ********
  • 5517
  • 318
  • JoomlaNet
Спойлер
[свернуть]

///
теперь вам,ТС:
Спойлер
[свернуть]

ТС опишите по другому вашу задачу
нарисуйте что вы хотите!
« Последнее редактирование: 09.11.2015, 00:20:18 от vipiusss »
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

Alex GOOD

  • Осваиваюсь на форуме
  • ***
  • 188
  • 0
  • я только учусь...
Надеюсь я вас понял :)

Указал все схематично http://joxi.ru/12MjMGGfplj5AJ

*

vipiusss

  • Профи
  • ********
  • 5517
  • 318
  • JoomlaNet
а что вам мешает сделать такой диз для карточки товара(раз у вас там есть купить и + и -)
и не трогать сам шаблон, а шаб сделать как вы хотите?
или вы просите именно вам код такой сделать?

Если вам надо картинку по частям сделать?т/е/ есть у вас div?при наведении(или клике) на опр часть картинки-происходит действие/
Это вам надо? маштабирование?картинка дива остаётся, но в зависимости по %, где мышка-происходят варианты ваши)
Я просто не догнал, сорри, или 3 в 1 и то и то?
« Последнее редактирование: 09.11.2015, 17:08:34 от vipiusss »
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

Alex GOOD

  • Осваиваюсь на форуме
  • ***
  • 188
  • 0
  • я только учусь...
нет, код я сам напишу, просто может кто уже сталкивался с такой задачей и есть пример который неплохо смотрится... вот и спросил...

*

vipiusss

  • Профи
  • ********
  • 5517
  • 318
  • JoomlaNet
ну если ваш div (новый) для всех картинок будет на одном месте, ховер эффект легко сделать
///
ну так я прав-масштабирование с ховер эффектом вам надо
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

vipiusss

  • Профи
  • ********
  • 5517
  • 318
  • JoomlaNet
<map> <area  href= http://ссылка  shape="rect" coords="0,0,0,0"> </map>
весь код, координаты в пайте внизу видны, их прописываете и задаёте ссылку
эффекты думаю, раз умеете, сами можете.
это ? тут при наведении/*нажатии на область в 4 параметрах, происходит ваше действие.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

Alex GOOD

  • Осваиваюсь на форуме
  • ***
  • 188
  • 0
  • я только учусь...
я пробовал таким образом http://ruseller.com/lessons.php?rub=2&id=664 как писал ранее, - все красиво... но вот когда вместо текста используешь картинку - то изображение дергается как паралитик при наведении...

*

dmitry_stas

  • Профи
  • ********
  • 9666
  • 930
Цитировать
когда вместо текста используешь картинку - то изображение дергается как паралитик при наведении
покажите
Тут дарят бакс просто за регистрацию! Успей получить!
Все советы на форуме раздаю бесплатно, то есть даром. Индивидуально бесплатно консультирую только по вопросам стоимости индивидуальных консультаций

*

Alex GOOD

  • Осваиваюсь на форуме
  • ***
  • 188
  • 0
  • я только учусь...
внизу страницы слева пока оставил http://elki-optom.by/ с текстом все красиво, а с картинкой проблема... все сделано по образцу примера что я скидывал

*

dmitry_stas

  • Профи
  • ********
  • 9666
  • 930
Тут дарят бакс просто за регистрацию! Успей получить!
Все советы на форуме раздаю бесплатно, то есть даром. Индивидуально бесплатно консультирую только по вопросам стоимости индивидуальных консультаций

*

vipiusss

  • Профи
  • ********
  • 5517
  • 318
  • JoomlaNet
так у вас маргин там, удалите
(пока писал Дмитрий тоже увидел)
//
а если вы там на сайте, лучше уже это посмотрите: http://ruseller.com/lessons.php?rub_id=2&id=1239
тут по клику обработка и на CSS,
на мобилке ваша подсказка будет никакая и пользователю есть вариант-кликать или нет, и смена варианта при клике.
///
посмотрел таблицы на сайте, может захотите интереснее их сделать:
http://blog.harrix.org/?p=513
« Последнее редактирование: 09.11.2015, 18:38:14 от vipiusss »
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

Alex GOOD

  • Осваиваюсь на форуме
  • ***
  • 188
  • 0
  • я только учусь...
Спасибо друзья - Чтобы я без вас делал даже и не знаю! Все пашет - варианты обязательно рассмотрю. Вопрос только еще как их можно привязать к определенному товару или хотя бы категории?

*

dmitry_stas

  • Профи
  • ********
  • 9666
  • 930
Код
<?php if ($product->product_id == 'ID товара') { ?>
.....
<?php } ?>
Тут дарят бакс просто за регистрацию! Успей получить!
Все советы на форуме раздаю бесплатно, то есть даром. Индивидуально бесплатно консультирую только по вопросам стоимости индивидуальных консультаций

*

Alex GOOD

  • Осваиваюсь на форуме
  • ***
  • 188
  • 0
  • я только учусь...
а где это прописать нужно? и как узнать ID товара?

*

dmitry_stas

  • Профи
  • ********
  • 9666
  • 930
1. ну там, где добавили tooltip. это условие для ваших дивов на которые наводить, когда их показывать.
2. в админке в списке товаров самая правая колонка
Тут дарят бакс просто за регистрацию! Успей получить!
Все советы на форуме раздаю бесплатно, то есть даром. Индивидуально бесплатно консультирую только по вопросам стоимости индивидуальных консультаций

*

Alex GOOD

  • Осваиваюсь на форуме
  • ***
  • 188
  • 0
  • я только учусь...
...аааа понял, попробую

*

Alex GOOD

  • Осваиваюсь на форуме
  • ***
  • 188
  • 0
  • я только учусь...
Код
<?php if ($product->product_id == 'ID товара') { ?>
.....
<?php } ?>

Подскажите как правильно это описать? Если допустим ID товара 14:

Код
<?php if ($product->product_id == '14') { ?>

     .tooltip?  тут непонятно как к нему применить данные настройки? Или просто целикoм весь код вкидывать?

     <a href="#" class="tooltip">
          <img src="images/circle.png" alt="Информация" width="100" height="50" />
          <span class="custom info"><em>Акция! </em>При покупке данного товара Вы получается уникальный подарок от производителя! <br /><br />Приглашаем за покупками!</span>
     </a>

<?php } ?>





*

Alex GOOD

  • Осваиваюсь на форуме
  • ***
  • 188
  • 0
  • я только учусь...
Все разобрался, - так оно и будет:
Код
<?php if ($product->product_id == '14') { ?>
     <a href="#" class="tooltip">
          <img src="images/circle.png" alt="Информация" width="100" height="50" />
          <span class="custom info"><em>Акция! </em>При покупке данного товара Вы получается уникальный подарок от производителя! <br /><br />Приглашаем за покупками!</span>
     </a>
<?php } ?>

Всем большое спасибо за помощь!

*

dmitry_stas

  • Профи
  • ********
  • 9666
  • 930
о, ну вот видите :) а вы в себя не верили :)
Тут дарят бакс просто за регистрацию! Успей получить!
Все советы на форуме раздаю бесплатно, то есть даром. Индивидуально бесплатно консультирую только по вопросам стоимости индивидуальных консультаций

*

Alex GOOD

  • Осваиваюсь на форуме
  • ***
  • 188
  • 0
  • я только учусь...
Скажите, а можно ли подобным образом применить какие-то стили к определенному ID?
Например так:

<?php if ($product->product_id == '209') { ?>
   .description {
      height: 60px;
      }
<?php } ?>


Правда так не работает...

*

Alex GOOD

  • Осваиваюсь на форуме
  • ***
  • 188
  • 0
  • я только учусь...
Вот так работает - правда ложит весь список товаров:


<?php if ($product->product_id == '209') { ?>
   <style>
   .description {
      height: 60px!important;
      }
      </style>
<?php } ?>


В другой категории все нормально, а в той категории где находится данный ID - применяет ко всем товарам...  :o
« Последнее редактирование: 17.11.2015, 17:56:35 от Alex GOOD »

*

dmitry_stas

  • Профи
  • ********
  • 9666
  • 930
естественно ко всем. ваше условие php говорит лишь о том, что этот стиль появится на странице, если встретится такой id, а вовсе не то, что он будет применен только к этому товару. CSS все равно какой id у товара. делайте либо style="..." в зависимости от id, либо что лучше не style, а давайте какой нибудь класс, а этот класс уже просто опишите в CSS. т.е. вам надо добиться того, чтобы для всех товаров был
<div class="description">, а для определенных id скажем <div class="my_description">
Тут дарят бакс просто за регистрацию! Успей получить!
Все советы на форуме раздаю бесплатно, то есть даром. Индивидуально бесплатно консультирую только по вопросам стоимости индивидуальных консультаций

*

Alex GOOD

  • Осваиваюсь на форуме
  • ***
  • 188
  • 0
  • я только учусь...
ну в принципе тоже вариант, - надо будет попробовать... я просто не силен в php и получается все методом тыка делаю