Перейти к содержимому


Краткое Описание Товара?


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 30

#1 mo-25

mo-25

    Новичок

  • Пользователи
  • Pip
  • 5 сообщений

Отправлено 19 Июль 2011 - 13:27

Как настроить, чтобы при наведении на товар курсором, отображалось краткое описание товара?

#2 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 23 788 сообщений

Отправлено 20 Июль 2011 - 00:23

Хм. можно попробовать добавить атрибут title к блоку с товаром. Например в шаблоне "Товары"

Найти блок

<div class="listing">

далее заменить его на

<div class="listing" title="{goods.DESCRIPTION_SHORT}">

Для отображения таблицей найти

<div class="goodsListItemBlock withBorder cornerAll">

заменить на

<div class="goodsListItemBlock withBorder cornerAll" title="{goods.DESCRIPTION_SHORT}">


#3 mo-25

mo-25

    Новичок

  • Пользователи
  • Pip
  • 5 сообщений

Отправлено 20 Июль 2011 - 08:01

Для отображения таблицей найти



заменить на


[/quote]


Все отлично! Получилось как надо.
Большое спасибо!

#4 mo-25

mo-25

    Новичок

  • Пользователи
  • Pip
  • 5 сообщений

Отправлено 20 Июль 2011 - 16:03

При на ведение курсором на товар текст отображается. А как увеличить этот текст? Текст короткого описания?

#5 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 23 788 сообщений

Отправлено 21 Июль 2011 - 02:34

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

#6 478666@mail.ru

478666@mail.ru

    Пользователь

  • Пользователи
  • PipPip
  • 11 сообщений
  • ГородТольятти

Отправлено 13 Август 2011 - 20:10

 Vaccina (20 Июль 2011 - 00:23) писал:

Хм. можно попробовать добавить атрибут title к блоку с товаром. Например в шаблоне "Товары"

Найти блок

<div class="listing">

далее заменить его на

<div class="listing" title="{goods.DESCRIPTION_SHORT}">

Для отображения таблицей найти

<div class="goodsListItemBlock withBorder cornerAll">

заменить на

<div class="goodsListItemBlock withBorder cornerAll" title="{goods.DESCRIPTION_SHORT}">

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

и еще - как увеличить размер вылезающего краткого описания, а то слишком маленькое, видно плохо

#7 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 23 788 сообщений

Отправлено 14 Август 2011 - 02:42

Хм. можно на css сделать данный тоолтип. Вам потребуется в файл стилей main.css добавить следующее

div.tooltip {
  position:absolute;
  display:none;
  padding:5px;
  bottom:80px;
  border:1px solid #D6D6D6;
  width:400px;
  z-index:999;
  background:#fff;
  left:80px;
}

.tooltip_select {
 position:relative;
}

.tooltip_select:hover div.tooltip {
  display:block;
}

далее нужно сделать небольшую разметку в шаблоне.

<div class="tooltip">Тут текст тоолтипа</div>

данный див вкладываете в любой другой удобный див, и задаете ему класс tooltip_select

например для товаров - при наведении на изображение отображается описание

найдем в шаблоне

