广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >如何实现IONIC购物车功能
  • 617
分享到

如何实现IONIC购物车功能

ionic 2022-10-19 03:10:56 617人浏览 薄情痞子
摘要

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

这篇文章主要为大家展示了“如何实现ioNIC购物车功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何实现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="/file/imgs/upload/202210/19/mvfibez2h2t.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


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;
};



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

以上是“如何实现IONIC购物车功能”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网JavaScript频道!

--结束END--

本文标题: 如何实现IONIC购物车功能

本文链接: https://www.lsjlt.com/news/70858.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 如何实现IONIC购物车功能
    这篇文章主要为大家展示了“如何实现IONIC购物车功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何实现IONIC购物车功能”这篇文章吧。具体内容如下HTM...
    99+
    2022-10-19
    ionic
  • vue如何实现购物车功能
    本篇内容主要讲解“vue如何实现购物车功能”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue如何实现购物车功能”吧!如图,需要有加入购物车的标识思路如下:点击购物车按钮时将商品的id,titl...
    99+
    2023-06-30
  • javaweb实现购物车功能
    本篇文章讲的是如何使用javaweb相关知识模拟购物车功能 (web练手小项目) 使用到的相关知识(部分知识点在文章中简单涉及到):        html  cs  javascript  jsp  servlet   ajax  jQu...
    99+
    2023-10-24
    mybatis java mysql servlet tomcat
  • python实现购物车功能
    本文实例为大家分享了python实现购物车功能的具体代码,供大家参考,具体内容如下 功能要求: 要求用户输入总资产,例如:2000显示商品列表,让用户根据序号选择商品,加入购物车购买...
    99+
    2022-11-13
    python 购物车
  • jquery实现购物车功能
    本文实例为大家分享了jquery实现购物车功能的具体代码,供大家参考,具体内容如下 html ​<!DOCTYPE html> <html> ...
    99+
    2022-11-12
    jquery 购物车
  • python购物车功能实现
    name = "gaowang" pwd = "123.abc" list_he=[]          #定义空列表,后面接收 for i in range(3):     username = input("请输入您的账号:")    ...
    99+
    2023-01-31
    购物车 功能 python
  • 如何用php实现购物车功能
    本篇内容主要讲解“如何用php实现购物车功能”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何用php实现购物车功能”吧!一、购物车功能的基本实现原理购物车是一个存储商品信息的容器,用户通过往购...
    99+
    2023-07-05
  • vue如果实现购物车功能
    本文小编为大家详细介绍“vue如果实现购物车功能”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue如果实现购物车功能”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。 原理分析...
    99+
    2022-10-19
    vue
  • angular和BootStrap3如何实现购物车功能
    这篇文章将为大家详细讲解有关angular和BootStrap3如何实现购物车功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一、页面搭建1、html结构采用BootS...
    99+
    2022-10-19
    angular bootstrap3
  • Android实现简单购物车功能
    本文实例为大家分享了Android实现购物车功能的具体代码,供大家参考,具体内容如下MainActivity布局:<?xml version="1.0" encoding="utf-8"?><LinearL...
    99+
    2023-05-30
    android 购物车 roi
  • vue实现书籍购物车功能
    本文实例为大家分享了vue实现书籍购物车功能的具体代码,供大家参考,具体内容如下 效果图 点击增加、减少购买数量和移除总价格会变化 代码 <!DOCTYPE html&g...
    99+
    2022-11-12
    vue书籍购物车 vue书籍购物 vue购物车
  • vue实现购物车完整功能
    vue实现购物车商品单选、全选及商品数量和总价计算,供大家参考,具体内容如下 效果展示 HTML <template>   <div class="buyCar"...
    99+
    2022-11-13
    vue 购物车
  • Vue2.0怎么实现购物车功能
    这篇文章将为大家详细讲解有关Vue2.0怎么实现购物车功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。简介vue.js是由华人尤雨溪开发的一套MVVM框架。vue.js...
    99+
    2022-10-19
    vue
  • js实现简易购物车功能
    本文实例为大家分享了js实现简易购物车功能的具体代码,供大家参考,具体内容如下 一.整体效果图 (关灯下)  (开灯下) 二.HTML代码 <!DOCTYPE...
    99+
    2022-11-12
    js 购物车
  • Vue.js框架实现购物车功能
    本文实例为大家分享了Vue.js框架实现购物车的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en" xmlns:...
    99+
    2022-11-12
    Vue.js 购物车
  • php购物车功能怎么实现
    要实现PHP购物车功能,您需要遵循以下步骤:1. 创建一个数据库表来存储购物车数据,例如:cart_items。表中应包含以下字段:...
    99+
    2023-05-31
    php购物车 php
  • jquery怎么实现购物车功能
    本篇内容主要讲解“jquery怎么实现购物车功能”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“jquery怎么实现购物车功能”吧!html<!DOCTYPE html>&l...
    99+
    2023-06-20
  • Android怎么实现购物车功能
    要实现购物车功能,你可以按照以下步骤进行操作:1. 创建一个购物车实体类,包含商品的名称、价格、数量等信息。2. 在你的应用程序中创...
    99+
    2023-08-16
    Android
  • 原生js+cookie如何实现购物车功能
    这篇文章主要介绍原生js+cookie如何实现购物车功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体如下:这里使用js+cookie实现简单的购物车功能。首先是简单的HTML结...
    99+
    2022-10-19
    js cookie
  • vue如何实现简单的购物车功能
    这篇文章主要介绍“vue如何实现简单的购物车功能”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue如何实现简单的购物车功能”文章能帮助大家解决问题。1.实现效果:2.涉及到的知识点:toFixed...
    99+
    2023-07-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作