商品对比功能代码分享

前段时间，朋友叫我帮他写个商品对比功能，当时正好在逛绿森数码商城，点开商品列表，看到有商品对比功能，然后直接下载了他的JS滚动文件和抽出了对比框的样式，然后自己完善了下。

为岳阳等地区用户提供了全套网页设计制作服务，及岳阳网站建设行业解决方案。主营业务为成都网站制作、网站设计、岳阳网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

下面是小菜自己写的代码，写的不咋的，请老鸟不要见笑

示例页面：http://mt.kgula.com/product/

#p#

商品对比功能代码分享

商品对比调用的JS文件（包含了商品对比框浮动JS）：

 
 
 
 
  
  
  
  /*浮动窗口*/ 
  
  
  
  (function(){      
  
  
  
      var n=10;  
  
  
  
      var obj=document.getElementById("goods-compare");  
  
  
  
      if(!obj){  
  
  
  
          return false;  
  
  
  
      }  
  
  
  
      var x=0;  
  
  
  
      window.onscroll=function(){  
  
  
  
          obj.style.top=(document.body.scrollTop||document.documentElement.scrollTop)+n+'px';  
  
  
  
      };  
  
  
  
      window.onresize=function(){  
  
  
  
          obj.style.top=(document.body.scrollTop||document.documentElement.scrollTop)+n+'px';  
  
  
  
      };      
  
  
  
  })();  
  
  
  
   
  
  
  
  //添加显示对比框  
  
  
  
  function addcompare(chk){  
  
  
  
      $('#goods-compare').fadeIn().show();  
  
  
  
      var count=$(".compare-box li").length;  
  
  
  
      if (count>2)//这里可以修改对比的数据哦  
  
  
  
      {  
  
  
  
          alert('产品比较最多选3种哦');  
  
  
  
          return;  
  
  
  
      }  
  
  
  
   
  
  
  
      $.ajax({  
  
  
  
          type: 'post',  
  
  
  
          url: 'ajax.php',  
  
  
  
          data: {  
  
  
  
              'action':'1',  
  
  
  
              'gid':chk.gid,//商品ID  
  
  
  
              'gname':chk.gname,//商品名称  
  
  
  
              'gtype':chk.gtype//商品类别，类别不同时不能比较  
  
  
  
          },  
  
  
  
          cache: false,  
  
  
  
          async: false,  
  
  
  
          success: function(result) {  
  
  
  
              if(result!='')  
  
  
  
              {  
  
  
  
                  alert(result);  
  
  
  
              }else{  
  
  
  
                  var url='http://www.lusen.com/product-'+chk.gid+'.html';//设置商品的链接地址  
  
  
  
                  $(".compare-box").append("'"+chk.gname+"'

删除")

$("#comids").val($(".compare-box li").map(function(){//将对比的所有商品ID，赋值给#comids

return $(this).attr('id');

}).get().join(","));

}

});

}

//删除对比产品

function removecompare(id)

{

$.ajax({

type: 'post',

url: 'ajax.php',

data: {

'action':'2',

'gid':id

cache: false,

success: function(result) {

$("#"+id).remove();

$("#comids").val($(".compare-box li").map(function(){

return $(this).attr('id');

}).get().join(","));

}

});

}

//清空对比产品

function clearcompare()

{

$.ajax({

type: 'post',

url: 'ajax.php',

data: {

'action':'3'

cache: false,

success: function(result) {

$(".compare-box").html('');

$("#comids").val('');

}

});

}

//显示对比框

function showcompare()

{

$.ajax({

type: 'post',

url: 'ajax.php',

data: {

'action':'4'

success: function(result) {

if(result){

$(".compare-box").append(result);

$("#comids").val($(".compare-box li").map(function(){

return $(this).attr('id');

}).get().join(","));

$('#goods-compare').fadeIn().show();

}

});

}

//点击关闭对比框

$('.close-gc').click(function(){

$('#goods-compare').fadeOut().hide();

});

商品对比调用Ajax文件

 
 
 
 
  
  
  
  
  
  
  
  
function mb_unserialize($serial_str) {  
  
  
  
      $serial_str =stripslashes($serial_str);  
  
  
  
      return unserialize($serial_str);  
  
  
  
  }  
  
  
  
  if($_POST['action']=='1') {//add  
  
  
  
      if(isset($_COOKIE['gtype'])) {  
  
  
  
          if($_COOKIE['gtype']!=$_POST['gtype']) {  
  
  
  
              echo '对不起，您选择的是不同类别的产品无法加入对比，请选择同类产品或清空当前对比栏再选择。';  
  
  
  
              return;  
  
  
  
          }  
  
  
  
      }else {  
  
  
  
          setcookie('gtype',$_POST['gtype']);  
  
  
  
      }  
  
  
  
      if(isset($_COOKIE['gid'])) {  
  
  
  
          $arr_str = $_COOKIE['gid'];  
  
  
  
          $arr=mb_unserialize($arr_str);  
  
  
  
          if(count($arr)>2) {//商品比较数量  
  
  
  
              echo "商品比较最多选3种";  
  
  
  
              return;  
  
  
  
          }  
  
  
  
          foreach($arr as $val) {  
  
  
  
              if($val[0]==$_POST['gid']) {  
  
  
  
                  echo "该商品已经加入对比框";  
  
  
  
                  return;  
  
  
  
              }  
  
  
  
          }  
  
  
  
          $info=array($_POST['gid'],$_POST['gname'],$_POST['gtype']);  
  
  
  
          $arr[]=$info;  
  
  
  
          $arr_str=serialize($arr);  
  
  
  
          setcookie('gid',$arr_str);  
  
  
  
      }else {  
  
  
  
          $info=array($_POST['gid'],$_POST['gname'],$_POST['gtype']);  
  
  
  
          $arr[]=$info;  
  
  
  
          $arr_str=serialize($arr);  
  
  
  
          setcookie('gid',$arr_str);  
  
  
  
      }  
  
  
  
  }else if($_POST['action']=='2') {//delone  
  
  
  
      $id=$_POST['gid'];  
  
  
  
      $arr_str = $_COOKIE['gid'];  
  
  
  
      $arr=mb_unserialize($arr_str);     
  
  
  
      foreach($arr as $key=>$val) {  
  
  
  
          if($val[0]==$id) {  
  
  
  
              unset ($arr[$key]);  
  
  
  
          }  
  
  
  
      }  
  
  
  
      $arr_str=serialize($arr);      
  
  
  
      setcookie('gid',$arr_str);  
  
  
  
  }else if($_POST['action']=='3') {//delall  
  
  
  
      setcookie('gid','');  
  
  
  
      setcookie('gtype','');  
  
  
  
  }else if($_POST['action']=='4') {//showlist  
  
  
  
      if(isset($_COOKIE['gid'])) {  
  
  
  
          $data='';  
  
  
  
          $arr_str = $_COOKIE['gid'];  
  
  
  
          $arr=mb_unserialize($arr_str);   
  
  
  
          foreach ($arr as $val){            
  
  
  
              $url="http://www.lusen.com/product-".$val[0].".html";  
  
  
  
              $data.="{$val[1]}