【20】淘宝sdk——入门实战之分类导航和店铺公告

有过了很久没有写了，现在淘宝sdk2.0都出来了，但是现在还是测试版，离正式版也进了，后面的我就简单点写，其实都是差不多的知识，注意看我的注释，嗨，本来是想慢慢的写，现在看来注定要烂尾了...

好了，我们开始上正题了，这次我们要做的是750的分类导航和190的店铺公告，其实这里的750分类导航不是很难，和前面做导航的一样的，主要还是在样式这块；190的店铺公告就更不难了，就是输出一个文本。

============================================================================================

首先：我们要先在控制台上创建这2个模块，再在index.php中写好布局（750&190分栏）和模块

不说废话了，上代码

<!-- 750&190分栏 -->
<div class="layout grid-m0s5"><div class="col-main"><div class="fenlei_modules main-wrap J_TRegion"><?php $fenlei_modules = array(array('id' => 'fenlei01', domId => "fenlei_01"), // 750分类导航);echo include_modules('fenlei_modules', $fenlei_modules);?></div></div><div class="gonggao_modules col-sub J_TRegion"><?php $gonggao_modules = array(array('id' => 'gonggao02', domId => "gonggao_02"), // 190店铺公告);echo include_modules('gonggao_modules', $gonggao_modules);?></div>
</div>

这里写好了，我们就开始写我们的750分类导航的模块了

打开系统给我们创建的模块fenlei_01.php，写上下面的代码

<div class="box J_TBox" <?php echo $_MODULE_TOOLBAR ?>><div class="fenlei"><div class="hd" style="display:<? echo $_MODULE[fenlei_0]?>;"><div class="left"><? echo $_MODULE[fenlei_1]?></div><div class="right"><a href="<?php echo $uriManager->searchURI(); ?>" target="_blank">查看全部分类>></a><a href="<?php echo $uriManager->searchURI(); ?>&orderType=_hotsell" target="_blank">按销量</a><a href="<?php echo $uriManager->searchURI(); ?>&orderType=_newOn" target="_blank">按新品</a><a href="<?php echo $uriManager->searchURI(); ?>&orderType=price" target="_blank">按价格</a><a href="<?php echo $uriManager->searchURI(); ?>&orderType=_hotkeep" target="_blank">按收藏</a></div></div><div class="infenlei"><?php$json = $_MODULE['fenlei_2'];/*通过PHP函数解析json数据生成JSON数组*/$jsonObject = json_decode($json);for($n = 0; $n <4; $n++){echo '<div class="bd">';echo '<ul>';$shopCategory = $shopCategoryManager->queryById($jsonObject[$n]->{rid});// 根据json对象获取rid属性的属性值即得到一级类$big_url  = $uriManager->shopCategoryURI($shopCategory); //临时记录大分类URL,无子分类时用$big_name = $shopCategory->name; //临时记录大分类名,无子分类的时候显示if($shopCategory){echo '<h4><a href="'.$big_url.'" target="_blank">'.$big_name.'</a></h4>';}else{echo '<h4><a href="#" target="_blank">选择大分类'.$n.'</a></h4>';}echo '<li>';/*二级类目是通过','分隔的字符串（一定注意是半角逗号字符）*/$array = explode(",",$jsonObject[$n]->{childIds});foreach($array as $id){$subShopCategory =  $shopCategoryManager->queryById($id);$url = $uriManager->shopCategoryURI($shopCategory);//子分类链接$name = $subShopCategory->name;//子分类名称if($subShopCategory){echo '<a href="'.$url.'" target="_blank">'.$name.'</a>|';}else{for($m = 0; $m <8; $m++){echo '<a href="#" target="_blank">选择小分类'.$m.'</a>|';}}}echo '</li>'; echo '</ul>'; echo '</div>';}?> </div>  </div>
</div>

再打开，module.xml写我们要的功能

<?xml version="1.0" encoding="GBK" standalone="yes"?>
<module xsi:noNamespaceSchemaLocation="http://www.cnblogs.com/../module.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"><id>fenlei01</id><name>分类导航</name><file>fenlei01.php</file><thumbnail>assets/images/index.png</thumbnail><description>分类导航</description><requiredCache>true</requiredCache><parameters><param label="请选择┏" formType="select" readonly="false" description="默认为隐藏" ptype="text" name="fenlei_0"><option selected="selected" value="block">显示标题栏</option><option value="none">隐藏标题栏</option></param><param label="自定义标题名称┗" formType="text" readonly="false" description="请输入自定义标题名称" ptype="text" name="fenlei_1">750分类导航标题</param>        <param label="选择四个大分类" formType="categoryForm" readonly="false" description="点击此处添加分类" ptype="category" name="fenlei_2"></param></parameters>
</module>

样式我们等下写，现在我们来写公告模块，
打开系统给我们创建的gonggao02.php

<div class="box J_TBox" <?php echo $_MODULE_TOOLBAR ?>><div class="gonggao02"><div class="top"><? echo $_MODULE[gonggao02_1]?></div>   <div class="ingonggao02"><div class="txt"><? echo $_MODULE[gonggao02_2]?></div><div class="share"><p>分享本店铺到：</p><?phpecho '<div class="jiathis clear">';echo '<dl>';echo '<dd class="sf s1"><form action="http://www.jiathis.com/send/?webid=taobao&url=http://shop'. $_shop->id .'.taobao.com&title='.$_shop->title.'" method="post" target="_blank"><input type="submit" value="" title="淘江湖"></form></dd>';echo '<dd class="sf s2"><form action="http://www.jiathis.com/send/?webid=tsina&url=http://shop'. $_shop->id .'.taobao.com&title='.$_shop->title.'" method="post" target="_blank"><input type="submit" value="" title="新浪微博"></form></dd>';echo '<dd class="sf s3"><form action="http://www.jiathis.com/send/?webid=tqq&url=http://shop'. $_shop->id .'.taobao.com&title='.$_shop->title.'" method="post" target="_blank"><input type="submit" value="" title="腾讯微博"></form></dd>';echo '<dd class="sf s4"><form action="http://www.jiathis.com/send/?webid=qzone&url=http://shop'. $_shop->id .'.taobao.com&title='.$_shop->title.'" method="post" target="_blank"><input type="submit" value="" title="QQ空间"></form></dd>';echo '<dd class="sf s5"><form action="http://www.jiathis.com/send/?webid=renren&url=http://shop'. $_shop->id .'.taobao.com&title='.$_shop->title.'" method="post" target="_blank"><input type="submit" value="" title="人人网"></form></dd>';echo '<dd class="sf s6"><form action="http://www.jiathis.com/send/?webid=kaixin001&url=http://shop'. $_shop->id .'.taobao.com&title='.$_shop->title.'" method="post" target="_blank"><input type="submit" value="" title="开心网"></form></dd>';echo '<dd class="sf s7"><form action="http://www.jiathis.com/send/?webid=t163&url=http://shop'. $_shop->id .'.taobao.com&title='.$_shop->title.'" method="post" target="_blank"><input type="submit" value="" title="网易微博"></form></dd>';echo '<dd class="sf s8"><form action="http://www.jiathis.com/send/?webid=tsohu&url=http://shop'. $_shop->id .'.taobao.com&title='.$_shop->title.'" method="post" target="_blank"><input type="submit" value="" title="搜狐微博"></form></dd>';echo '<dd class="sf s9"><form action="http://www.jiathis.com/send/?webid=douban&url=http://shop'. $_shop->id .'.taobao.com&title='.$_shop->title.'" method="post" target="_blank"><input type="submit" value="" title="豆瓣"></form></dd>';echo '<dd class="sf s10"><form action="http://www.jiathis.com/send/?webid=hi&url=http://shop'. $_shop->id .'.taobao.com&title='.$_shop->title.'" method="post" target="_blank"><input type="submit" value="" title="百度空间"></form></dd>';echo '<dd class="sf s11"><form action="http://www.jiathis.com/send/?webid=jiathis&url=http://shop'. $_shop->id .'.taobao.com&title='.$_shop->title.'" method="post" target="_blank"><input type="submit" value="" title="点击分享到更多"></form></dd>';echo '</dl>';echo '</div>';?></div></div></div></div>

现在我们写好了，就写功能吧，打开module.xml文件

<?xml version="1.0" encoding="GBK" standalone="yes"?>
<module xsi:noNamespaceSchemaLocation="http://www.cnblogs.com/../module.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"><id>gonggao02</id><name>网店公告</name><file>gonggao02.php</file><thumbnail>assets/images/index.png</thumbnail><description>网店公告</description><requiredCache>true</requiredCache><parameters><param label="自定义标题名称2┏" formType="text" readonly="false" description="请输入自定义标题名称2" ptype="text" name="gonggao02_1">店铺公告</param><param label="公告内容┗" formType="textarea" readonly="false" description="公告内容" ptype="text" name="gonggao02_2">欢迎您光临本店，祝您在本店购物愉快！本店商品全部实物拍摄，产品质量保障，请你在收到宝贝后，咨询检查，确认没有问题后签收。</param>        </parameters>
</module>

好了，这2个模块我们都写好了，最后我们来弄弄css吧，没有好看的样式怎么行呢，呵呵。

/*分类导航*/
.fenlei{width:100%;}
.fenlei .hd{width:748px;height:35px;line-height:35px; border:#e6e6e6 solid 1px;border-bottom:#ff8808 solid 3px;overflow: hidden;}
.fenlei .hd .left{float:left;font-size:14px;font-weight:bold;padding-left:10px;color:#ff8808;}
.fenlei .hd .right{float:right;padding-right:10px;font-size:13px;color:#999;}
.fenlei .hd .right a{margin-left:10px;}.infenlei {width:748px;border-right:#e6e6e6 solid 1px;border-left:#e6e6e6 solid 1px;border-top:#e6e6e6 solid 1px;overflow:hidden;background:#FFFFFF;}
.infenlei .bd{width:728px;border-bottom:#e6e6e6 solid 1px;padding:10px;color:#4E4E4E;}
.infenlei .bd ul h4{float:left;width:120px;height:30px;line-height:30px;background-color:#EFEFEF;text-align:center;font-size:13px;}
.infenlei .bd ul li{float:left;width:608px;height:30px;line-height:30px;overflow:hidden;}
.infenlei .bd ul li a{padding:0 5px;}/*[190]店铺公告*/
.gonggao02{width:100%;}
.gonggao02 .top{width:188px;height:35px;line-height:35px; border:#e6e6e6 solid 1px;border-bottom:#ff8808 solid 3px;overflow: hidden;font-size:14px;font-weight:bold;color:#ff8808;text-align:center;}
.ingonggao02 { width: 168px;height:183px; border: 1px solid #e6e6e6;margin-bottom:10px;color:#4E4E4E;padding:10px;}
.ingonggao02 .txt {border-bottom:#e6e6e6 solid 1px;margin-bottom:12px;padding-bottom:9px;}
.ingonggao02 .share {height:70px;width:140px;margin:0 auto;}
.ingonggao02 .share form {margin-top:5px;}/*jiathis分享图标代码*/
.jiathis dl dd {float: left;margin: 0;padding: 0;}
.jiathis .sf input {background: url(../images/gonggao/jiathis.gif) no-repeat 0 0 transparent;border: 0 none;cursor: pointer;height: 16px;margin-right: 5px;width: 16px;}
.jiathis .s1 input {background-position: 0 0;}
.jiathis .s2 input {background-position: 0 -23px;}
.jiathis .s3 input {background-position: 0 -46px;}
.jiathis .s4 input {background-position: 0 -69px;}
.jiathis .s5 input {background-position: 0 -92px;}
.jiathis .s6 input {background-position: 0 -115px;}
.jiathis .s7 input {background-position: 0 -138px;}
.jiathis .s8 input {background-position: 0 -161px;}
.jiathis .s9 input {background-position: 0 -184px;}
.jiathis .s10 input {background-position: 0 -207px;}
.jiathis .s11 input {background-position: 0 -230px;}

都弄好了，现在我们看下效果图吧：

=====================================================================================================

素材：

好了这些才算全弄好了

转载于:https://www.cnblogs.com/huige728/archive/2012/07/08/2581553.html

【20】淘宝sdk——入门实战之分类导航和店铺公告相关推荐

【13】淘宝sdk——入门实战之header.php制作（一）
在写这课前,我会写的比较详细,到后面就不会说的这么详细了,都是一笔带过,不浪费口水,后面没有看懂的,可以回来这里在看看,或是在下面留言说明下,呵呵... 这节课,我们讲的是最简单的header介绍,等 ...
[转]淘宝sdk——入门实战之header.php制作（二）
本文转自:http://www.cnblogs.com/huige728/archive/2012/05/15/2501532.html 在上一节中我们知道了怎么写一个简单的导航(自定义店招+系统店招 ...
【25】淘宝sdk——入门实战之宝贝详情页
宝贝详情页,我们用系统模块,注意我们一般情况下只要在detail_left.php和detail_right.php中写就可以了,不用在detail.php中写. detail_left.php页: ...
【24】淘宝sdk——入门实战之左右悬浮模块
这里的悬浮模块我们写在footer中,当然在写进去前,我们还要去控制台创建这2个模块 <div class="layout grid-m"><div class= ...
淘宝sdk学习笔记【淘宝装修】------索引
教程适用于v1.1.7版以下 [1]淘宝sdk装修入门引言 [2]认识淘宝sdk模板 [3]淘宝sdk的下载和安装 [4]熟悉淘宝sdk开发平台 [5]淘宝sdk本地安装后的目录结构介绍 [6]网店模 ...
【1】淘宝sdk装修入门引言
淘宝sdk开发者要具备的一些要求: [1]photoshop图像处理能力 [2]html常用标签的基础知识 [3]html+css布局的基础知识 [4]简单的php输出语句 [5]对淘宝装修的一些基本 ...
【9】了解淘宝sdk引入布局模块
上一节我们说了下淘宝提供给我们可布局的地方: 这一节我们说下淘宝sdk布局模块. 在我们开发网店的时候一般一个网店组成是:页面>框架>模块(>的意思的包含):这样我们就知道我们一般开 ...
淘宝新手入门视频教程哪里有？
虽然开淘宝店创业是很常见的方式,但是对于一些不了解互联网行业甚至不知道怎样操作电脑人来说,在网络上创业没有一个领路人是很难入门的,俗话说:师傅领进门,修行靠个人,我们淘宝创业也是需要先入门在扩展的,那 ...
PHP实现调用淘宝SDK开放接口返回天猫或淘宝商品详情
在淘宝开发平台申请到app key及app secret并在开放平台上的app tools在线测试成功以后,就可以在自己的项目中使用淘宝SDK来调用淘宝或天猫的商品详情了,包括标题.图片.价格等等所有 ...

【20】淘宝sdk——入门实战之分类导航和店铺公告

【20】淘宝sdk——入门实战之分类导航和店铺公告相关推荐

最新文章

热门文章