分解京東商城限時搶購實現(xiàn)步驟

1、看效果：看 URL 你不難看出來這個是完全在 ecshop2.7.3 系統(tǒng)上面顯示的。如果我把這一塊東西是在京東的模板上面測試的，這樣的話恐怕沒有太大的意義了。因為這樣做的話，會導致很多的東西沒有完全分離出來。不知道這樣說明白了沒有。PS：搞這么一個小小的模塊下來，卻花費太多時間與精力在里面。做模板的這些人，大部分是懂程序的吧。不然他們也不敢去一套模板賣上千，不然，他們也無法做出來 ecshop 的模板。這絕對不是一個美工能完成的工作。好，廢話少說。這個在我這里實現(xiàn)起來還是比較麻煩的，不知道有沒有朋友有更好的方法給我。你的無私。下面是實現(xiàn)過程。首先在 ec 的根目錄下建立測試文件-time.貼

2、上代碼：assign(group_buy_goods,$smarty-display(time.dwt); function index_get_group_buyex( )$time = gmtime( );index_get_group_buyex();$sql = SELECT gb.act_id AS group_buy_id, gb.goods_id, gb.ext_info, gb.goods_name,gb.end_time,g.goods_thumb,g.market_price,g.goods_img,gb.act_descFROM.$GLOBALSecs-table( go

3、ods_activity ). AS gb, .$GLOBALSecs-table( goods ). AS g WHERE gb.act_type = .GAT_GROUP_BUY. AND g.goods_id = gb.goods_id AND gb.start_time = .$time. AND g.is_delete = 0 ORDER BY gb.act_id DESC .( LIMIT 4 );$res = $GLOBALSdb-query( $sql );while ( $row = $GLOBALSdb-fetchRow( $res ) )$rowmarket_price_

4、no_format = $rowmarket_price;$rowgoods_img = get_image_path( $rowgoods_id, $rowgoods_img );$rowthumb = get_image_path( $rowgoods_id, $rowgoods_thumb, TRUE );$ext_info = unserialize( $rowext_info );$row = array_merge( $row, $ext_info );$price_ladder = $ext_infoprice_ladder;if ( !is_array( $price_ladd

5、er ) & empty( $price_ladder ) )$rowlast_price = price_format( 0 );elseforeach ( $price_ladder as $amount_price )$price_ladder$amount_priceamount = $amount_priceprice;ksort( $price_ladder );$rowlast_price_no_format = end( $price_ladder );$rowlast_price = price_format( end( $price_ladder ) );$s= group

6、_buy_s( $rowgroup_buy_id, $rowdeit );$rowvalid_order = $svalid_order;$rowurl = build_uri( group_buy, array( gbid = $rowgroup_buy_id) );$rowshort_name=0 0, save_rate = 0 );$totalsaving = $market_price - $price;$totalsave_rate = $market_price != 0 ? round( $price / $market_price, 2 ) * 10 : 0;return $

7、total;頁面就這么多。結(jié)合模板頁來看里面的東西，下面在 themes/default/建立 time.dwt 文件。代碼：!DOCTYPE html xmlns=htmlPUBLIC-/W3C/DTDXHTML1.0Transitional/EN$page_title限時搶購assign(goods_save, get_goods_saving($GLOBALSsmarty-_varbuy_goodslast_price_no_format,$GLOBALSsmarty-_varbuy_goodsmarket_price_no_format);?class=fore$smarty.fore

8、ach.group_buy_goods.index$goods_save.save_rate折 a=_bltitle=$buy_goods.goods_name|esc:html:htmlhref=$buy_goods.url$buy_goods.short_style_name|esc搶購價： $buy_goods.last_price$(#timer$buy_goods.group_buy_id).everyTime(1000, function() Temp = get_group_buy_time($buy_goods.end_time|default:0);$(this).html(

9、Temp););大家看到上面到的 CSS 路徑，所以針對這個模板，你需要它的全部 CSS。貼下面。lefttime.csshtml,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,address,big,cite,code,del,em,font,img,ins,smal l,strong,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legendmargin:0;padding:0;ol,ullist-style:none;:focusoutline:0;a i

10、mgborder:0;imgvertical-align:middle;.wwidth:990px;margin:0 auto;.w1margin-bottom:10px;.w,#shortcut .fl b,#shortcut .bbackground-image:url(i/20111221C.png);background-repeat:no-repeat;.m,.mt,.mc,.mb,.sm,.smt,.smc,.smboverflow:hidden;zoom:1;.m,.smmargin-bottom:10px;.m .mt .extra a:link,.m .mt .extra a

