【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{100%;}
.fenlei .hd{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 {748px;border-right:#e6e6e6 solid 1px;border-left:#e6e6e6 solid 1px;border-top:#e6e6e6 solid 1px;overflow:hidden;background:#FFFFFF;}
.infenlei .bd{728px;border-bottom:#e6e6e6 solid 1px;padding:10px;color:#4E4E4E;}
.infenlei .bd ul h4{float:left;120px;height:30px;line-height:30px;background-color:#EFEFEF;text-align:center;font-size:13px;}
.infenlei .bd ul li{float:left;608px;height:30px;line-height:30px;overflow:hidden;}
.infenlei .bd ul li a{padding:0 5px;}


/*[190]店铺公告*/
.gonggao02{100%;}
.gonggao02 .top{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 {  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;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; 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;}

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

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

素材：

好了这些才算全弄好了