Загрузка страницы..
Полет товара в корзину
1С-Битрикс + jQuery = полет товара в корзину
Полет товара в корзину
2015-03-16T11:03 16 мар 2015 11:03
Просмотров: 6241

Полет товара в корзину

Сегодняшняя статья о том, как в CMS 1С-Битрикс сделать, так чтобы при нажатии на кнопку добавить в корзину товар(картинка товара) летел в корзину.

Скрипт для полета товара в корзину будет выполняться по нажатию на кнопку «В корзину».

Подготовительные действия:

  1. В кнопке «В корзину» напишем атрибут el с id товара.
    <a href="<?echo $arElement["ADD_URL"]?>" rel="nofollow" el="<?=$arElement['ID']?>">В корзину
    
  2. на картинке товара в атрибут id запишем строку 'img' + id товара
    <img src="<?=$arElement["PREVIEW_PICTURE"]["SRC"]?>" width="200" title="<?=$arResult[NAME]?>" alt="<?=$arResult[NAME]?>" id="img<=$arElement['ID'];?>">
    

Алгоритм:

  1. По нажатию на кнопку «В корзину», находит id товара из атрибута el у кнопки/ссылки.
    id = $(this).attr("el");
  2. Создаём переменную tmp где будет храниться id картинки, к которой мы можем напрямую обращаться к картинке товара.
    tmp="#img"+id;
  3. Сделаем копию картинки, т.к. мы не хотим лишиться нашей картинки. И отправлять в полет к корзине будем клона. Так же задаём начальное положение клона, позиционирование и настроем чтобы слой был поверх других.
    $(tmp)
    	.clone()
    	.css({'position' : 'absolute', 'z-index' : '11100', top: $(this).offset().top-50, left:$(this).offset().left-200})
  4. Добавляем в блок body.
    .appendTo("body")
  5. Задаём параметры анимации, то есть: прозрачность, конечная точка полета товара, время полета.
    .animate({opacity: 0.5,
    left: $("#popup_basket").offset()['left'],
    top: $("#popup_basket").offset()['top'],
    width: 20}, 1000, function() {
    $(this).remove();
    });
  6. Удаление клона по прилету в корзину.
    $(this).remove();

В итоге получается такой код:

<!-- ADD2BASKET-->
<script type="text/javascript">
	$(document).ready(
		function(){
			buy_btns = $('a[href*="ADD2BASKET"]');
			buy_btns.each(
				function(){
					$(this).attr("rel", $(this).attr("href"));
				}
			);
			buy_btns.attr("href","javascript:void(0);");
			function getBasketHTML(html)
			{
				txt = html.split('
'); txt = txt[1]; txt = txt.split('
'); txt = txt[0]; return txt; } $('a[rel*="ADD2BASKET"]').click( function(){ /*Полёт в корзину*/ id = $(this).attr("el"); tmp="#img"+id; $(tmp) .clone() .css({'position' : 'absolute', 'z-index' : '11100', top: $(this).offset().top-50, left:$(this).offset().left-200}) .appendTo("body") .animate({opacity: 0.3, left: $("#bx_cart_block").offset()['left'], top: $("#bx_cart_block").offset()['top'], width: 20}, 1000, function() { $(this).remove(); }); /*.Полёт в корзину*/ /*GET запрос*/ $.ajax({ type: "GET", url: $(this).attr("rel"), dataType: "html", success: function(out){ $("#bid").html(getBasketHTML(out)); } }); } ); } ); </script> <!--.ADD2BASKET-->



Комментарии: 0

Комментарий пока нет, стань первым!

Добавить комментарий

up
Яндекс.Метрика Яндекс.Метрик