11、:visited,.sm .smt .extra a:link,.sm .smt .extra a:visitedcolor:#005EA7;.m2 .mtpadding:0 8px;background:#F3F3F3;border:solid #ddd;border-width:1px 1px 0;border-radius:5px 5px0 0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;m2 .mt h2floeft;.m2 .mt .extrafloat:right;m2 .mcborder:sol

12、id #ddd;border-width:0 1px 1px; m2 .mtheight:39px;line-height:38px;#timedfloeft;width:770px;background:url(i/20120208A.png) #F3F3F3 no-repeat -90px -886px;#timed .mtbackground:none;#timed .mcwidth:761px;padding:0 0 7px 7px;#timed .mc liwidth:144px;height:253px;border:1px solid #ddd;margin-right:6px;

13、background:#; #timed .mc .fore5margin-right:0;#timed .p-imgwidth:130px;height:138px;padding:10px 4px 0;margin:0 auto;text-align:center; #timed .p-img .pix1height:38px;padding-top:3px;#timed .p-img .pix1line-height:16px;font-size:12px; #timed .p-img .pix1 spanline-height:20px;font-size:20px; #timed .

14、p-nameheight:3em;padding:0 8px;margin:5px 0;#timed .p-priceheight:1.5em;padding:5px 0 0 8px;border-top:1px dotted #ccc;#timed .p-pri #timed .p-pri#timedpandisplay:none;trongfont-size:14px;font-family:verdana;.countdownheight:30px;margin:0auto;overflow:hidden;border-bottom:1pxdotted#ccc;text-align:ce

15、nter;line-height:30px;color:#999; #timed .countdown bpadding:0 2px;font-size:16px;#timed .countdown acolor:#005EA7;#timed .loading-style1marg #timedwidth:890px; #timed .mcwidth:881px;#timed .mc liwidth:168px;op:110px;#timed .p-pripandisplay:inline;.mt,.smtcursor:default;.mt h2,.smt h3font-family:yah

16、ei;.mt,#categorys .mt b,#categorys h3background-image:url(i/20111221C.png);background-repeat:no-repeat;.lh li,.lh dl,.lh .itemfloeft;.fore1 .mtleft:0;border-radius:5px 0 0 0;-moz-border-radius:5px 0 0 0;-webkit-border-radius:5px 0 0 0;.p-img,.p-name,.p-price,.p-market,.p-.p-imgpadding:5px 0;overflow

17、:hidden;.p-img a:link,.p-img a:visitedtext-decoration:none;.p-img .picursor:poer;.ldition:relative;zoom:1;ld s,.ld b,.ld .blockition:absolute;overflow:hidden;.piition:absolute;top:0;right:0;top:10px;width:40px;height:41px;padding-left:8px;background-image:url(./././product/skin/2012/i/20120209D.png)

18、;background-repeat:no-repeat;font-family:yahei;color:#;line-height:41px;overflow:hidden;font-size:16px;zoom:1;pix1background-ition:-219px 0px;p-name,.p-word-break:break-all;word-wrap:break-word;.p-pricecolor:#999;.p-pritrong,.p-market strongcolor:#C00;最后，上面的模板頁里會調(diào)用幾個 js 文件：在此無法貼代碼，如果有的朋友，可以發(fā)給你來測試一下。OK。做完以上的這幾步，你基本上完全可以實現(xiàn)開篇的展示效果。除了在 CSS 中的一些徑要修改以外。功能部分已全部實現(xiàn)。的路PS：在完成這個效果的過程中，報了 N 多錯。出現(xiàn)過 N 多不知何故的。在此，給你一點小小的建議。如果你的頁面沒有調(diào)用出數(shù)據(jù)?？梢栽?dwt 文件里面寫這樣幾句代碼：這樣來看看你調(diào)用的數(shù)據(jù)到底是怎么回事。還有你顯示出來的數(shù)據(jù)，比如是只顯示出了三個商品。這時候你要直接找到 sql 語句，看看 limit 是否做了限制，改掉它。/*先到這里*/*我是漂亮的分割線*/PS2: 寫了有幾篇文章關于模塊分離之類的了，不知道你有沒有看明白。這個過程其實不是給你拿