如何实现IONIC购物车功能-泸州大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

如何实现IONIC购物车功能

这篇文章主要为大家展示了“如何实现IONIC购物车功能”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何实现IONIC购物车功能”这篇文章吧。

站在用户的角度思考问题，与客户深入沟通，找到卓资网站设计与卓资网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都做网站、网站制作、成都外贸网站建设、企业官网、英文网站、手机端网站、网站推广、域名申请、网络空间、企业邮箱。业务覆盖卓资地区。

具体内容如下

HTML


 
 
 
  {{ calculateTotalProducts() }}

total {{ calculateTotalPrice() | currency }}

tu carrito está vacío

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

/** * 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 }); });

新闻中心

其他资讯