php商品对比功能代码分享
商品对比调用的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;
}
}
?>
php商品对比功能代码分享的更多相关文章
- 手机开发必备技巧:javascript及CSS功能代码分享
1. viewport: 也就是可视区域.对于桌面浏览器,我们都很清楚viewport是什么,就是出去了所有工具栏.状态栏.滚动条等等之后用于看网页的区域,这是真正有效的区域.由于移动设备屏幕宽度不同 ...
- jQuery实现的手机发送验证码倒计时效果代码分享
这是一款基于jquery实现的手机发送验证码倒计时效果代码,可实现实时显示秒数倒计时的功能,还可实现对手机号码格式验证的功能,是一款常用的网站注册发送手机验证码特效代码. 效果描述:注册一个网站,当需 ...
- JAVA基础代码分享--DVD管理
问题描述 为某音像店开发一个迷你DVD管理器,最多可存6张DVD,实现碟片的管理. 管理器具备的功能主要有: 1.查看DVD信息. 菜单选择查看功能,展示DVD的信息. 2.新增DVD信息 选择新增功 ...
- 原生JS实现购物车结算功能代码+zepto版
html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- 【PHP开源产品】Ecshop的商品筛选功能实现分析之一
一.首先,说明一下为什么要对category.php文件进行分析. 原因如下: ①个人对商城类商品筛选功能的实现比较好奇: ②对商城中关于商品的数据表设计比较感兴趣.(该功能涉及到与数据库的交互,而且 ...
- php版获取重定向后地址的代码分享
如何获取重定向的地址呢?我们用php实现这样的功能,分享下我的代码,有需要的朋友参考下. 代码如下: <?php //取重定向的地址 class RedirectUrl{ //地址 var $u ...
- SpringMVC由浅入深day01_9商品修改功能开发
9 商品修改功能开发 9.1 需求 操作流程: 1.进入商品查询列表页面 2.点击修改,进入商品修改页面,页面中显示了要修改的商品(从数据库查询) 要修改的商品从数据库查询,根据商品id(主键)查询商 ...
- JAVAEE——宜立方商城04:图片服务器FastDFS、富文本编辑器KindEditor、商品添加功能完成
1. 学习计划 1.图片上传 a) 图片服务器FastDFS b) 图片上传功能实现 2.富文本编辑器的使用KindEditor 3.商品添加功能完成 2. 图片服务器的安装 1.存储空间可扩展. 2 ...
- 【SSH网上商城项目实战09】添加和更新商品类别功能的实现
转自:https://blog.csdn.net/eson_15/article/details/51347734 上一节我们做完了查询和删除商品的功能,这一节我们做一下添加和更新商品的功能. 1. ...
随机推荐
- 最近学习了Sqlite3数据库,写一下操作应用以及命令
首先使用Flask-SQLAlchemy管理数据库 使用pip安装:pip install flask-sqlalchemy 接着要配置数据库,定义模型 关于数据库的操作就不再写了.... 使用Fla ...
- SQLServer数据库
分离数据库:右键数据库→任务→分离数据库→确定 附加数据库:数据库右键→任务→附加→选择要附加的dlf文件→附加 导出SQL脚本步骤:右键数据库→任务→生成脚本→高级→要编写脚本的数据的类型→架构和数 ...
- 最近学习的 Node.js 数组_函数
数组的排序,用到了箭头函数 let arr=[, , , , , , ]; /* arr.sort(function (n1, n2){ return n1-n2; }); */ // 等价于上面的写 ...
- makefile笔记9 - makefile隐含规则
在我们使用 Makefile 时,有一些我们会经常使用,而且使用频率非常高的东西,比如,我们编译C/C++的源程序为中间目标文件(Unix 下是[.o]文件,Windows 下是[.obj]文件). ...
- Holer实现手机APP应用外网访问本地WEB应用
手机APP应用公网访问内网WEB应用 本地安装了WEB服务端,手机APP应用只能在局域网内访问本地WEB,怎样使手机APP应用从公网也能访问本地WEB? 本文将介绍使用holer实现的具体步骤. 1. ...
- MySQL 使用join操作时出现重复数据
使用 group by 'id'' 如:SELECT e.* FROM excel e INNER JOIN task t ON t.eid=e.id where e.id>0 and t. ...
- Integer与String的知试点(java中常见面试题)
1.==符号使用 Integer a = 1000,b=1000; Integer c = 100,d=100; System.out.println(a==b); System.out.printl ...
- 双十一LoanMarket压力测试报告
测试背景 评估服务器资源及几个重要接口的并发性能. 测试需求 由开发提供的5个重要接口: 业务场景 URL 访问量(万) TPS 请求比例(%) 随手借点-首页产品接口 /suishoujiedian ...
- python学习笔记(1)python中的注释和安装python
注释 目标 注释的作用 单行注释 多行注释 01注释的作用 在程序中对代码的标注说明,增强代码的可读性 以 # 开头,# 右边的所有东西都被当做说明文字,而不是真正要执行的程序,只起到辅助说明作用 为 ...
- Linux下tomcat运行时jvm内存分配
tomcat运行时jvm内存分配 ⑴开发环境下在myeclipse中配置-Xms256m -Xmx512m -XX:NewSize=64m -XX:MaxNewSize=128m -XX:PermSi ...