jquery Ele.meショッピングカートの詳細-フロントエンドQ&A-php.cn

オンラインショッピングの人気に伴い、ユーザーに便利で迅速なショッピング体験を提供する Web サイトが増えています。 Ele.me は、オンラインの食品注文プラットフォームとして、ユーザーが食品の注文プロセスを簡単に完了できるように、ショッピングカート機能を継続的に最適化してきました。この記事では、jQuery テクノロジーを使用して Ele.me ショッピングカートの詳細を実現する方法と、いくつかの一般的なショッピングカートインタラクション効果を実現する方法を紹介します。

1. ショッピングカートの詳細の実装

1. データ処理

まず、サーバーにリクエストを送信してショッピングカートのデータを取得する必要があります。 Ele.me のショッピングカートデータは JSON 形式で返されるため、表示できる HTML 構造に処理する必要があります。以下は、ショッピングカート項目の JSON データの例です:

{ "food_id": "123", "name": "招牌炒饭", "price": 15, "num": 2 }

ログイン後にコピー

次のコードを通じて、これを HTML 構造に処理できます:

var shoppingCartData = [ { "food_id": "123", "name": "招牌炒饭", "price": 15, "num": 2 }, // 其他商品... ]; var shoppingCart = $('
'); var totalPrice = 0; shoppingCartData.forEach(function(item) { var foodItem = $('
'); var foodName = $('
').text(item.name); var foodPrice = $('
').text(item.price + '元 x ' + item.num); var foodSubtotal = $('
').text(item.price * item.num + '元'); totalPrice += item.price * item.num; foodItem.append(foodName); foodItem.append(foodPrice); foodItem.append(foodSubtotal); shoppingCart.append(foodItem); }); var totalInfo = $('
').text('共' + shoppingCartData.length + '件商品，合计' + totalPrice + '元'); shoppingCart.append(totalInfo);

ログイン後にコピー

2. ショッピングカートの表示

ショッピングカートの表示は通常、ショッピングカートアイコンをクリックしてフローティングレイヤーをポップアップすることで実現されます。ショッピングカートに商品がない場合、オーバーレイには「ショッピングカートが空です」というプロンプトが表示されます。

var shoppingCart = $('
'); // 显示购物车为空的提示 if (shoppingCartData.length === 0) { var emptyTips = $('
').text('购物车为空'); shoppingCart.append(emptyTips); } else { // 显示购物车商品的详情 shoppingCartData.forEach(function(item) { // 上一节代码的处理逻辑 }); // 显示购物车商品总价 var totalInfo = $('
').text('共' + shoppingCartData.length + '件商品，合计' + totalPrice + '元'); shoppingCart.append(totalInfo); } $('.shopping-cart-icon').click(function() { $('body').append(shoppingCart); });

ログイン後にコピー

3. ショッピングカートの非表示

ユーザーがページの他の領域をクリックすると、ショッピングカートは非表示になります。

$(document).on('click', function(event) { if (!$(event.target).closest('.shopping-cart').length && !$(event.target).hasClass('shopping-cart-icon')) { shoppingCart.remove(); } });

ログイン後にコピー

4. ショッピングカートに商品を追加します。

ポップアップボックスから商品を追加できます。ユーザーが製品を選択した後、[OK] ボタンをクリックして製品をショッピングカートに追加します。

$('.add-to-cart-btn').click(function() { var foodItem = $(this).closest('.food-item'); var foodId = foodItem.data('food-id'); var foodName = foodItem.find('.food-name').text(); var foodPrice = parseFloat(foodItem.find('.food-price').text()); var foodNum = 1; // 判断购物车中是否已经存在该商品 for (var i = 0; i < shoppingCartData.length; i++) { if (shoppingCartData[i].food_id === foodId) { shoppingCartData[i].num++; foodNum = shoppingCartData[i].num; break; } } // 如果购物车中不存在该商品，则添加到购物车中 if (i === shoppingCartData.length) { shoppingCartData.push({ "food_id": foodId, "name": foodName, "price": foodPrice, "num": 1 }); } // 更新购物车详情 shoppingCart.empty(); totalPrice = 0; shoppingCartData.forEach(function(item) { // 上一节代码的处理逻辑 }); var totalInfo = $('
').text('共' + shoppingCartData.length + '件商品，合计' + totalPrice + '元'); shoppingCart.append(totalInfo); // 确定添加商品的数量 var addFoodNum = $('
').text('已加入购物车 ' + foodNum + ' 件'); $('body').append(addFoodNum); // 隐藏添加商品的数量 setTimeout(function() { addFoodNum.remove(); }, 1000); });

ログイン後にコピー

2. 共通のショッピングカートインタラクション効果の実装

1. アイテム数の増減

ユーザーは「」と「-」を使用してアイテムを変更できます。ショッピングカート内のボタン数量が増減します。

$(document).on('click', '.add-num-btn', function() { var foodItem = $(this).closest('.food-item'); var foodId = foodItem.data('food-id'); var foodNum = parseInt(foodItem.find('.food-price').text()) + 1; for (var i = 0; i < shoppingCartData.length; i++) { if (shoppingCartData[i].food_id === foodId) { shoppingCartData[i].num = foodNum; break; } } shoppingCart.empty(); totalPrice = 0; shoppingCartData.forEach(function(item) { // 上一节代码的处理逻辑 }); var totalInfo = $('
').text('共' + shoppingCartData.length + '件商品，合计' + totalPrice + '元'); shoppingCart.append(totalInfo); }); $(document).on('click', '.minus-num-btn', function() { var foodItem = $(this).closest('.food-item'); var foodId = foodItem.data('food-id'); var foodNum = parseInt(foodItem.find('.food-price').text()) - 1; for (var i = 0; i < shoppingCartData.length; i++) { if (shoppingCartData[i].food_id === foodId) { if (foodNum === 0) { shoppingCartData.splice(i, 1); } else { shoppingCartData[i].num = foodNum; } break; } } shoppingCart.empty(); totalPrice = 0; shoppingCartData.forEach(function(item) { // 上一节代码的处理逻辑 }); var totalInfo = $('
').text('共' + shoppingCartData.length + '件商品，合计' + totalPrice + '元'); shoppingCart.append(totalInfo); });

ログイン後にコピー

2. 商品の削除

ユーザーはショッピングカートの [×] ボタンをクリックして商品を削除できます。

$(document).on('click', '.delete-btn', function() { var foodItem = $(this).closest('.food-item'); var foodId = foodItem.data('food-id'); for (var i = 0; i < shoppingCartData.length; i++) { if (shoppingCartData[i].food_id === foodId) { shoppingCartData.splice(i, 1); break; } } shoppingCart.empty(); totalPrice = 0; shoppingCartData.forEach(function(item) { // 上一节代码的处理逻辑 }); var totalInfo = $('
').text('共' + shoppingCartData.length + '件商品，合计' + totalPrice + '元'); shoppingCart.append(totalInfo); });

ログイン後にコピー

3. 概要

この記事では、jQuery テクノロジーを使用して Ele.me ショッピングカートの詳細を実現する方法と、一般的なショッピングカートインタラクションエフェクトの実装方法を紹介します。ショッピングカート機能を最適化することで、ユーザーにより便利なショッピング体験を提供し、Webサイト上のユーザー満足度を向上させることができます。

以上がjquery Ele.meショッピングカートの詳細の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。