电商网站的商品收藏功能实现
商品收藏的功能描述:用户对一件商品重复的进行收藏与取消收藏操作。点击收藏,将商品收藏成功,并且图标变为 已收藏;点击已收藏,则取消对该商品的收藏,并且图标变为 收藏 。这个操作可以重复进行!
下面是我设计此功能的步骤以及关键代码:
1.首先创建一张收藏表:我的收藏表只有三个字段:id;userID(用户id);productID(产品id);
2.写添加收藏与取消收藏的方法(要根据userID和productID两个参数来实现收藏与取消收藏的);
3.我的收藏图标是在商品详情页,所以要在进入商品详情页的时候进行判断,判断该用户有没有收藏该商品!如果该用户已收藏该商品,则图标显示 已收藏,反之,则显示 收藏 。
4.在进入商品详情页,根据点击图标所显示的文字来判断你所进行的操作,如果点击的文字是收藏,则触发收藏事件,通过ajax进行该用户对该产品的收藏方法;如果点击的文字是已收藏,则触发取消收藏事件,也是通过ajax进行该用户对该产品的取消收藏方法。(注意:这里要先获取到该用户的userID和该商品的productID,这两个参数都可以在进入商品详情的那个方法中获取;“collection.do” 添加收藏的方法,“deleteUcByUPId.do”取消收藏的方法。)
商品详情页关键代码如下:
<div id="mir" class="right clearfloat fr" style="text-align: center;">
<i id="shoucang" class="iconfont icon-shoucang"></i>
<p style="cursor: pointer;" id="btn" class=""><a style="color: #8f8f94;" href="Javascript:window.external.addFavorite(document.location.href,document.title)">收藏</a></p>
</div>
<script type="text/javascript"> var productID = ${requestScope.productID}; var userID = ${requestScope.userID}; function addbtn(){ $("#shoucang").addClass('icon-shoucang1').removeClass('icon-shoucang'); $("#btn").text('已收藏'); }; function dedlebtn(){ $("#btn").text('收藏'); $("#shoucang").addClass('icon-shoucang').removeClass('icon-shoucang1'); }; $(document).ready(function () { if (${message.type} == 0){ dedlebtn(); }else{ addbtn(); } }); $("#mir").click(function() { if ($("#btn").text() == '收藏' ) { $("#shoucang").addClass('icon-shoucang1').removeClass('icon-shoucang'); $("#btn").text('已收藏'); } else { $("#btn").text('收藏'); $("#shoucang").addClass('icon-shoucang').removeClass('icon-shoucang1'); } if($("#btn").text() == '收藏'){ deleteCollection(productID,userID); } else{ addUserCollection(productID,userID); } }); function addUserCollection(productID){ $.ajax({ type: "POST", url: "collection.do", data:{"productID":productID,"userID":userID}, dataType: "text", success:function(data){ if(data=="1"){ $("#shoucang").addClass('icon-shoucang1').removeClass('icon-shoucang'); $("#btn").text('已收藏'); }else{ $("#btn").text('收藏'); $("#shoucang").addClass('icon-shoucang').removeClass('icon-shoucang1'); } } }) } function deleteCollection(productID,userID){ $.ajax({ type: "POST", url: "deleteUcByUPId.do", data:{"productID":productID,"userID":userID}, dataType: "text", success:function(data){ if(data=="1"){ $("#btn").text('收藏'); $("#shoucang").addClass('icon-shoucang').removeClass('icon-shoucang1'); }else{ $("#shoucang").addClass('icon-shoucang1').removeClass('icon-shoucang'); $("#btn").text('已收藏'); } } }) } </script>