這篇文章主要為大家展示了“如何實(shí)現(xiàn)IONIC購物車功能”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何實(shí)現(xiàn)IONIC購物車功能”這篇文章吧。

站在用戶的角度思考問題，與客戶深入溝通，找到卓資網(wǎng)站設(shè)計(jì)與卓資網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都做網(wǎng)站、網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名申請(qǐng)、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋卓資地區(qū)。

具體內(nèi)容如下

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="/upload/otherpic58/78237.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
 });
});

以上是“如何實(shí)現(xiàn)IONIC購物車功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站標(biāo)題：如何實(shí)現(xiàn)IONIC購物車功能
當(dāng)前網(wǎng)址：http://www.chinadenli.net/article48/jogsep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、小程序開發(fā)、ChatGPT、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)