JSを使ってショッピングカート機能を実装する手順を詳しく解説

今回はJSを使ってショッピングカート機能を実装する手順について詳しく解説していきます。 JSを使ってショッピングカート機能を実装する際の注意点について、実際の事例を見てみましょう。

私たちは皆、電子商取引で商品を購入するとき、気に入った商品をショッピングカートに追加して最終的に決済する機能をよく知っているはずです。ショッピング カート機能を使用すると、消費者は商品の追加、削除、ショッピング カート内の 1 つまたは複数の商品の選択を行うことができ、最終的な商品の合計価格も消費者の操作に応じて変化します。

さて、作者は実際のショッピング カートのほとんどの機能を実現できるショッピング カートの簡単な実装を作成しました。この例では、JavaScript の BOM 操作、DOM 操作、テーブル操作、Cookie、JSON およびその他のナレッジ ポイントが同時に使用され、JavaScript の強力で包括的なアプリケーションを備えた 3 層アーキテクチャがショッピング カートの設計に使用されます。 JavaScript の初心者に適しています。上達すると一定のメリットがあります。

ホームページのレンダリングをご覧ください:

読者がホームページのレンダリングを理解したところで、読者の参考のためにここにホームページの HTML コードを添付します。読者にコードを書くことをお勧めします。自分たちの考えに従って。

HTML コードを見てください:

nbsp;html>

 
 <meta>
 <title>商品列表页面</title>
 <!--商品列表样式表-->
 <link>
 <!--cookie操作的js库-->
 <script></script>
 
 
 <p>
  </p><h1 id="商品列表">商品列表</h1>
  <p>
  <a>我的购物车</a><i>0</i>
  </p>
  <p>
  </p>

   

       

   

智能手表

   

酷黑，棒，棒，棒，棒

   

￥998

   

   添加购物车    

  

  

   

       

   

智能手机001

   

金红色，酷酷酷酷

   

￥1998

   

   添加购物车    

  

  

   

       

   

华为手机002

   

帅帅帅帅帅帅帅帅帅帅

   

￥998

   

   添加购物车    

  

  

   

       

   

华为手机003

   

杠杠的

   

￥2000

   

   添加购物车    

  

        <script></script>    <script></script>  

HTML 構造コードが利用可能になったら、ホームページで CSS パフォーマンス設計を実行できます。ここでは CSS についてはあまり説明しません。

ホームページをデザインした後、ボタンのクリック イベント、Cookie および JSON アプリケーションの追加など、ホームページに関連する DOM 操作を実行できます。Cookie は主に、操作を容易にするために現在のデータをショッピング カートと共有するために使用されます。関連する JavaScript コードをご覧ください:

これは、主にホームページ上での関連操作に関連する、index.js コードです:

/*
 思路：
 第一步：获取所要操作的节点对象
 第二步：当页面加载完后，需要计算本地cookie存了多少【个】商品，把个数赋值给ccount
 第三步：为每一个商品对应的添加购物车按钮绑定一个点击事件onclick
  更改本地的cookie
  获取当前商品的pid
  循环遍历本地的cookie转换后的数组，取出每一个对象的pid进行对比，若相等则该商品不是第一次添加
  从购物车中取出该商品，然后更pCount值追加1
  否则：创建一个新的对象，保存到购物中。同时该商品的数量为1
 */
