Сегодняшняя статья о том, как в CMS 1С-Битрикс сделать, так чтобы при нажатии на кнопку добавить в корзину товар(картинка товара) летел в корзину.
Скрипт для полета товара в корзину будет выполняться по нажатию на кнопку «В корзину».
Подготовительные действия:
- В кнопке «В корзину» напишем атрибут el с id товара.
<a href="<?echo $arElement["ADD_URL"]?>" rel="nofollow" el="<?=$arElement['ID']?>">В корзину
- на картинке товара в атрибут id запишем строку 'img' + id товара
<img src="<?=$arElement["PREVIEW_PICTURE"]["SRC"]?>" width="200" title="<?=$arResult[NAME]?>" alt="<?=$arResult[NAME]?>" id="img<=$arElement['ID'];?>">
Алгоритм:
- По нажатию на кнопку «В корзину», находит id товара из атрибута el у кнопки/ссылки.
id = $(this).attr("el");
- Создаём переменную tmp где будет храниться id картинки, к которой мы можем напрямую обращаться к картинке товара.
tmp="#img"+id;
- Сделаем копию картинки, т.к. мы не хотим лишиться нашей картинки. И отправлять в полет к корзине будем клона. Так же задаём начальное положение клона, позиционирование и настроем чтобы слой был поверх других.
$(tmp) .clone() .css({'position' : 'absolute', 'z-index' : '11100', top: $(this).offset().top-50, left:$(this).offset().left-200})
- Добавляем в блок body.
.appendTo("body")
- Задаём параметры анимации, то есть: прозрачность, конечная точка полета товара, время полета.
.animate({opacity: 0.5, left: $("#popup_basket").offset()['left'], top: $("#popup_basket").offset()['top'], width: 20}, 1000, function() { $(this).remove(); });
- Удаление клона по прилету в корзину.
$(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-->
Добавить комментарий