前段时间,朋友叫我帮他写个商品对比功能,当时正好在逛绿森数码商城,点开商品列表,看到有商品对比功能,然后直接下载了他的JS滚动文件和抽出了对比框的样式,然后自己完善了下。
下面是小菜自己写的代码,写的不咋的,请老鸟不要见笑
示例页面:http://mt.kgula.com/product/
商品对比功能代码分享
商品对比调用的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,
-
'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(){
-
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') {
-
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') {
-
$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') {
-
setcookie('gid','');
-
setcookie('gtype','');
-
}else if($_POST['action']=='4') {
-
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;
-
}
-
}
-
?>
|