Simple IONIC shopping cart and ionic shopping cart

Simple IONIC shopping cart and ionic shopping cart

This article shares the code of the IONIC shopping cart for your reference. The details are as follows:

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

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.