Эффект добавления в корзину

[Sanyo]

Привет!
  Может кто встречал или натыкался на какие-нибудь эффекты при добавлении в корзину?
  Вот нашел отличный пример http://divine-light.ru/katalog/category/65/aktsii-i-rasprodagi.html
  "Легко" добавляется в корзину, "легко" открывается фотография - отличное решение!

Решенее найдено, архив прилогается.
Спасибо danik.html за файл
Описание по установки взял у loginbox

[NightGuard]

Sanyo, там указанно в какой студии сделан сайт

[danik.html]

Встречал и более того даже сам делал( верней стащил готовый скрипт) эффект полета товара. При  нажатии на кнопку картинка товара улетает в модуль корзины). Если нужно, выложу скрипт и разьяснения.

[dezzor]

Встречал и более того даже сам делал( верней стащил готовый скрипт) эффект полета товара. При  нажатии на кнопку картинка товара улетает в модуль корзины). Если нужно, выложу скрипт и разьяснения.

Выкладывай!

[Sanyo]

Sanyo, там указанно в какой студии сделан сайт

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

Встречал и более того даже сам делал( верней стащил готовый скрипт) эффект полета товара. При  нажатии на кнопку картинка товара улетает в модуль корзины). Если нужно, выложу скрипт и разьяснения.

Да, конечно danik.html , будет очень здорово!
+1

[Sanyo]

Еще встречал на "платном" )) шаблоне другой эффект, но он какй-то "тяжелый" и долгий, но всё же...
http://demo.icetheme.com/it_thestore2/

[NightGuard]

Sanyo, ты адрес студии в поиске по форуму пробовал использовать?

[Sanyo]

NightGuard
Ага, только сейчас посмотрел...
Но все же сабж остаётся открытым...

danik.html обещался что-то показать и пропал (

[danik.html]

Не пропал я)).
Короче, обновляем theme.js на прикрепленный тут.
Нужно подредактировать код minicart.tpl.php, чтобы у дива был id="vmCartModule" (не класс!). У меня получилось так:

Код

<?php defined( '_JEXEC' ) or die( 'Direct Access to '.basename(__FILE__).' is not allowed.' );
preg_match( '/href=(["\'])(.+)\\1/iU',  $show_cart, $link);
$link = $link[0];
?>
 
<div class="cart<?php $empty_cart ? print(' empty') : '' ?>" id="vmCartModule">
 
	<a href="<?php echo JRoute::_($show_cart.'&amp;Itemid=1')?>"><?php echo $VM_LANG->_('PHPSHOP_CART_SHOW'); ?>
	<?php if (!$empty_cart && !$vmMinicart) { ?>
			<strong><?php echo $total_products ?> - <?php echo $total_price ?></strong>
	<?php } ?>
	</a>
 
</div>

далее в зависимости от вашего кода шаблона правим в js эти две строчки:
   currentProductDiv = document.getElementById(productId).parentNode.parentNode;
   currentProductDiv = $(currentProductDiv).getElement(" .image");
document.getElementById(productId)  - это form товара, .parentNode.parentNode - подымаемся по иерархии вверх, тоесть указываем на обертывающий див, который обертывает див, обертывающий form, меняем этот код если у вас другая иерархия, $(currentProductDiv).getElement(" .image") - это див с классом image, содержащий изображение товара, меняем класс на используемый вами
Пример тут: mmhd.ru
зы: если не работает, то дебажим через FireBug

[Sanyo]

Тааак, отлично! Завтра протестирую и отпишусь...
Если кто то будет натягивать, тоже пожалуйста отпишитесь!

[Sanyo]

Поставил девственный март, его корзину, его тестовый товар....
Эффект срабатывает, но корзина "глючит" добавляет только 1 товар
в minicart.tpl.php такого кода как у тебя не обнаружил

minicart.tpl.php у тебя не стандартный?!

[danik.html]

Да, миникарт стандартный мне не вкатывал, я переписал его посвоему.
Насчет глюков - это врядли. у мня все нормульно робит. Дело в том что там просто добавляется эффект полета, а дальше все как обычно, можешь поизучать файл js

[Sanyo]

Разобрался, theme.js слегка нужно добить, с твоего же разрешения выкладываю рабочий!

[danik.html]

да какое может быть разрешение. я сам его сп*здил с какогото сайта ))
А что ты там поправил то? Я чета изменений не увидил..

[Sanyo]

После строчки

Код:

currentProductDiv = document.getElementById(productId).parentNode.parentNode;

Добавлено:

Код:

if (currentProductDiv.getElementsByClassName)
{
currentProductDiv = currentProductDiv.getElementsByClassName('image')[0];
}
else
{
currentProductDiv = $(currentProductDiv).getElement(" .image");
}

Далее строчка

Код:

carts.outerHTML = responseText;

На

Код:

carts.innerHTML = responseText;

[danik.html]

насчет innerHTML или outerHTML - зависит от того, где у тебя находится див с id="vmCartModule" . у меня в minicart.tpl, поэтому он в responseText содержится, так что нужно outerHTML, а если этот див в модуле корзины - тада нужно иннер.

[loginbox]

а можно поподробнее....

далее в зависимости от вашего кода шаблона правим в js эти две строчки:
   currentProductDiv = document.getElementById(productId).parentNode.parentNode;
   currentProductDiv = $(currentProductDiv).getElement(" .image");
document.getElementById(productId)  - это form товара, .parentNode.parentNode - подымаемся по иерархии вверх, тоесть указываем на обертывающий див, который обертывает див, обертывающий form, меняем этот код если у вас другая иерархия, $(currentProductDiv).getElement(" .image") - это див с классом image, содержащий изображение товара, меняем класс на используемый вами

что и где смотреть чтоб подправить

[Sanyo]

