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

Сегодняшняя статья о том, как в 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-->