<div class="imagem">
   <a href="{goods.URL}"><img {% IF goods.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-medium.png" width="220"{% ELSE %}src="{goods.IMAGE_SMALL}"{% ENDIF %} alt="{goods.NAME}" /></a>
</div> 

далее изменим на

<div class="imagem tooltip_select">
   <div class="tooltip">{goods.DESCRIPTION_SHORT}</div>
   <a href="{goods.URL}"><img {% IF goods.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-medium.png" width="220"{% ELSE %}src="{goods.IMAGE_SMALL}"{% ENDIF %} alt="{goods.NAME}" /></a>
</div>

или например для шаблона мокко

<div class="goodsListItemImage tooltip_select">
 <div class="tooltip">{goods.DESCRIPTION_SHORT}</div>
 <a href="{goods.URL}"><img src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png{% ELSE %}{goods.IMAGE_SMALL}{% ENDIF %}" alt="{goods.NAME}" /></a>
</div>

по идее все похоже.

#8 ritikkk

ritikkk

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 58 сообщений
  • ГородМосква

Отправлено 04 Февраль 2012 - 13:00

 Vaccina (20 Июль 2011 - 00:23) писал:

Хм. можно попробовать добавить атрибут title к блоку с товаром. Например в шаблоне "Товары"

Найти блок

<div class="listing">

далее заменить его на

<div class="listing" title="{goods.DESCRIPTION_SHORT}">

Для отображения таблицей найти

<div class="goodsListItemBlock withBorder cornerAll">

заменить на

<div class="goodsListItemBlock withBorder cornerAll" title="{goods.DESCRIPTION_SHORT}">




не могу в Шаблоне Мокко найти этот класс.(((

#9 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 23 788 сообщений

Отправлено 04 Февраль 2012 - 22:18

Используйте информацию из сообщения http://forum.storela...ndpost__p__6484
В шаблоне "Мокко" делается все по аналогии.

#10 TAD-jik

TAD-jik

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 494 сообщений

Отправлено 04 Февраль 2012 - 22:30

 mo-25 (19 Июль 2011 - 13:27) писал:

Как настроить, чтобы при наведении на товар курсором, отображалось краткое описание товара?

А зачем это надо

#11 Flor@@

Flor@@

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 959 сообщений

Отправлено 30 Июнь 2012 - 03:58

 Vaccina (14 Август 2011 - 02:42) писал:

далее нужно сделать небольшую разметку в шаблоне.
<div class="tooltip">Тут текст тоолтипа</div>
данный див вкладываете в любой другой удобный див, и задаете ему класс tooltip_select
например для товаров - при наведении на изображение отображается описание
найдем в шаблоне

<div class="imagem">
   <a href="{goods.URL}"><img {% IF goods.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-medium.png" width="220"{% ELSE %}src="{goods.IMAGE_SMALL}"{% ENDIF %} alt="{goods.NAME}" /></a>
</div> 

далее изменим на:
<div class="imagem tooltip_select">
   <div class="tooltip">{goods.DESCRIPTION_SHORT}</div>
   <a href="{goods.URL}"><img {% IF goods.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-medium.png" width="220"{% ELSE %}src="{goods.IMAGE_SMALL}"{% ENDIF %} alt="{goods.NAME}" /></a>
</div>

СПАСИБО ВАМ ОГРОМНОЕ :rolleyes: !!!!!
Супер идея.
Вот эти шаги вот только не получаются, это если прописывать через CSS((.
А если не делать через CSS? Тогда шрифт выставить свой для данного tooltip нереально?

#12 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 23 788 сообщений

Отправлено 03 Июль 2012 - 00:10

Не совсем вас понимаю, пожалуйста, объясните по подробнее.

#13 Flor@@

Flor@@

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 959 сообщений

Отправлено 03 Июль 2012 - 10:07

 otdyh-i-son.ru (30 Июнь 2012 - 03:58) писал:

СПАСИБО ВАМ ОГРОМНОЕ :rolleyes: !!!!!
Супер идея.
Вот эти шаги вот только не получаются, это если прописывать через CSS((.
А если не делать через CSS? Тогда шрифт выставить свой для данного tooltip нереально?
ну вот прописала я возможность отображения краткого описания товара при наведении на него мышкой в списке товаров, а шрифт там получился маленький, а прописать по вышеуказанным шагам другой шрифт через CSS у меня не получается.

#14 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 23 788 сообщений

Отправлено 03 Июль 2012 - 22:45

Вам необходимо задать шрифт в классе

div.tooltip {
  position:absolute;
  display:none;
  padding:5px;
  bottom:80px;
  border:1px solid #D6D6D6;
  width:400px;
  z-index:999;
  background:#fff;
  left:80px;
}

т.е если это размер - получиться

div.tooltip {
  position:absolute;
  display:none;
  padding:5px;
  bottom:80px;
  border:1px solid #D6D6D6;
  width:400px;
  z-index:999;
  background:#fff;
  left:80px;
  font-size: 12px;
}


#15 Flor@@

Flor@@

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 959 сообщений

Отправлено 04 Июль 2012 - 01:30

В iNTERNET EXPLORER не работает краткое описание - не появляетс при наедении мышкой.

#16 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 23 788 сообщений

Отправлено 04 Июль 2012 - 22:59

Попробуйте использовать следующий тип подсказок http://forum.storela...dpost__p__21425

#17 Flor@@

Flor@@

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 959 сообщений

Отправлено 05 Июль 2012 - 08:53

то есть это нормально что эти tooltips в IE не работают? А в каких они тогда еще получается не работают??

А второй вариант работает во всех браузерах?

я просто уточняю для того чтобы выбрать нужный тип подсказок.

#18 Flor@@

Flor@@

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 959 сообщений

Отправлено 06 Июль 2012 - 02:39

в файл стилей main.css добавила:

div.tooltip {
  position:absolute;
  display:none;
  padding:5px;
  bottom:80px;
  border:1px solid #D6D6D6;
  width:400px;
  z-index:999;
  background:#fff;
  left:80px;
}

.tooltip_select {
 position:relative;
}

.tooltip_select:hover div.tooltip {
  display:block;
}

<div class="imagem">
   <a href="{goods.URL}"><img {% IF goods.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-medium.png" width="220"{% ELSE %}src="{goods.IMAGE_SMALL}"{% ENDIF %} alt="{goods.NAME}" /></a>
</div> 

заменила на:

<div class="imagem tooltip_select">
   <div class="tooltip">{goods.DESCRIPTION_SHORT}</div>
   <a href="{goods.URL}"><img {% IF goods.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-medium.png" width="220"{% ELSE %}src="{goods.IMAGE_SMALL}"{% ENDIF %} alt="{goods.NAME}" /></a>
</div>
подсказки в IE так и не отображаются.

#19 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 23 788 сообщений

Отправлено 06 Июль 2012 - 15:06

Цитата

то есть это нормально что эти tooltips в IE не работают? А в каких они тогда еще получается не работают??

А второй вариант работает во всех браузерах?

я просто уточняю для того чтобы выбрать нужный тип подсказок.

Иногда бывает проще пойти по другому пути чем заставить IE корректно отображать задуманное.
Вторая реализация боле менее обкатана и отображается в всех браузерах включая IE

Что касается вашей ошибки - то у вас не задан стиль position:relative; для класса goodsListItemBlock или блока

<div class="goodsListItemBlock withBorder cornerAll" style="position:relative;">

Пожалуйста, прочтите внимательнее тему целиком.

#20 Flor@@

Flor@@

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 959 сообщений

Отправлено 06 Июль 2012 - 16:49

 Vaccina (06 Июль 2012 - 15:06) писал:

Иногда бывает проще пойти по другому пути чем заставить IE корректно отображать задуманное.
Вторая реализация боле менее обкатана и отображается в всех браузерах включая IE

Что касается вашей ошибки - то у вас не задан стиль position:relative; для класса goodsListItemBlock или блока

<div class="goodsListItemBlock withBorder cornerAll" style="position:relative;">

Пожалуйста, прочтите внимательнее тему целиком.

прочитала еще несколько раз, но до сих пор не понимаю как конкретно задать стиль position:relative




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных