【22】淘宝sdk——入门实战之宝贝推荐模块

我们先在控制台上建好这个模块，再在index.php中写入这个模块，这个模块也是950的，所以我们就和前面的写在一起，同时，我在这里加了一个我们以前写的搜索模块，放在它们中间。

index.php：

<!-- 950通栏0 -->
<div class="layout grid-m">
    <div class="main_01_modules J_TRegion">
        <?php $main_01_modules = array(
                array('id' => 'kefu01', domId => "kefu_01"), // 客服模块
                array('shortname' => 'shop.searchInShopHead', 'version' => '1.0-common', domId => "sousuo_02"),//750系统模块 搜索店内宝贝头部版
                array('id' => 'baobei950', domId => "baobei950_01"), // 宝贝推荐
             );
         echo include_modules('main_01_modules', $main_01_modules);//引号里是坑名，后面是变量名
        ?>
    </div>

</div>

 宝贝推荐模块的下的baobei950.php：

<div class="box J_TBox" <?php echo $_MODULE_TOOLBAR?>>
    <div class="baobei_tit" style="display:<? echo $_MODULE[tit_show]?>;">
	    <div class="tit">
		    <span><? echo $_MODULE[tit]?></span>
			<em><? echo $_MODULE[shuoming]?></em>
		</div>
		<div class="baobei_main">
		    <ul>
			       <?php 
                        $ids = explode(',',$_MODULE['baobei']);  
                        $items = $itemManager->queryByIds($ids,$_MODULE['sort']); 
                        for ($i = 0; $i <10; $i++) { 
                            if($items[$i]->exist) {
                                $itemUrl = $uriManager->detailURI($items[$i]); 
                                $itemPicUrl = $items[$i]->getPicUrl(160);
                                $itemTitle = $items[$i]->title;
                                $itemPrice = $items[$i]->price;
								$itemsoldCount = $items[$i]->soldCount;
                            } else{  // 兼容性处理 
                                $n = 4+$i;
                                $itemUrl = "http://www.taobao.com"; 
                                $itemPicUrl = "assets/baobei/1.jpg";
                                $itemTitle = "这里是示例文字";
                                $itemPrice = "0.00";
								$itemsoldCount = "0";
                            }
							echo'<li class="baobei_tu">';
                            echo'<div class="baobei_pic"><a href="'.$itemUrl.'" target="_blank"><img src="'.$itemPicUrl.'" alt="'.$itemTitle.'"></a></div>';
                            echo'<div class="baobei_wenzi">';
                            echo'<p><a href="'.$itemUrl.'" target="_blank">'.$itemTitle.'</a></p>';
                            echo'<b>RMB:<strong>￥'.$itemPrice.'</strong>元</b>';
							echo'<span>已售:<strong>'.$itemsoldCount.'</strong>件</span>';
                            echo'</div>';
							echo'</li>';
                        }
                    ?>
			       <!--<li class="baobei_tu">
				   <div class="baobei_pic"><a href="#" target="_blank"><img /></a></div>
				   <div class="baobei_wenzi">
				        <p>你好啊 我们都是新片上架</p>
						<b>RMB:<strong> 888 </strong>元</b>
						<span>已售:<strong> 555 </strong>件</span>
				   </div>
				   </li>-->
			</ul>
		
		</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>baobei950</id>
    <name>宝贝950</name>
    <file>baobei950.php</file>
    <thumbnail>assets/images/index.png</thumbnail>
    <description>宝贝950-各种推荐</description>
    <requiredCache>true</requiredCache>
    <parameters>
        <param label="请选择" formType="select" readonly="false" description="默认为显示标题栏" ptype="text" name="tit_show">
            <option selected="selected" value="block">显示标题栏</option>
            <option value="none">隐藏标题栏</option>
        </param>
        <param label="自定义标题名称" formType="text" readonly="false" description="请输入自定义标题名称" ptype="text" name="tit">
            掌柜推荐宝贝
        </param>
        <param label="自定义标题名称" formType="text" readonly="false" description="请输入自定义标题名称" ptype="text" name="shuoming">
            公告：有什么说什么
        </param>
        <param label="选择10个宝贝" formType="itemForm" readonly="false" description="点击此处添加产品" ptype="item" name="baobei">
        </param>
        <param label="选择排行方式" formType="select" readonly="false" description="选择排列方式" ptype="text" name="sort">
            <option value="ceofp">人气宝贝升序排序</option>
            <option value="_ceofp">人气宝贝降序排序</option>
            <option selected="selected" value="hotsell">热销宝贝升序排序</option>
            <option value="_hotsell">热销宝贝降序排序</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>
    </parameters>
</module>

css：

/*baobei950*/
.tit{background:#FFFFFF;border-bottom:2px solid #FF8808;height:40px;overflow:hidden;width:950px;color:#4B4B4B;}
.tit span{color:#585858;display:inline;float:left;font-size:16px;font-weight:bold;line-height:48px;margin-left:18px;}
.tit em{display:inline;float:right;line-height:48px;margin-right:15px;padding-left:25px;}
.baobei_main{background:#FFFFFF; border-top:#DCDCDC solid 1px;border-left:#DCDCDC solid 1px;height: auto;margin-top: 15px;overflow: hidden;width: 950px;}
.baobei_tu{border-bottom:#E4E4E4 solid 1px;border-right: 1px solid #E4E4E4;float: left;height: 220px;width: 189px;color: #434343;float: left;text-align: center;}
.baobei_pic{text-align: center;display: block;vertical-align: inherit;}
.baobei_pic a{display: block;height: 160px;margin-left: auto;margin-right: auto;margin-top: 8px;overflow: hidden;width: 160px;}
.baobei_wenzi{margin-top: 6px;overflow:hidden;}
.baobei_wenzi p{line-height:20px;}
.baobei_wenzi b{float: left;font-weight: 100;margin-left: 13px;}
.baobei_wenzi b strong,.baobei_wenzi span strong{color: #D8072F;font-weight: 100;}
.baobei_wenzi span{float: right;font-weight: 100;margin-right: 13px;}

 这下，我们就可以去看看效果了：

所用到的素材：

呵呵，这个也弄好了