下面是自己亲自动手编写的代码,和大家一起学习研究。
商品对比调用的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(\"<li class=\'division clearfix\' id=\'\"+chk.gid+\"\'><div class=\'span-3\'><a href=\'\"+url+\"\' target=\'_blank\' title=\'\"+chk.gname+\"\'>\'\"+chk.gname+\"\'</a></div><span onclick=\\\"removecompare(\'\"+chk.gid+\"\');\\\">删除</span></li>\") $(\"#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文件
<?php 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.=\"<li id=\'{$val[0]}\' class=\'division clearfix\'><div class=\'span-3\'><a href=\'{$url}\' target=\'_blank\' title=\'{$val[1]}\'>{$val[1]}</a></div><span onclick=\\\"removecompare(\'{$val[0]}\');\\\">删除</span></li>\"; } echo $data; } } ?>
以上就是商品对比功能实现代码,希望大家可以仔细研究,有好的想法大家一起探讨。
本文地址:https://www.stayed.cn/item/23656
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我