JavaScript
Need help with ionic-shop?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.
JoshSGman

Description

An Ionic Shopping Cart Plugin - NO LONGER SUPPORTED!

198 Stars 47 Forks 53 Commits 3 Opened issues

Services available

Need anything else?

NO LONGER SUPPORTED!!!

ionic-shop

ionic-shop is an open-source shopping cart and checkout library meant to be used with the ionic-framework

It is a library of directives and services that help integrate products with an easy to use shopping cart and checkout process.

The ionic-shop currently offers integration with stripe and will soon offer integration with google wallet and paypal.

Dependencies:

  • ionic framework
  • Stripe.js

Download:

The best way to install ionic-shop is to use bower:

bower install ionic-shop

An alternative is to clone this repo and add it to your dependencies directory

Installation:

Include the

ion-cart.js
or the minified version
ion-cart.min.js
in your dependencies scripts: i.e :


Include the

ion-shop-styles.css
in your dependencies:

i.e :



Additionally, include the Stripe script, it will be used for some field validations:



Next include the module in your angular app:

angular.module('myApp', ['ionic', 'ionicShop'])

Use:

The ionic-shop use:

ion-cart

The ion-cart is a shopping cart directive that should be placed within an ion-content element. In order to use the ion-cart, you must attach a products attribute/isolate scope to the element that is set equal to an array of product objects like so:

 

The product Array should have objects with the following fields:

{
  title: 'product name',
  description: 'product description',
  quantity: integer (number of products added),
  price: integer (per unit price of the product),
  images: (An array of strings containing the path to your image url),
  id: an optional field to give each product a unique id 
}

Additionally, the ion-cart comes with an image-slider modal that pops up when a user clicks/touches the image.

ion-cart-footer

The ion-cart-footer directive should be placed after the ion-content in your application. It replaces the normal ion-footer element. The ion-cart-footer takes a path attribute/isolate scope that is set equal to a state specified in your ui-router like so.

  

 

In the example above, on-click, the application will call $state.go('checkout').

ion-checkout

The ion-checkout directive is a checkout form content with field validations. The default fields are: Credit Card Number, Expiration Date, and CVC number. Validation is performed on all fields automatically on blur. Additionally, as a convenience, the ion-checkout directive displays the total cost of all the items in the ion-cart. The directive can be used like so:

  

The ion-checkout directive comes with a few options:

has-email

The has-e-mail attribute/directive attaches an e-mail field to the ion-checkout. Email field comes with validation.


has-address

The has-address attribute/directive attaches an address field to the ion-checkout. Address fields come with zipcode validation


has-name

The has-name attribute/directive attaches a first and last name field to the ion-checkout.


checkout-footer

*** Currently you must have a Stripe Account to use this feature.

The checkout-footer directive validates checkout field inputs and calls on the StripeService to create a stripe token for the checkout form using the Stripe public key that you set using the StripeService.setStripeKey method and a callback created by settings a function equal to the StripeService.setStripeTokenCallback method like so:

StripeService.setStripeKey(stripeKey);
StripeService.setStripeCallback = function(status, response){
  // Proccess the response
});

Styling

For the time being, all directives in the ionic shop library can be styled using basic css on the following classes and their elements.

Styles for the ionic-cart items

Cart Item

.product-card affects the outer cart item div tag

.product-item affects the inner cart item div tag

.product-image affects the product image thumbnail img tag

.product-title affects the product title h3 tag

.product-description affects the product description p tag

.product-quantity affects the product quantity span

.product-price affects the product price span

.icon-plus-round affects the + sign icon

.icon-minus-round affects the - sign icon

Cart Image Modal

.image-slider-modal affects the image slider modal div

.image-slider-box affects the image slider box div

.image-slide-div affects the div encompassing the product description and img

.image-slide-description affects the image description h3 tag

.image-slide affects the actual image

Checkout Form

.checkout-form-description affects the description span at the top of the form

.checkout-form affects the actual checkout form div

.checkout-total affects the total span at the bottom of the checkout form

Inputs

All the following classes affect their respective input fields

.address-line-one .address-line-two .card-cvc-input .card-exp-input .card-num-input .city-input .email-input .first-name-input .last-name-input .state-input .zipcode-input

To Do (Not ordered)

  • IonicShop Web Admin Panel to manage product inventory/sales history(In the works);
  • Create additional styling attributes for all directives
  • Integrate with Paypal/Google Wallet
  • Write Tests
  • More Suggestions!

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.