var ccount = document.getElementById("ccount"); //显示商品总数量的标签节点对象
var btns = document.querySelectorAll(".list dl dd button"); //所有的购物车按钮
//约定好用名称为datas的cookie来存放购物车里的数据信息 datas里所存放的就是一个json字符串
var listStr = cookieObj.get("datas");
/*判断一下本地是否有一个购物车（datas），没有的话，创建一个空的购物车，有的话就直接拿来使用*/
if(!listStr) { //没有购物车 datas json
 cookieObj.set({
 name: "datas",
 value: "[]"
 });
 listStr = cookieObj.get("datas");
}
var listObj = JSON.parse(listStr); //数组
/*循环遍历数组，获取每一个对象中的pCount值相加总和*/
var totalCount = 0; //默认为0
for(var i = 0, len = listObj.length; i <p style="text-align: left;">これは、シングルトンを使用した、主に Cookie の設定と取得操作に関連する cookie.js コードです <a href="http://www.php.cn/course/58.html" target="_blank">デザイン パターン </a>カプセル化デザイン、コードを参照してください: </p><pre class="brush:php;toolbar:false">/*
 单例设计模式
 完整形式：[]中是可选项
 document.cookie = “name=value[;expires=date][;path=path-to-resource][;domain=域名][;secure]”
*/
var cookieObj = {
 /*
 增加或修改cookie
 参数：o 对象{}
 name:string cookie名
 value:string cookie值
 expires:Date对象 过期时间
 path:string 路径限制
 domain:string 域名限制
 secure:boolean true https false或undeinfed 
 */
 set: function(o) {
 var cookieStr = encodeURIComponent(o.name) + "=" + encodeURIComponent(o.value);
 if(o.expires) {
  cookieStr += ";expires=" + o.expires;
 }
 if(o.path) {
  cookieStr += ";path=" + o.path;
 }
 if(o.domain) {
  cookieStr += ";domain=" + o.domain;
 }
 if(o.secure) {
  cookieStr += ";secure";
 }
 document.cookie = cookieStr;
 },
 /*
 删除
 参数：n string cookie的名字
 */
 del: function(n) {
 var date = new Date();
 date.setHours(-1);
 //this代表的是当前函数的对象
 this.set({
  name: n,
  expires: date
 });
 },
 /*查找*/
 get: function(n) {
 n = encodeURIComponent(n);
 var cooikeTotal = document.cookie;
 var cookies = cooikeTotal.split("; ");
 for(var i = 0, len = cookies.length; i <p style="text-align: left;"> 以下は、主に商品番号統計、ローカル データの更新と取得など、ショッピング カート内のさまざまな操作をカプセル化して容易にするための server.js コードです。コード管理: コードを見てください: </p><pre class="brush:php;toolbar:false">/*
 功能：查看本地数据中是否含有指定的对象（商品），根据id
 参数：id：商品的标识
 */
function checkObjByPid(id) {
 var jsonStr = cookieObj.get("datas");
 var jsonObj = JSON.parse(jsonStr);
 var isExist = false;
 for(var i = 0, len = jsonObj.length; i <p style="text-align: left;"> 上記のコードはショッピング カートに入った後にいくつかの操作を含むため、読者は読んだ後に混乱するかもしれません。心配しないで、クリックしてショッピング カートに入った後、分析を見てください。 。 </p><p style="text-align: left;">レンダリングをご覧ください: </p><p style="text-align: left;"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/8bff5f68d03d360912871c55ab58e1a3-1.png?x-oss-process=image/resize,p_40" class="lazy" id="theimg" alt=""></p><p   style="max-width:90%">著者がホームページ上で 3 つの製品を合計 7 回クリックすると、対応する製品と価格計算がショッピング カートに表示されました。読者の皆さんは、途中のあらゆる情報を一目で理解できると思います。このショッピング カートの HTML コードを見てください: </p><pre class="brush:php;toolbar:false">nbsp;html>

 
 <meta>
 <title>购物车</title>
 <!--购物车样式表-->
 <link>
 <!--操作cookie的js文件-->
 <script></script>
 
 
 <p>
  </p><h1 id="购物车">购物车</h1>
  <h3 id="a-返回商品列表页面-a"><a>返回商品列表页面</a></h3>
  

                                                      

全选	图片	描述	数量	单价	小计	操作

  

购物车里没有任何商品

  

总价格：￥0

   <script></script>    <script></script>  

ショッピング カートの関連するパフォーマンスを設計した後、JavaScript の動作を設計することに加えて、このページに関連する cart.js コードを見てください:

/*
 思路：
 第一步：当页面加载完后，根据本地的数据，动态生成表格（购物车列表）
  获取所要操作的节点对象
  判断购物车中是否有数据？
  有：
   显示出购物列表
  没有：
   提示购物车为空
 第二步：当购物车列表动态生成后，获取tbody里所有 的checkeBox标签节点对象，看那个被选中就获取对应行小计进行总价格运算。
 第三步：
  为每一个checkbox添加一个onchange事件，根据操作更改总价格
 第四步：全选
 第五步：
  为加减按钮添加一个鼠标点击事件
  更改该商品的数量
 第六步：删除
  获取所有的删除按钮
  为删除按钮添加一个鼠标点击事件
  删除当前行，并更新本地数据
 */
var listObj = getAllData();
var table = document.getElementById("table")
var box = document.getElementById("box")
var tbody = document.getElementById("tbody");
var totalPrice = document.getElementById("totalPrice");
var allCheck = document.getElementById("allCheck");
if(listObj.length == 0) { //购物车为空
 box.className = "box";
 table.className = "hide";
} else {
 box.className = "box hide";
 table.className = "";
 for(var i = 0, len = listObj.length; i ' +
  '<input>' +
  '' +
  '<td>' +
  '<img  src="/static/imghwm/default1.png" data-src="' + listObj[i].pImg + '" class="lazy" alt="JSを使ってショッピングカート機能を実装する手順を詳しく解説" >' +
  '</td>' +
  '<td>' +
  listObj[i].pDesc +
  '</td>' +
  '<td>' +
  '<button>-</button><input><button>+</button>' +
  '</td>' +
  '<td>' +
  '￥<span>' + listObj[i].price + '</span>' +
  '</td>' +
  '<td>' +
  '￥<span>' + listObj[i].price * listObj[i].pCount + '</span>' +
  '</td>' +
  '<td>' +
  '<button>删除</button>' +
  '</td>';
 tbody.appendChild(tr);
 }
}
/*
 功能：计算总价格
 */
var cks = document.querySelectorAll("tbody .ck");
function getTotalPrice() {
 cks = document.querySelectorAll("tbody .ck");
 var sum = 0;
 for(var i = 0, len = cks.length; i <p style="text-align: left;">上記コードによりショッピングが完了します。価格計算、商品数量の交換、<a href="http://www.php.cn/code/6807.html" target="_blank">商品削除</a>などの車内での関連操作。 </p><p style="text-align: left;">この時点で、html、css、BOM、DOM、json、cookie などを包括的に適用して、ショッピング カートのほとんどの機能が完成しました。この例を理解すると、読者は間違いなく JavaScript についてさらに詳しくなると思います。関連するコードの大部分はこのページに掲載されていますが、一部のコード リソースは読者には表示されません。読者は以下のリソース リンクをクリックして、この例のすべてのコードと画像マテリアルをダウンロードできます。この例は、HBuilder コンパイラを使用してコンパイルおよび実行され、Cookie 操作が含まれます。読者はサーバーを自分でインストールするか、実行および表示するために HBuilder に追加するように求められます。 </p><p style="text-align: left;">リソースリンク: ショッピングカート内のすべてのリソースをダウンロードします</p><p>この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 </p><p>推奨読書: </p><p style="text-align: left;"><a href="http://www.php.cn/php-weizijiaocheng-396091.html" target="_blank">phpカールバッチ制御同時非同期操作</a><br></p><p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-396088.html" target="_blank">PHPは配列重複排除メソッドを迅速に実装します</a><br></p>

以上がJSを使ってショッピングカート機能を実装する手順を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。