Some time ago, a friend asked me to help him write a product comparison function. at that time, he was just visiting the green forest digital mall and clicked on the product list to see the product comparison function, then he directly downloaded his JS rolling file and extracted the style of the comparison box, and then improved it. The following is a self-written code. we will study it with you.
The JS file called for product comparison (including the floating JS in the product comparison box ):
/* Floating window */(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.doc umentElement. scrollTop) + n + 'px ';}; window. onresize = function () {obj. style. top = (document. body. scrollTop | document.doc umentElement. scrollTop) + n + 'px ';};}) (); // add the function addcompare (chk) {$ (' # goods-compare ') in the show box '). fadeIn (). show (); var count = $ (". compare-box li "). length; if (count> 2) // you can modify the comparison here. {Alert ('Choose up to three types of production'); return ;}$. ajax ({type: 'post', url: 'Ajax. php ', data: {'action': '1', 'gid': chk. gid, // product ID 'gname': chk. gname, // product name 'gtype': chk. gtype // product category, which cannot be compared at the same time}, cache: false, async: false, success: function (result) {if (result! = '') {Alert (result);} else {var url =' http://www.lusen.com/product- '{Chk.gid='.html '; // Set the product URL $ (". compare-box"). append ("
'"+ Chk. gname + "'
Delete") $ (" # Comids "). val ($ (". compare-box li "). map (function () {// assign all product IDs to # comids return $ (this ). attr ('id ');}). get (). join (",") ;}}}) ;}// delete the 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 (",") ;}}) ;}// clear the function clearcompare () {$. ajax ({type: 'post', url: 'Ajax. php ', data: {'action': '3'}, cache: false, success: function (result) {$ (". compare-box "example .html (''); $ ("# comids "). val ('') ;}}) ;}// the 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 () ;}}) ;}// click close comparison box $ ('. close-gc '). click (function () {$ ('# goods-compare '). fadeOut (). hide ();});
Product Comparison call Ajax file
<? 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 'Sorry, you cannot compare products of different categories. please select similar products or clear the current comparison column before selecting. '; Return ;}} else {setcookie ('gtype', $ _ POST ['gtype']);} if (isset ($ _ COOKIE ['gid']) {$ arr_str = $ _ COOKIE ['gid']; $ arr = mb_unserialize ($ arr_str); if (count ($ arr)> 2) {// compare item quantity echo "compare items up to 3"; return;} foreach ($ arr as $ val) {if ($ val [0] === _ POST ['gid']) {echo "This item has been added to the comparison box"; 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]}
Delete";}Echo $ data ;}}?>
The above is the product comparison function implementation code. I hope you can study it carefully and have a good idea to discuss it together.