代码如下,欢迎探讨交流:
商品对比调用的JS文件(包含了商品对比框浮动JS):
001 | /*浮动窗口*/ |
002 | ( function (){ |
003 | var n=10; |
004 | var obj=document.getElementById( "goods-compare" ); |
005 | if (!obj){ |
006 | return false ; |
007 | } |
008 | var x=0; |
009 | window.onscroll= function (){ |
010 | obj.style.top=(document.body.scrollTop||document.documentElement.scrollTop)+n+ 'px' ; |
011 | }; |
012 | window.onresize= function (){ |
013 | obj.style.top=(document.body.scrollTop||document.documentElement.scrollTop)+n+ 'px' ; |
014 | }; |
015 | })(); |
016 | //添加显示对比框 |
017 | function addcompare(chk){ |
018 | $( '#goods-compare' ).fadeIn().show(); |
019 | var count=$( ".compare-box li" ).length; |
020 | if (count>2) //这里可以修改对比的数据哦 |
021 | { |
022 | alert( '产品比较最多选3种哦' ); |
023 | return ; |
024 | } |
025 | |
026 | $.ajax({ |
027 | type: 'post' , |
028 | url: 'ajax.php' , |
029 | data: { |
030 | 'action' : '1' , |
031 | 'gid' :chk.gid, //商品ID |
032 | 'gname' :chk.gname, //商品名称 |
033 | 'gtype' :chk.gtype //商品类别,类别不同时不能比较 |
034 | }, |
035 | cache: false , |
036 | async: false , |
037 | success: function (result) { |
038 | if (result!= '' ) |
039 | { |
040 | alert(result); |
041 | } else { |
042 | var url= 'http://www.camnpr.com/product-' +chk.gid+ '.html' ;//设置商品的链接地址 |
043 | $( ".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>" ) |
044 | $( "#comids" ).val($( ".compare-box li" ).map( function (){ //将对比的所有商品ID,赋值给#comids |
045 | return $( this ).attr( 'id' ); |
046 | }).get().join( "," )); |
047 | } |
048 | } |
049 | }); |
050 | } |
051 | |
052 | //删除对比产品 |
053 | function removecompare(id) |
054 | { |
055 | $.ajax({ |
056 | type: 'post' , |
057 | url: 'ajax.php' , |
058 | data: { |
059 | 'action' : '2' , |
060 | 'gid' :id |
061 | }, |
062 | cache: false , |
063 | success: function (result) { |
064 | $( "#" +id).remove(); |
065 | $( "#comids" ).val($( ".compare-box li" ).map( function (){ |
066 | return $( this ).attr( 'id' ); |
067 | }).get().join( "," )); |
068 | } |
069 | }); |
070 | |
071 | } |
072 | //清空对比产品 |
073 | function clearcompare() |
074 | { |
075 | $.ajax({ |
076 | type: 'post' , |
077 | url: 'ajax.php' , |
078 | data: { |
079 | 'action' : '3' |
080 | }, |
081 | cache: false , |
082 | success: function (result) { |
083 | $( ".compare-box" ).html( '' ); |
084 | $( "#comids" ).val( '' ); |
085 | } |
086 | }); |
087 | } |
088 | //显示对比框 |
089 | function showcompare() |
090 | { |
091 | $.ajax({ |
092 | type: 'post' , |
093 | url: 'ajax.php' , |
094 | data: { |
095 | 'action' : '4' |
096 | }, |
097 | success: function (result) { |
098 | if (result){ |
099 | $( ".compare-box" ).append(result); |
100 | $( "#comids" ).val($( ".compare-box li" ).map( function (){ |
101 | return $( this ).attr( 'id' ); |
102 | }).get().join( "," )); |
103 | $( '#goods-compare' ).fadeIn().show(); |
104 | } |
105 | } |
106 | }); |
107 | |
108 | } |
109 | |
110 | //点击关闭对比框 |
111 | $( '.close-gc' ).click( function (){ |
112 | $( '#goods-compare' ).fadeOut().hide(); |
113 | }); |
商品对比调用Ajax文件
01 | <?php |
02 | function mb_unserialize( $serial_str ) { |
03 | $serial_str = stripslashes ( $serial_str ); |
04 | return unserialize( $serial_str ); |
05 | } |
06 | if ( $_POST [ 'action' ]== '1' ) { //add |
07 | if (isset( $_COOKIE [ 'gtype' ])) { |
08 | if ( $_COOKIE [ 'gtype' ]!= $_POST [ 'gtype' ]) { |
09 | echo '对不起,您选择的是不同类别的产品无法加入对比,请选择同类产品或清空当前对比栏再选择。' ; |
10 | return ; |
11 | } |
12 | } else { |
13 | setcookie( 'gtype' , $_POST [ 'gtype' ]); |
14 | } |
15 | if (isset( $_COOKIE [ 'gid' ])) { |
16 | $arr_str = $_COOKIE [ 'gid' ]; |
17 | $arr =mb_unserialize( $arr_str ); |
18 | if ( count ( $arr )>2) { //商品比较数量 |
19 | echo "商品比较最多选3种" ; |
20 | return ; |
21 | } |
22 | foreach ( $arr as $val ) { |
23 | if ( $val [0]== $_POST [ 'gid' ]) { |
24 | echo "该商品已经加入对比框" ; |
25 | return ; |
26 | } |
27 | } |
28 | $info = array ( $_POST [ 'gid' ], $_POST [ 'gname' ], $_POST [ 'gtype' ]); |
29 | $arr []= $info ; |
30 | $arr_str =serialize( $arr ); |
31 | setcookie( 'gid' , $arr_str ); |
32 | } else { |
33 | $info = array ( $_POST [ 'gid' ], $_POST [ 'gname' ], $_POST [ 'gtype' ]); |
34 | $arr []= $info ; |
35 | $arr_str =serialize( $arr ); |
36 | setcookie( 'gid' , $arr_str ); |
37 | } |
38 | } else if ( $_POST [ 'action' ]== '2' ) { //delone |
39 | $id = $_POST [ 'gid' ]; |
40 | $arr_str = $_COOKIE [ 'gid' ]; |
41 | $arr =mb_unserialize( $arr_str ); |
42 | foreach ( $arr as $key => $val ) { |
43 | if ( $val [0]== $id ) { |
44 | unset ( $arr [ $key ]); |
45 | } |
46 | } |
47 | $arr_str =serialize( $arr ); |
48 | setcookie( 'gid' , $arr_str ); |
49 | } else if ( $_POST [ 'action' ]== '3' ) { //delall |
50 | setcookie( 'gid' , '' ); |
51 | setcookie( 'gtype' , '' ); |
52 | } else if ( $_POST [ 'action' ]== '4' ) { //showlist |
53 | if (isset( $_COOKIE [ 'gid' ])) { |
54 | $data = '' ; |
55 | $arr_str = $_COOKIE [ 'gid' ]; |
56 | $arr =mb_unserialize( $arr_str ); |
57 | foreach ( $arr as $val ){ |
58 | $url = "http://www.camnpr.com/product-" . $val [0]. ".html" ; |
59 | $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>" ; |
60 | } |
61 | echo $data ; |
62 | } |
63 | } |
64 | ?> |
以上就是商品对比功能实现代码,希望大家可以仔细研究,有好的想法大家一起探讨。