Характеристики товара при наведении мышкой - PrestaShop CMS :: Русская поддержка интернет-магазина PrestaShop

Характеристики товара при наведении мышкой

sunb0y
Новичок
Сообщений: 12
Регистрация: 15-05-2014

# 1

18-03-2020 17:18

Добрый день!

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

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

в poduct-list вывожу так:

{foreach from=$product.features item=feature}
<p>{$feature.name} - {$feature.value}</p>
{/foreach}

Щелкните, и это сообщение будет добавлено в ваш ответ как цитата

Triton63

Профессионал
Сообщений: 886
Откуда: Оренбург
Регистрация: 28-05-2011

# 2

18-03-2020 23:44

Можно так
в product-list.tpl (!!без коментариев)

Код:

<div class="my_block"> 
<div class="my_hover"></div>
<span class="hidden ">
                        {foreach from=$product.features item=feature}
                        <p>{$feature.name} - {$feature.value}</p>
                        {/foreach}
</span> 
</div>

видимый элемент в виде иконки шестеренка

Ну и стили
в конец файла стилей product_list.css

Код:

/* задаем относительное позиционирование контейнеру */
.my_block{position:relative;}
/* Оформление скрытого элемента по умолчанию */
.hidden
{display: none;
position: absolute;
bottom: 130%;
left: 0px;
background-color: #fff;
color: #3aaeda;
padding: 5px;
text-align: center;
-moz-box-shadow: 0 1px 1px rgba(0,0,0,.16);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.16);
box-shadow: 0 1px 1px rgba(0,0,0,.16);
font-size: 12px;}
/* Дополнительное оформление скрытого элемента(необязательно) */
.my_hover + .hidden:before
{content: " ";
position: absolute;
top: 98%;
left: 10%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
height: 0;
width: 0;
border: 7px solid transparent;
border-right: 7px solid #fff;
border-color: #fff transparent transparent transparent;
z-index: 2;}

/* Появление скрытого элемента при наведении */
.my_hover:hover + .hidden{display: block;}
/*оформление элемента запуска*/
.my_hover {font-family: 'FontAwesome';cursor: pointer;color: #9E9E9E;font-size: 26px;text-align: right;position: absolute;right: 0;top: -22px;}

Интернет-магазин ионизатор воздуха ЭкоЮнит: Лампа Чижевского
shop.aeroion.ru
-------------------------------------------------------------------------------

Triton63

Профессионал
Сообщений: 886
Откуда: Оренбург
Регистрация: 28-05-2011

# 3

18-03-2020 23:49

Скрытое содержимое:

Только пользователю с именем sunb0y разрешен просмотр

sunb0y
Новичок
Сообщений: 12
Регистрация: 15-05-2014

# 4

19-03-2020 00:58

Цитата:( Triton63 @ 18-03-2020 19:44 Смотреть сообщение )

Можно так

Спасибо большое за помощь, но на моем шаблоне не работает. Появляется шестеренка сбоку и при наведении мышкой ничего не показывает. может это из-за использования в шаблоне scss?

а вообще можно сделать так, чтобы характеристики просто внизу карточки появлялись, а то не каждый додумается на шестерню навести?)

Triton63

Профессионал
Сообщений: 886
Откуда: Оренбург
Регистрация: 28-05-2011

# 5

19-03-2020 10:43

Цитата:( sunb0y @ 18-03-2020 22:58 Смотреть сообщение )

а вообще можно сделать так, чтобы характеристики просто внизу карточки появлялись, а то не каждый додумается на шестерню навести?)

ну все в твоих руках

так даже проще, возьми и размести код характеристик в коде product-list.tpl
в необходимом месте, где он будет появлятся при наведении на блок товара.
пример посмотри на моем полигоне, первые два товара
А вот получится у тебя так же, я не знаю. Все зависит от шаблона
Чего там разработчик наваял... кто его знает
код характеристик вставил такой

Код:

<div class="clearfix"></div>
<div class="box" style="margin-bottom: 0;">
    {foreach from=$product.features item=feature}
    <p style="text-align: left;line-height: 18px;">{$feature.name} - {$feature.value}</p>
    {/foreach}
</div>

Код такой с учетом выбора вывода товаров в категориях сеткой или списком

Сообщение отредактировал Triton63 (19-03-2020 08:45)