简单实现IONIC购物车功能

本文实例为大家分享了IONIC购物车的具体代码，供大家参考，具体内容如下

HTML

 
 

 

  
{{ calculateTotalProducts() }}
  

  

   

   

    
{{ item.product.name }}
    

    
    
    
    
{{ item.quantity * item.product.price | currency }}
    

    
    
   
   
 
   
total {{ calculateTotalPrice() | currency }}
  
  
tu carrito está vacío
  
 
 
 
 

 

  
{{ product.name }}
  
{{ product.price | currency }}
 
 
 

CSS:

body
 color #333
 padding 60px 10px 10px 10px
 font-family Arial, Helvetica, sans-serif
 user-select none

.is-red
 color red !important

.l-header
 display flex
 justify-content flex-end
 align-items center
 position fixed
 top 0
 right 0
 left 0
 height 30px
 padding 10px
 background-color #2c3e50

.l-cart
 position relative

.l-cart-count
 font-size 12px
 font-weight 700
 width 30px
 line-height 30px
 text-align center
 color #ecf0f1
 background-color #27ae60
 border-radius 50%
 cursor pointer

.l-cart-items
 position absolute
 top 100%
 right 0
 width 270px
 margin 10px -10px 0 0
 padding 10px
 font-size 12px
 background-color #ecf0f1
 
 &:before
 content ""
 position absolute
 bottom 100%
 right 15px
 margin 0 0 -2px 0
 border 10px solid transparent
 border-bottom-color #ecf0f1
 
 li
 display flex
 align-items center
 padding-bottom 10px
 margin-bottom 10px

.l-cart-item-name
 flex 1
 overflow hidden
 white-space nowrap
 text-overflow ellipsis

.l-cart-item-quantity
 width 30px
 margin 0 10px
 
 input
 display block
 border none
 padding 5px
 margin 0
 width 100%
 text-align right
 appearance none
 
 &:focus
  outline none
  background-color #ffc
 
 &::-webkit-outer-spin-button,
 &::-webkit-inner-spin-button
  -webkit-appearance none
  margin 0

.l-cart-item-subtotal
 color #000
 width 70px
 text-align right
 
.remove-item img
 width:30px
 height:30px
 margin 0 10px
 text-align center

.l-cart-total
 margin-top 10
 padding-top 10px
 text-align right
 border-top 1px solid #bdc3c7
 
 b
 font-weight 700
 font-size 1.4em

.l-cart-empty
 text-align center
 font-size 1.4em
 color #95a5a6

.l-stock
 
 & > li
 float left
 margin 0 10px 10px 0
 
 &:after
 content ""
 clear both

.l-product
 display flex
 color #fff
 cursor pointer
 
 & > div
 padding 10px

.l-product-name
 background-color #2980b9

.l-product-price
 background-color #3498db
 
.is-on-cart

 .l-product-name
 background-color #27ae60

 .l-product-price
 background-color #2ecc71

JS

/**
* Esta función genera productos aleatoriamente
* (http://marak.com/faker.js/)
**/
function fetchStock () {
 
 var i = 0,
 stock = [],
 total = faker.random.number({min: 10, max: 30});
 
 for (i = 0; i < total; i++) {
 
 stock.push({
  name : faker.commerce.productName(),
  price: faker.random.number({min: 1, max: 500})
 });
 }
 
 return stock;
};

/**
* Aquí empieza nuestro código Angular...
**/

var app = angular.module('app', []);

app.run(function ($rootScope) {

 var cart = [],
 stock = fetchStock();
 
 var addToCart = function (product) {
 
 var item = cart.find(function (item) {
  
  return item.product === product;
 });
 
 if (item) {
  
  item.quantity++;
  
 } else {
  
  cart.push({
  product : product,
  quantity: 1
  });
 }
 };
 
 var removeFromCart = function (item) {
 
 var index = cart.indexOf(item);
 
 cart.splice(index, 1);
 };
 
 var removeIfZero = function (item) {
 
 if (item.quantity < 1) {
 
 removeFromCart(item);
 }
 };
 
 var calculateTotalPrice = function () {
 
 return cart.reduce(function (sum, item) {
 
 return sum + item.quantity * item.product.price;
 
 }, 0);
 };
 
 var calculateTotalProducts = function () {
 
 return cart.reduce(function (sum, item) {
 
  return sum + item.quantity;

 }, 0);
 };
 
 var isProductOnCart = function (product) {
 
 return cart.some(function (item) {
  
  return item.product === product;
 });
 };
 
 angular.extend($rootScope, {
 stock: stock,
 cart: cart,
 addToCart: addToCart,
 removeFromCart: removeFromCart,
 removeIfZero: removeIfZero,
 calculateTotalPrice: calculateTotalPrice,
 calculateTotalProducts: calculateTotalProducts,
 isProductOnCart: isProductOnCart
 });
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。