简单实现IONIC购物车功能
程序员文章站
2022-06-29 22:16:53
本文实例为大家分享了ionic购物车的具体代码,供大家参考,具体内容如下
html
本文实例为大家分享了ionic购物车的具体代码,供大家参考,具体内容如下
html
<div ng-app="app"> <div class="l-header"> <div class="l-cart"> <div class="l-cart-count" ng-click="showcart = !showcart">{{ calculatetotalproducts() }}</div> <div class="l-cart-items" ng-show="showcart"> <div ng-show="cart.length"> <ul> <li ng-repeat="item in cart"> <div class="l-cart-item-name">{{ item.product.name }}</div> <div class="l-cart-item-quantity"> <input type="number" ng-model="item.quantity" ng-change="removeifzero(item)" /> </div> <div class="l-cart-item-subtotal">{{ item.quantity * item.product.price | currency }}</div> <div class="remove-item"> <img src="https://cdn3.iconfinder.com/data/icons/cleaning-icons/512/trash_can-512.png" ng-click="removefromcart(item)"> </div> </li> </ul> <div class="l-cart-total">total <b>{{ calculatetotalprice() | currency }}</b></div> </div> <div class="l-cart-empty" ng-hide="cart.length">tu carrito está vacío</div> </div> </div> </div> <ul class="l-stock"> <li class="l-product" ng-repeat="product in stock" ng-click="addtocart(product)" ng-class="{'is-on-cart': isproductoncart(product)}"> <div class="l-product-name">{{ product.name }}</div> <div class="l-product-price">{{ product.price | currency }}</div> </li> </ul> </div>
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 }); });
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 家庭自制火腿肠的制作方法