а можно поподробнее....что и где смотреть чтоб подправить

Ну danik.html же понятно написал:

далее в зависимости от вашего кода шаблона правим в js (theme.js) эти две строчки

[danik.html]

Смотрим через FireBug на ваш шаблон. JS я привел для такой структуры:

<div class="product"> <!--document.getElementById(productId).parentNode.parentNode-->
    <div class="image"><img ... /></div><!--$(currentProductDiv).getElement(" .image")-->
    <div class="add-to-cart">
        <form ... ><input type="submit" value="В корзину" />...</form> <!--document.getElementById(productId)-->
    </div>
</div>

Тут я четко сопоставил код из шаблона и js, так что непоняток не дожно возникнуть

[loginbox]

Всё разобрался. вы бы хоть для новичков более детально расказали что и как.
напишу как сделал глядишь другие мучаться не будут.
1. меняем файл theme.js ( в www/components/com_virtuemart/themes/default/)
2. открываем модуль который отвечает у вас за корзину: либо mod_virtuemart_cart, либо вы включили корзину в основном модуле mod_virtuemart, либо тот что используете вы...
3. в mod_virtuemart_cart - в файле mod_virtuemart_cart.php находим class="vmCartModule" и меняем на id="vmCartModule"
если у вас стоит mod_virtuemart то в нем в файле mod_virtuemart.php делаем тоже самое.
4. теперь самое главное что не описано выше над чем я долго мучался всилу того что только новичок в этом деле...
надо картинке товара присвоить class
Для этого открываем файл который у вас отвечает за Страницу отображения категории:  например browse_1
этот файл находиться www/components/com_virtuemart/themes/default/templates/browse/
и тут находим  <?php echo ps_product::image_tag( $product_thumb_image
и вот этому полю надо задать class=image тогда всё будет работать.
danik.html и Sanyo ловите плюс
Но есть еще пару вопросов, если в категории большой список товаров, то чем ниже от корзины находиться товар, тем быстрее его скорость перемешения в корзину (где можно задать его скорость?) иногда даже не видно перемешения
 и второй вопрос при проверке в ie 8 картинка при перемешнии в корзину подтормаживает очень сильно не подскажите с чем может быть связано?

[Sanyo]

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

Вообще скорость задается в файле theme.js
20-ой строчкий

Код:

var flyingSpeed = 20;

при проверке в ie 8 картинка при перемешнии в корзину подтормаживает очень сильно не подскажите с чем может быть связано?

У danik.html на сайте быстро происходит добавление в корзину, прям радует. Сейчас я тестирую на локалхосте с 4мя товарам, у меня задержка намного дольше происходит, так и не разобрался в чем дело (

[yrygvay]

4. теперь самое главное что не описано выше над чем я долго мучался всилу того что только новичок в этом деле...
надо картинке товара присвоить class
Для этого открываем файл который у вас отвечает за Страницу отображения категории:  например browse_1
этот файл находиться www/components/com_virtuemart/themes/default/templates/browse/
и тут находим  <?php echo ps_product::image_tag( $product_thumb_image
и вот этому полю надо задать class=image тогда всё будет работать.

А можно узнать как задать этот класс ? что именно прописать в этой строчке

[loginbox]

У меня browse файл самописный там я прописал вышестояший класс.
если расматривать browse_1 то тут для изображения уже задан класс
class="browseProductImage"
вся строка выглядит так <?php echo ps_product::image_tag( $product_thumb_image, 'class="browseProductImage" border="0" title="'.$product_name.'" alt="'.$product_name .'"' )?>
поэтому можно в theme.js слово image заменить на browseProductImage
теперь как это было
if (currentProductDiv.getElementsByClassName)
   {
      currentProductDiv = currentProductDiv.getElementsByClassName('image')[0];
   }
   else
   {
      currentProductDiv = $(currentProductDiv).getElement(" .image");
   }
а стало
-----------------------------------------------------------
if (currentProductDiv.getElementsByClassName)
   {
      currentProductDiv = currentProductDiv.getElementsByClassName('browseProductImage')[0];
   }
   else
   {
      currentProductDiv = $(currentProductDiv).getElement(" .browseProductImage");
   }

[yrygvay]

т.е если поправить скрипт, то не придётся править browse_1?

[loginbox]

да, это даже будет правилом для всех browse файлов в них во всех используется данный класс

[yrygvay]

Странно, изменил всё. и 0 эффекта(


попробую пройти все шаги с начала!!


Не получилось ни при каком виде.

Поменял
в mod_virtuemart_cart - в файле mod_virtuemart_cart.php находим class="vmCartModule" и меняем на id="vmCartModule"

поправил скрипт.
и тишина....))))


Что ещё нужно сделать как думаете?

[loginbox]

файл theme.js  у кого скачен? у Sanyo или danik.html

[yrygvay]

Sanyo

[loginbox]

а делаете на локалке или на хостинге пробуете(дайте ссылку)?
может в настройках VirtueMart не включен AJAX

[yrygvay]

Огромное Спасибо loginbox. Если бы не твою усердие и помощь в 3 утра ни чего бы не вышло.


Но теперь как и наверно все столкнулся с проблемой:
1. Картинка в IE плывёт жутко тормозя.
2. Не обновляется корзина при добавлении товара.

Кто что может подсказать?


ЗЫ
Через час, зайдя из под IE картинки плавно и ровно  плавали, но корзина автоматом всё равно не обновлялась!(

Прикрепил свои версии работающих файлов.
Но что странно, на одном сайте всё ок, а на втором в ие плавают картинки,  а в ФФ не могу открыть корзину!


Эх.. Почему же нет готового решения.

Может все дружно попросим кого-либо за что либо, что бы он допилил эти 2 файла, и будет готовое красивое модификация!