当前位置:Gxlcms > JavaScript > jQuery+HTML5加入购物车代码分享_jquery

jQuery+HTML5加入购物车代码分享_jquery

时间:2021-07-01 10:21:17 帮助过:35人阅读

这是一款基于jquery+html5实现的支持累加计价的网站购物车代码,可以把货物添加到购物车,添加物品数量,如果想取消购置某物品,这个功能也是可以实现的。

运行效果图:-----------------------------------查看效果-----------------------------------


为大家分享的jQuery+HTML5加入购物车代码如下

  1. <meta charset="UTF-8">
  2. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  3. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  4. <title>jQuery+HTML5加入购物车代码</title>
  5. <div class="ct-pageWrapper">
  6. <main>
  7. <div class="container">
  8. <div class="row">
  9. <div class="col-md-3">
  10. <div class="widget">
  11. <h2 class="widget-header">购物车</h2>
  12. <div class="ct-cart"></div>
  13. </div>
  14. </div>
  15. <div class="col-md-9">
  16. <div class="row">
  17. <div class="col-sm-4">
  18. <div class="ct-product">
  19. <div class="image"><img src="https://www.gxlcms.com/images/product-01.jpg" alt=""></div>
  20. <div class="inner"><i class="fa fa-shopping-cart"></i>
  21. <h2 class="ct-product-title">Box of macaroons</h2>
  22. <p class="ct-product-description">A very delicious macaroons ...</p><span class="ct-product-price">$19.99</span>
  23. </div>
  24. </div>
  25. </div>
  26. <div class="col-sm-4">
  27. <div class="ct-product">
  28. <div class="image"><img src="https://www.gxlcms.com/images/product-02.jpg" alt=""></div>
  29. <div class="inner"><i class="fa fa-shopping-cart"></i>
  30. <h2 class="ct-product-title">Cherry Straws</h2>
  31. <p class="ct-product-description">A very delicious macaroons ...</p><span class="ct-product-price">$34.99</span>
  32. </div>
  33. </div>
  34. </div>
  35. <div class="col-sm-4">
  36. <div class="ct-product">
  37. <div class="image"><img src="https://www.gxlcms.com/images/product-03.jpg" alt=""></div>
  38. <div class="inner"><i class="fa fa-shopping-cart"></i>
  39. <h2 class="ct-product-title">Coffee Macaroons</h2>
  40. <p class="ct-product-description">A very delicious macaroons ...</p><span class="ct-product-price">$59.99</span>
  41. </div>
  42. </div>
  43. </div>
  44. <div class="col-sm-4">
  45. <div class="ct-product">
  46. <div class="image"><img src="https://www.gxlcms.com/images/product-04.jpg" alt=""></div>
  47. <div class="inner"><i class="fa fa-shopping-cart"></i>
  48. <h2 class="ct-product-title">Finetti ones</h2>
  49. <p class="ct-product-description">A very delicious macaroons ...</p><span class="ct-product-price">$9.99</span>
  50. </div>
  51. </div>
  52. </div>
  53. <div class="col-sm-4">
  54. <div class="ct-product">
  55. <div class="image"><img src="https://www.gxlcms.com/images/product-05.jpg" alt=""></div>
  56. <div class="inner"><i class="fa fa-shopping-cart"></i>
  57. <h2 class="ct-product-title">Minty duo</h2>
  58. <p class="ct-product-description">A very delicious macaroons ...</p><span class="ct-product-price">$3.99</span>
  59. </div>
  60. </div>
  61. </div>
  62. <div class="col-sm-4">
  63. <div class="ct-product">
  64. <div class="image"><img src="https://www.gxlcms.com/images/product-06.jpg" alt=""></div>
  65. <div class="inner"><i class="fa fa-shopping-cart"></i>
  66. <h2 class="ct-product-title">Pistachio</h2>
  67. <p class="ct-product-description">A very delicious macaroons ...</p><span class="ct-product-price">$13.99</span>
  68. </div>
  69. </div>
  70. </div>
  71. </div>
  72. </div>
  73. </div>
  74. </div>
  75. </main>
  76. </div>

以上就是分享的jQuery+HTML5加入购物车代码,希望大家可以喜欢。

人气教程排行