一、全局設置
全局設置,可以把全局模塊加到header裏面。因爲,淘寶在J_TWidget的div裏都會在debug的時候在J_TBox里加上一個ui-dd樣式,而在非debug的時候是沒有ui-dd樣式的,所以利用這個特點,可以把全局模塊設置成正常瀏覽不可見,debug可見的特性。
區域的具體代碼:
<div class = "layout
grid-m cloudcome" > <div class = "J_TRegion" > <? echo include_local_module( 'global' , 'global-1' ); ?> </div> </div> global 模塊的具體代碼: <div class = "J_TBox
global_cloudcome" <? echo $_MODULE_TOOLBAR ;?>> <div class = "setting" style= "height:40px;" > <center>★請不要在其他地方添加此模塊!全局設置參數,保存後刷新頁面,如有不明請諮詢我們.★</center> <? //全局參數處理與輸出 ?> </div> </div> |
其CSS樣式爲:
.cloudcome{ height : 40px ; overflow : hidden ;} .cloudcome .global_cloudcome{ visibility : hidden ; position : relative ; background-color : #6E9B07 ; height : 40px ;} .cloudcome .ui-dd{ display : block ; visibility : visible ;} .cloudcome .ui-dd .ds-bar-del{ display : none ; width : 0px ; height : 0px ; visibility : hidden ;} .cloudcome .setting{ position : relative ; width : 100% ; height : 40px ; color : #fff ; font-size : 18px ; line-height : 40px ;} |
二、約定俗稱
1、模塊的命名
模塊的命名在20字符以內,其名稱爲cloud99_slide_950,第一個參數爲模塊的類別【baby(寶貝列表)、focus(焦點圖)、float(懸浮)、article(文章列表)、banner(店鋪招牌+導航)、foot(店鋪尾部)、search(搜索)等】,第二個參數爲組件名,第三個參數爲寬度【950、750、630、310、190、auto(100%寬度)、x(沒有固定寬度)】。
也許這不是最好的命名方式,但隨着模塊更深入的開發和創新,將會出現更加明智、更加科學、更加有效的命名方式。
2、Css寫法
在測試模塊的時候,強烈推薦使用模塊化CSS來管理各個模塊,而在最後組裝成一個模板的時候,就需要把模塊化CSS拆開。這是因爲這裏存在着一個BUG,至少在SDK的1.17版本沒有被修復。BUG是這樣的:只要當有模塊化CSS的模塊數量大於2,就不能在debug的時候顯示調試信息。而且,存在另外一個BUG,那就是模塊化CSS裏面,不能涉及標籤的background-image的CSS樣式,否則就不能加載所有CSS。
這裏附帶幾個常用的CSS:
(1)、濾鏡(所有都支持):
opacity: 0.75 ; filter:progid:DXImageTransform.Microsoft.Alpha(opacity= 75 ); -ms-filter:progid:DXImageTransform.Microsoft.Alpha(opacity= 75 ); |
(2)、圓角(HTML5,ie9以下瀏覽器不支持):
border-radius: 4px ; -moz-border-radius: 4px ; -webkit-border-radius: 4px ; |
(3)、ie獨有的CSS標識:
下劃線:_border【ie6以下版本】
星號:*border【ie7以下版本】
星號加號:*+border【ie7】
[詳細內容:http://blog.163.com/koala8211@126/blog/static/411592532010452755415/ ]
在這裏不得不說的是,爲了買家的購物安全和快捷需求,爲了適應社會前進的方向,我們作爲前端開發er,不能總是爲了去兼容一些已經被淘汰的東西而浪費精力,而羈絆了我們去開發更完美的顯示效果。這也是督促中國消費者改變一成不變的慵懶習慣,積極的擁抱新科技、新成果。
3、模塊結構
一直推薦模塊的結構是這樣的:第一層爲box,添加一個沒有樣式的div,其目的就是爲了便於debug的時候計算模塊內容的高度(值得一提的是,如果debug的時候不能獲得高度,我們需要注意這個空白的div是否被添加),然後裏層添加兩個div,第一個是hd,第二個是bd,按照官方模塊的書寫方式,便於模塊的全局管理。
其主要的結構如下:
<div class = "J_TBox
box tshop-um tshop-um-image1_popup_750" <? echo $_MODULE_TOOLBAR ;?>> <div> <?php $title = $_MODULE [ 'title' ]; if ( $title != '' ) { echo '<div><h3><span>' . $title . '</span></h3></div>' ; } /*=============================================*/ $html = '<div></div>' ; echo $html ; ?> </div> </div> |
還有一點需要說明的就是,在$html裏,強烈推薦把所有的bd裏面的DOM都書寫在一起,最後再echo出來,而不是在中間echo,更不推薦在for循環、foreach循環裏echo。
三、開放接口
淘寶的開發接口比較少,但基本可以滿足SDK高級模板的開發。主要用到的接口是寶貝類、分類類兩類。
1、寶貝類接口
首先需要寶貝的id,寶貝id可以通過直接獲取id、間接通過分類、關鍵詞、排行3種方式獲得,其主要代碼爲:
【XML】
<param label= "◆-->寶貝的獲取方式" formType= "select" readonly= "false" description= "1" ptype= "number" name= "method" ><![CDATA[]]> <option value= "1" >█方式1-->自動獲取寶貝(默認)</option> <option value= "2" >▲方式2->根據分類獲取寶貝</option> <option value= "3" >★方式3->根據關鍵字獲取寶貝</option> <option value= "3" >▼方式4->手動選擇寶貝</option> </param> <param label= "█方式1-->自動獲取(無參數)" formType= "text" readonly= "false" description= "留空即可" ptype= "number" name= "method_1" ><![CDATA[]]></param> <param label= "▲方式2-->選擇分類(1個分類,如果選擇了多個分類優先讀取第1個分類)" formType= "categoryForm" readonly= "false" description= "choose" ptype= "category" name= "method_2" /> <param label= "★方式3-->輸入關鍵字(1個關鍵字)" formType= "textarea" readonly= "false" description= "1個關鍵字" ptype= "textarea" name= "method_3" ><![CDATA[關鍵字1]]></param> <param label= "▼方式4-->選擇寶貝(可以選擇多個寶貝)" formType= "itemForm" readonly= "false" description= "choose" ptype= "item" name= "method_4" /> <param label= "◆-->寶貝排序方式" formType= "select" readonly= "false" description= "select" ptype= "text" name= "sort" ><![CDATA[]]> <option value= "hotsell" >以熱銷寶貝升序排序(默認)</option> <option value= "_hotsell" >以熱銷寶貝降序排序</option> <option value= "ceofp" >以寶貝人氣升序排序</option> <option value= "_ceofp" >以寶貝人氣降序排序</option> <option value= "price" >以寶貝價格升序排序</option> <option value= "_price" >以寶貝價格降序排序</option> <option value= "newOn" >以最新上架寶貝升序排序</option> <option value= "_newOn" >以最新上架寶貝降序排序</option> <option value= "HotKeep" >以熱門收藏升序排序</option> <option value= "_HotKeep" >以熱門收藏降序排序</option> </param> <param label= "◆-->寶貝的數量" formType= "text" readonly= "false" description= "大於0的數值,最多20" ptype= "number" name= "num" ><![CDATA[8]]></param> <param label= "◆-->寶貝的計數單位" formType= "text" readonly= "false" description= "比如:個/件/箱/張/片/筆等" ptype= "text" name= "unit" ><![CDATA[筆]]></param> |
【php】
$method = $_MODULE [ 'method' ]; //寶貝獲取方式,1=自動,2=分類,3=關鍵字,4=手動,5=半自動 $method_1 = $_MODULE [ 'method_1' ]; $method_2 = $_MODULE [ 'method_2' ]; $method_3 = $_MODULE [ 'method_3' ]; $method_4 = $_MODULE [ 'method_4' ]; $method_5 = $_MODULE [ 'method_5' ]; $sort = $_MODULE [ 'sort' ]; //寶貝排序方式 $num = $_MODULE [ 'num' ]; //寶貝的數量 // function ids( $items ) { $k =0; foreach ( $items as $item ) { $ids [ $k ]= $item ->id; $k ++; } return $ids ; } // if ( $method ==1) //自動 { $items = $itemManager ->queryByKeyword( '
' , $sort , $num ); $ids =ids( $items ); } else if ( $method ==2) { $category =json_decode( $method_2 ); if ( count ( $category )==0) //沒有選擇分類 { $items = $itemManager ->queryByKeyword( '
' , $sort , $num ); $ids =ids( $items ); } else //選擇了分類 { $cat_ids = array (); // $items = $itemManager-> queryByCategory ($categoryId,"hotsell",10);/ foreach ( $category as $jsonObject ) { $category_1 = $shopCategoryManager ->queryById( $jsonObject ->{rid}); // echo 'id1='.$category_1->id; // echo '<br>'; $cat_ids []= $category_1 ->id; $subcategory = explode ( "," , $jsonObject ->{childIds}); foreach ( $subcategory as $subcategoryid ) { $category_2 = $shopCategoryManager ->queryById( $subcategoryid ); // echo 'id2='.$category_2->id; // echo '<br>'; $cat_ids []= $category_2 ->id; } } // $k=count($cat_ids)-1; $cat_id = $cat_ids [0]; $items = $itemManager ->
queryByCategory ( $cat_id , $sort , $num ); $ids =ids( $items ); // var_dump($cat_ids); } } else if ( $method ==3) //關鍵字 { $words =trim( $method_3 ); $items = $itemManager ->queryByKeyword( $words , $sort , $num ); $ids =ids( $items ); } else if ( $method ==4) //手動 { $ids = $method_4 ; } |
在獲得寶貝id之後,可以循環ids獲得各個id而讀取寶貝相關信息,其主要代碼爲
foreach ( $ids as $key => $value ) { $item = $itemManager ->queryById( $value ); //查詢寶貝 $link = $uriManager ->detailURI( $item ); //寶貝的鏈接 $price = $item ->price; //寶貝的價格 $name = $item ->title; //寶貝的標題 $sold = $item ->soldCount; //寶貝的銷量 $collected = $item ->collectedCount
; //寶貝的收藏量 $pic = $item ->getPicUrl(160); //寶貝圖片【有40、60、80、100、120、160、220、310、620】 } |
2、分類類接口
分類的獲取和寶貝類似,其主要代碼如下:
【XML】
<param label= "獲取分類方式" formType= "select" readonly= "false" description= "選擇獲取分類方式" ptype= "number" name= "method" ><![CDATA[]]> <option value= "0" >自動獲取分類(默認/建議)</option> <option value= "1" >手動選擇分類</option> </param> |
【PHP】
if ( $_MODULE [ 'method' ]==0) //auto自動獲取所有分類 { //1級分類 $category_arr = $shopCategoryManager ->queryAll(); foreach ( $category_arr as $shopCategory ) { $name1 = $shopCategory ->name; $href1 = $uriManager ->shopCategoryURI( $shopCategory ); //2級分類 $subcategory_arr = $shopCategoryManager ->querySubCategories( $shopCategory ->id); foreach ( $subcategory_arr as $shopCategory ) { $name2 = $shopCategory ->name; $href2 = $uriManager ->shopCategoryURI( $shopCategory ); } } } else //1===>手動分類 { //1級分類 $category_arr =json_decode( $_MODULE [ 'hand' ]); foreach ( $category_arr as $jsonObject ) { $category_1 = $shopCategoryManager ->queryById( $jsonObject ->{rid}); $name1 = $category_1 ->name; $href1 = $uriManager ->shopCategoryURI( $category_1 ); //2級分類 $subcategory_arr = explode ( "," , $jsonObject ->{childIds}); foreach ( $subcategory_arr as $subcategoryid ) { $category_2 = $shopCategoryManager ->queryById( $subcategoryid ); $name2 = $category_2 ->name; $href2 = $uriManager ->shopCategoryURI( $category_2 ); } } } |
3、其他接口
(1)、店鋪收藏:
$link_fav = $uriManager ->favoriteLink(); |
(2)、店鋪首頁:
$pageLinks = $shopManager ->getShopPageLinks(); $link_home = $pageLinks [0]->href; |
(3)、寶貝收藏【未開放】:
|
(4)、掌櫃說【未開放】:
|
(5)、旺旺客服【半開放】
//客服分流 $link_wangwang = 'http://amos.im.alisoft.com/getcid.aw?v=2&uid=' . $id . '&site=cntaobao&s=2&groupid=0&charset=utf-8' ; //客服不分流 $link_wangwang = 'http://www.taobao.com/webww/ww.php?ver=3&touid=' . $id . '&siteid=cntaobao&status=2&charset=utf-8' ; |
(6)、購物車【未】
http: //cart.taobao.com/my_cart.htm |
(7)、我的訂單【未】
http: //trade.taobao.com/trade/itemlist/list_bought_items.htm |