Помощь Как сделать эффект всплывающих товаров

[Azazello77]

Как в этом магазине

Для просмотра ссылки Войди или Зарегистрируйся
Подскажите, пожалуйста

 

[sunlit]

Как в этом магазине

Для просмотра ссылки Войди или Зарегистрируйся
Подскажите, пожалуйста

Подскажите, у Вас шаблон дефолтный? И какая версия Opencart?
Вкратце, нужно в шапку добавить скрипт (например) wow.js+animate.css
И в шаблоне category.tpl - прописать одну из анимаций при скроле страницы

 

[Azazello77]

нет, шаблон не дефолтный.
сайт shop.coffeehome. info

 

[sunlit]

1. В админке поставьте размер превью картинок побольше (как на доноре) - 350*425 например.
2. Скачайте указанные выше скрипты (animate может быть минифицированный или нет не важно, разница только в подключении будет)
3. Подключите (добавьте) их в шапку сайта - файл /catalog/view/theme/univer/template/common/header.tpl
3.1. предварительно скопируйте wow.js в папку /catalog/view/javascript/
3.2. предварительно скопируйте animate.css в папку /catalog/view/theme/univer/stylesheet/
3.3. в header.tpl после строки:

<link rel="stylesheet" type="text/css" href="catalog/view/theme/univer/stylesheet/stylesheet.css">

поставьте

<link rel="stylesheet" type="text/css" href="catalog/view/theme/univer/stylesheet/animate.min.css">
<script type="text/javascript" src="catalog/view/javascript/wow.js"></script>
<script>new WOW().init();</script>

4. открываете файл /catalog/view/theme/univer/template/product/category.tpl
в нем ищите цикл for в котором выводятся товары (не знаю точно Ваш шаблон для указания строки) - ищите по строке "<div class="item">"
и вот как раз к этому самому классу нужно дописать эффект анимации (их много там разных) примерно так "<div class="item wow zoomInUp">"

 

[sunlit]

Но по мне - нафиг все эти красивости - товар бы с 1с выгружался/ парсился с сайтов без сбоев и оплата бы по человечески принималась - и будет счастье.
И видать в шаблоне "донора" Ajax-ом ещё что-ли товар подгружается, не понятно. + эффекты будут тормозить загрузку страницы так или иначе, а это не очень хорошо для продвижения.

 

[Azazello77]

Не ожидал такого развернутого ответа, премного благодарен.
скрипт wow.js как раз и отвечает, за то, чтобы товары "всплывали" из пустоты, я правильно понял?

 

[sunlit]

Все верно - скрипт отслеживает скролл и добавляет css анимацию к элементам. Пробуйте внедрить, чем смогу помогу )

 

[Azazello77]

Все верно - скрипт отслеживает скролл и добавляет css анимацию к элементам. Пробуйте внедрить, чем смогу помогу )

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

+ еще момент с увеличением картинки товара в категории при наведении на неё (как на доноре)
это тоже через скрипт какой-то делается, нужно просто его найти, подключить и так же обернуть вывод картинки в tpl файле в див с нужным классом?

 

[sunlit]

К сожалению в Яве не силен (((((( Судя по сайту всё верно сделали.
По второму вопросу - оберните <img .... /> в div блок с классом скажем img-zoom и в stylesheets.css пропишите:

.img-zoom img {
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
}

.img-zoom img:hover{
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
}
.img-zoom {
 overflow:hidden;
 width: тут размер картинки в пикселах как выставлено в админке;
 height: тут размер картинки в пикселах как выставлено в админке;
 }