ionic-fly-cart

Ionic Fly Cart is an IONIC framework animated plugin based on SASS for fly cart effect.

Features

• Fly the product image to cart container after add to cart.
• Dynamic position for cart container.
• Manage the click events of cart container.

Usage

Download the files .

If you haven’t set up sass the set it using ionic setup sass .

Include speed-dial.scss in your ionic.app.scss: @import "where-you-put-folder/ionic-fly-cart/css/fly";

Include fly.js in your index.html: <script type="text/javascript" src="where-you-put-folder/ionic-fly-cart/js/fly.js"></script>

Add the module ionic-fly-cart to your application dependencies in your app.js:

angular.module('starter', ['ionic', 'ionic-speed-dial'])

And you're ready to go.

Directives

There are two directives which are used in this template .

add-to-cart-fly-btn

E.g. Add to cart By clicking on this you can fly the image element of its parent .

add-to-cart-fly-container

The cart container to which the image will fly . E.g.

<add-to-cart-fly-container top="" right="" funhandler="cartClick();"></add-to-cart-fly-container>

You can dynamically set the position by passing top and right value of directive. Also you can handle the container click event in your controller by defining cartClick Function. Example of template object and event handler of cart in controller :

```

$scope.products = [ { title: 'Samsung G5', id: 1, price:100, img:"img/products/1.jpg"}, { title: 'Dell Series', id: 2, price:200, img:"img/products/2.jpg"}, { title: 'Kelvinator', id: 3, price:300, img:"img/products/3.jpg"}, { title: 'Whirlpool', id: 4, price:400, img:"img/products/4.jpg"}, { title: 'HP Pavilion', id: 5, price:500, img:"img/products/5.jpg"}, { title: 'Accer 100', id: 6, price:600, img:"img/products/6.jpg"}, { title: 'LG 1115', id: 7, price:700, img:"img/products/7.jpg"} ]; $scope.cartClick=function(){ console.log("Cart Click Event") ;
}

```

Test Before You Buy :

You can test the app using Ionic View (ID: 36264cba). Questions?

You may report us at Github

Feel Free To Contact Us at [email protected]