ショッピングカートに製品を追加する方法はたくさんあります。通常の練習は、「カートに追加」ボタンをクリックすることです。これはショッピングカートにジャンプします。ショッピングカートでは、[チェック]ボタンをクリックしてチェックできます。そして今日、私はあなたにもっと友好的なソリューションを紹介します。
デモのダウンロードソースコードを表示します
デフォルトでは、ショッピングカートは隠されていて見えません。ユーザーがカートに追加ボタンをクリックすると、製品情報がカートに追加されます。ショッピングカートは、ボタンの形でページの右下隅に表示されます。ボタンをクリックすると、ショッピングカートが展開され、カートに製品情報が表示されます。同時に、カート内の製品を削除または解決することもできます。ユーザーは一時的にショッピングカートを閉じてショッピングを続けることもできます。
HTML構造
HTML構造には、主に2つの部分が含まれています。最初の部分は、製品リストの「ショッピングカートの追加」ボタンです。次のコードに示されているように、データ - *属性を使用して、製品のID、画像、名前、価格、その他の情報をまとめます。
<a href = "＃0" data-price = "3669.00" data-proid = "1" data-proname = "huawei p9" data-proimg = "img/huawei_p9.jpg">カートに追加</a>
2番目の部分はショッピングカートです。ショッピングカートの部分には、トリガーショッピングカートとショッピングカートの統計部品が含まれています。
<div> <a href = "＃0">ショッピングカート<ul> <！ - カートアイテムカウント - > <li> 0 </li> <li> 0 </li> <li> 0 </li> </ul> </a> <div> <div> <div> <header> <h2>ショッピングカート</h2> <span>削除<a href = "＃0"パート、JavaScriptによって動的に挿入 - > </ul> </div> <footer> <a href = "＃0"> <em> current-em> <span> 0 </span> </em> </a> </footer> </div> </div> </div>
div.body要素のULリストはデフォルトで空です。ショッピングカートの製品リスト情報を表示するために使用されます。その粗い構造は次のとおりです。 JavaScriptによって動的に挿入されます。
<div> <ul> <li> <div> <a href = "＃0"> <img src = "img/pro.jpg"> </a> </div> <div> <h3> <h3> <a href = "＃0">製品名</a> </h3> <span> ￥ 3999999999 </span <> <a href> <> < for = "cd-product- '+productid+'">アイテム数</label> <span> <span> x <i id = "cd-product- '+proid+'"> 1 </i> </span> </span> </div> </div> </li> </ul> </div> div> div> </div> </div> </div> </div> </div> </div> </div> </li> </div> </div>
CSSの部分はこの記事には表示されません。ソースコードにCSS/style.cssをダウンロードして表示できます。
JavaScript
この例のコードはjQueryに基づいているため、jQueryライブラリファイルを事前にロードする必要があります。
ユーザーがボタンをクリックすると、ボタンを付けて、関数addproduct（）をトリガーし、製品情報を.body> ulに挿入します。
function addproduct（proname、proid、price、proimg）{var quanty = $（ "＃cd-product-"+proid）.text（）; var select = ''、productAdded = ''; if（Quantion == ''）{var select = '<span> x <i id = "cd-product-'+proid+'"> 1 </i> </span>'; var productAdded = $（ '<li> <div> <a href = "＃0"> <img src = "'+proimg+'"> </a> </div> <div> <h3> <a href = "＃0">'+proname+'</a> </h3> href = "＃0"> delete </a> <div> <label for = "cd-product- '+proid+'">ファイル数</label> '+select+' </div> </div> </li> '）; cartlist.prendy（productAdded）; } else {数量= parseInt（数量）; $（ "＃cd-product-"+proid）.html（数量+1）; }}上記は、ソースコードのダウンロードでショッピングカートに追加された効果のJavaScriptベースの実装です。私はそれが誰にでも役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は、すべての人に時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！