【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> <?php echo '<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;}
都弄好了,现在我们看下效果图吧:
=====================================================================================================
素材:
好了这些才算全弄好了