一、全局设置
全局设置,可以把全局模块加到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
|