简单实现IONIC购物车功能


Posted in Javascript onJanuary 10, 2017

本文实例为大家分享了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
 });
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
input、button的不同type值在ajax提交表单时导致的陷阱
Feb 24 Javascript
JS 密码强度验证(兼容IE,火狐,谷歌)
Mar 15 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
Aug 14 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
May 06 Javascript
Jquery AJAX POST与GET之间的区别
Nov 14 Javascript
查找页面中所有类为test的结点的方法
Mar 28 Javascript
jquery实现的Accordion折叠面板效果代码
Sep 02 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
May 19 Javascript
JS对大量数据进行多重过滤的方法
Nov 04 Javascript
JS实现数组按升序及降序排列的方法
Apr 26 Javascript
mocha的时序规则讲解
Feb 16 Javascript
Vue全局loading及错误提示的思路与实现
Aug 09 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
Jan 10 #Javascript
原生js实现水平方向无缝滚动
Jan 10 #Javascript
vue组件实例解析
Jan 10 #Javascript
bootstrap table分页模板和获取表中的ID方法
Jan 10 #Javascript
React实现点击删除列表中对应项
Jan 10 #Javascript
微信小程序 radio单选框组件详解及实例代码
Jan 10 #Javascript
微信小程序 slider 详解及实例代码
Jan 10 #Javascript
You might like
在线增减.htpasswd内的用户
2006/10/09 PHP
PHP 数据结构 算法描述 冒泡排序 bubble sort
2011/07/10 PHP
PHP学习笔记之字符串编码的转换和判断
2014/05/22 PHP
php对关联数组循环遍历的实现方法
2015/03/13 PHP
Linux(CentOS)下PHP扩展PDO编译安装的方法
2016/04/07 PHP
Jquery颜色选择器ColorPicker实现代码
2012/11/14 Javascript
用jquery统计子菜单的条数示例代码
2013/10/18 Javascript
跟我学Nodejs(一)--- Node.js简介及安装开发环境
2014/05/20 NodeJs
微信小程序 wx.uploadFile无法上传解决办法
2016/12/14 Javascript
基于AGS JS开发自定义贴图图层
2017/03/31 Javascript
利用JavaScript的%做隔行换色的实例
2017/11/25 Javascript
vue devtools的安装与使用教程
2018/08/08 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
2020/07/22 Javascript
Python爬取APP下载链接的实现方法
2016/09/30 Python
Python实现运行其他程序的四种方式实例分析
2017/08/17 Python
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
TensorFlow实现Logistic回归
2018/09/07 Python
想学python 这5本书籍你必看!
2018/12/11 Python
python飞机大战pygame游戏框架搭建操作详解
2019/12/17 Python
python使用bs4爬取boss直聘静态页面
2020/10/10 Python
Python eval函数原理及用法解析
2020/11/14 Python
酒店管理专业学生求职信
2013/09/27 职场文书
幼儿园秋游活动方案
2014/01/21 职场文书
有多年工作经验的自我评价
2014/03/02 职场文书
企业家王石演讲稿:坚持与放下
2014/04/27 职场文书
保护黄河倡议书
2014/05/16 职场文书
《中国梦我的梦》中学生演讲稿
2014/08/20 职场文书
计算机科学与技术专业求职信
2014/09/03 职场文书
毕业横幅标语
2014/10/08 职场文书
2015年世界卫生日活动总结
2015/02/09 职场文书
行政处罚告知书
2015/07/01 职场文书
2019年家电促销广告语集锦
2019/10/21 职场文书
Nginx进程管理和重载原理详解
2021/04/22 Servers
SQL优化老出错,那是你没弄明白MySQL解释计划用法
2021/11/27 MySQL
python程序的组织结构详解
2021/12/06 Python
uniapp开发打包多端应用完整方法指南
2022/12/24 Javascript