Cómo crear el típico efecto de añadir al carrito utilizando jQuery

Este tutorial te ayudará a mejorar la experiencia de usuario en tu tienda online. Te explico, seguramente habréis comprado algo en un comercio online y habréis visto que, al hacer clic en el botón “Añadir al carrito”, la imagen del producto se desplazaba volando hacia la zona donde el usuario puede contemplar sus productos. Es lo que tecnicamente se suele conocer como efecto fly, o efecto de volar, y en este tutorial te explicaremos cómo ponerlo en práctica en tu proyecto web.

Resumiendo, utilizando este script añadirás un efecto fly no solo al producto que añadas a tu carrito de compra, sino que podrás aprovecharlo para cualquier menester que quieras desarrollar en tu proyecto. ¿Todo listo? Pues vamos a ver cómo realizar este efecto con jQuery.

Javascript

Para ello he creado una función de Javascript llamada flyToElement(). Debes pasarle como primer elemento el elemento que debe “volar”, y en el segundo parámetro, el nombre del parámetro donde el primer parámetro debe “aterrizar”. Aquí tienes el código:

function flyToElement(flyer, flyingTo) {
    var $func = $(this);
    var divider = 3;
    var flyerClone = $(flyer).clone();
    $(flyerClone).css({position: 'absolute', top: $(flyer).offset().top + "px", left: $(flyer).offset().left + "px", opacity: 1, 'z-index': 1000});
    $('body').append($(flyerClone));
    var gotoX = $(flyingTo).offset().left + ($(flyingTo).width() / 2) - ($(flyer).width()/divider)/2;
    var gotoY = $(flyingTo).offset().top + ($(flyingTo).height() / 2) - ($(flyer).height()/divider)/2;
     
    $(flyerClone).animate({
        opacity: 0.4,
        left: gotoX,
        top: gotoY,
        width: $(flyer).width()/divider,
        height: $(flyer).height()/divider
    }, 700,
    function () {
        $(flyingTo).fadeOut('fast', function () {
            $(flyingTo).fadeIn('fast', function () {
                $(flyerClone).fadeOut('fast', function () {
                    $(flyerClone).remove();
                });
            });
        });
    });
}

Puedes poner la función flyToElement() en un js externo (fly.js) e incluirlo antes de escribir el Javascript.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type='text/javascript' src="fly.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('.add-to-cart').on('click',function(){
        //Scroll to top if cart icon is hidden on top
        $('html, body').animate({
            'scrollTop' : $(".cart_anchor").position().top
        });
        //Select item image and pass to the function
        var itemImg = $(this).parent().find('img').eq(0);
        flyToElement($(itemImg), $('.cart_anchor'));
    });
});
</script>

HTML

<a class="cart_anchor"></a>
<ul class="items">
    <li><img src="pro-image1.png" /><a href="javascript:void(0);" class="add-to-cart">Add to cart</a></li>
    <li><img src="pro-image2.png" /><a href="javascript:void(0);" class="add-to-cart">Add to cart</a></li>
    <li><img src="pro-image3.jpg" /><a href="javascript:void(0);" class="add-to-cart">Add to cart</a></li>
    <li><img src="pro-image4.png" /><a href="javascript:void(0);" class="add-to-cart">Add to cart</a></li>
</ul>

CSS

Con este CSS mostraremos el icono del carrito:

.cart_anchor{ 
    float:right; 
    vertical-align:top; 
    background: url('images/cart-icon.png') no-repeat center center / 100% auto;
    width: 50px;
    height: 50px; 
    margin-bottom: 50px;
}

Fuente: codexworld.com