淘宝SDK高级模板开发阶段总结

一、全局设置

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

global模块的具体代码：

<div class="J_TBox global_cloudcome" <? echo $_MODULE_TOOLBAR;?>>

<div class="setting" style="height:40px;">

<center>★请不要在其他地方添加此模块!全局设置参数,保存后刷新页面,如有不明请咨询我们.★</center>

<?

//全局参数处理与输出

?>

</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>

还有一点需要说明的就是，在$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）、宝贝收藏【未开放】：

$link_baby='http://favorite.taobao.com/popup/add_collection.htm?id='.$baby_id';

（4）、掌柜说【未开放】：

$link_shuo='http://shuo.taobao.com/microshop/front.htm?follow=true&userId='.$_user->id;

（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

淘宝SDK高级模板开发阶段总结相关推荐

【4】熟悉淘宝sdk开发平台
当我们点击桌面上的启动淘宝设计师SDK进去控制台后,界面还是很清晰的,顶部有6大栏目: [1]首页--------展示最新设计过的模板和设计新模板的快捷方式 [2]我的模板--------展示设计的模 ...
【1】淘宝sdk装修入门引言
淘宝sdk开发者要具备的一些要求: [1]photoshop图像处理能力 [2]html常用标签的基础知识 [3]html+css布局的基础知识 [4]简单的php输出语句 [5]对淘宝装修的一些基本 ...
淘宝sdk学习笔记【淘宝装修】------索引
教程适用于v1.1.7版以下 [1]淘宝sdk装修入门引言 [2]认识淘宝sdk模板 [3]淘宝sdk的下载和安装 [4]熟悉淘宝sdk开发平台 [5]淘宝sdk本地安装后的目录结构介绍 [6]网店模 ...
【9】了解淘宝sdk引入布局模块
上一节我们说了下淘宝提供给我们可布局的地方: 这一节我们说下淘宝sdk布局模块. 在我们开发网店的时候一般一个网店组成是:页面>框架>模块(>的意思的包含):这样我们就知道我们一般开 ...
视频教程-总监设计师一夫老师亲授photoshop淘宝美工就业初级阶段到阶段视频课程-Photoshop
总监设计师一夫老师亲授photoshop淘宝美工就业初级阶段到阶段视频课程中国电商服务联盟品牌讲师.中国国际互联网节品牌顾问. 12年视觉设计经验,5年视觉讲师经验.电商品牌视觉策划讲师 .曾任知名 ...
PHP实现调用淘宝SDK开放接口返回天猫或淘宝商品详情
在淘宝开发平台申请到app key及app secret并在开放平台上的app tools在线测试成功以后,就可以在自己的项目中使用淘宝SDK来调用淘宝或天猫的商品详情了,包括标题.图片.价格等等所有 ...
总监设计师一夫老师亲授photoshop淘宝美工就业初级阶段到阶段视频课程-王诚-专题视频课程...
总监设计师一夫老师亲授photoshop淘宝美工就业初级阶段到阶段视频课程-785人已学习课程介绍从初级小白到中设计师之路: 一路实战美工案例教学,让你掌握淘宝美工各方面的技能技巧 ...
【13】淘宝sdk——入门实战之header.php制作（一）
在写这课前,我会写的比较详细,到后面就不会说的这么详细了,都是一笔带过,不浪费口水,后面没有看懂的,可以回来这里在看看,或是在下面留言说明下,呵呵... 这节课,我们讲的是最简单的header介绍,等 ...
基于Android的淘宝网手机客户端开发见解(配完整视频教程讲解)
淘宝网手机客户端是一个基于Android进行应用的项目,通过该客户端实现了注册功能.登陆.分页展示商品列表.能够对商品按名称进行模糊查询.能够对商品进行管理.能够对商品按价格排序.可以查看商品详细信息 ...

淘宝SDK高级模板开发阶段总结

淘宝SDK高级模板开发阶段总结相关推荐

最新文章

热门文章