商品收藏模块的功能设计实现

                                   电商网站的商品收藏功能实现



              商品收藏的功能描述:用户对一件商品重复的进行收藏与取消收藏操作。点击收藏,将商品收藏成功,并且图标变为  已收藏;点击已收藏,则取消对该商品的收藏,并且图标变为  收藏 。这个操作可以重复进行!
       
        下面是我设计此功能的步骤以及关键代码:
        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>








  • 13
    点赞
  • 127
    收藏
    觉得还不错? 一键收藏
  • 23
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 23
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值