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,
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,
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) // here you can modify the comparison data. {alert ('product Select up to three types for comparison. '); 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'#//setitem's linked address $ (". compare-box "). append ("
'"+ Chk. gname + "'
Delete") $ (" # Comids "). val ($ (". compare-box li "). map (function () {// assign all product IDs to # comidsreturn $ (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') {// addif (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') {// delallsetcookie ('gid ', ''); setcookie ('gtype','');} else if ($ _ POST ['action'] = '4 ') {// showlistif (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.
,