ionic-shop - GitLite

KO | EN

gitlite — search

#ai #llm #golang #machine-learning #deep-learning #docker #macos #nodejs #windows #kubernetes #vue #pytorch #ios #mcp

ionic-shop

(★ 189)

An Ionic Shopping Cart Plugin - NO LONGER SUPPORTED!

파일 탐색기

최종 버전 다운로드 (.zip)

- - ion-shop-styles.css
  - ion-shop-styles.min.css
  - style.css
- - cart-footer.html
  - cart-item.html
  - checkout-footer.html
  - checkout.html
  - gallery-item.html
  - purchase-footer.html
  - purchase.html
- ion-cart.js
- ion-cart.min.js
- - canon.jpg
  - leica.jpeg
  - nikon.jpg
  - polaroid.jpg
- - app.js
- - cart.html
  - checkout.html
  - gallery.html
- .gitignore
- index.html
- README.md
- - app.js
  - directives.js
  - services.js
  - templates.js
- - style.css
- - cart-footer.html
  - cart-item.html
  - checkout-footer.html
  - checkout.html
  - gallery-item.html
  - purchase-footer.html
  - purchase.html
- - directives.spec.js
- karma.conf.js
- test-main.js
.gitignore
bower.json
gulpfile.js
npm-debug.log
package.json
README.md

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

#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 : ```<script src="ion-cart.js"></script>```

Include the ```ion-shop-styles.css```  in your dependencies:

i.e : ```<link href="bower_components/ionic-shop/dist/styles/ion-shop-style.css" rel="stylesheet">```

Additionally, include the Stripe script, it will be used for some field validations:
 ```<script type="text/javascript" src="https://js.stripe.com/v2/"></script>```

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:

```
<ion-content>
 <ion-cart products='productArray'></ion-cart>
</ion-content>
```

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.

```
<ion-header></ion-header>
<ion-content>
  <ion-cart products='productArray'></ion-cart>
</ion-content>
<ion-cart-footer path='checkout'></ion-cart-footer> 
```

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:

```
<ion-content>
  <ion-checkout></ion-checkout>
</ion-content>
```

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.

```
<ion-checkout has-email></ion-checkout>
```

#### has-address

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

```
<ion-checkout has-address></ion-checkout>
```

#### has-name

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

```
<ion-checkout has-name></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!