【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;}

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



所用到的素材：



呵呵，这个也弄好了