【24】淘宝sdk——入门实战之左右悬浮模块

这里的悬浮模块我们写在footer中，当然在写进去前，我们还要去控制台创建这2个模块

<div class="layout grid-m">
<div class="foot_modules J_TRegion">
<?php $foot_modules = array(
array('id' => 'fudong01', domId => "fudong_01"), // 左侧浮动导航
array('id' => 'fudong02', domId => "fudong_02"), // 右侧浮动客服
array('id' => 'footer', domId => "footer_01"), // 950页面底部模块,这里也可以做个通栏效果，在上篇中讲了
);
echo include_modules('foot_modules', $foot_modules);//引号里是坑名，后面是变量名
?>
</div>
</div>

fudong01.php文件：

<div class="fudong01 J_TBox" <?php echo $_MODULE_TOOLBAR ?>>

<div class="J_TWidget infudong01" data-widget-type="Tabs" data-widget-config="{
'effect': 'none',
'autoplay': false,
'triggerType': 'click',
'circular': true}">
<div class="nav">
<ul class="ks-switchable-nav">
<li class="ks-active"><strong><span>+</span><br/>点击此处展开</strong></li>
<li class="ks-none">⊙关闭悬浮</li>
</ul>
</div>
<div class="ks-switchable-content">
<div class="block">
<div class="tt">分类导航</div>
<div class="dh">
<div class="bd">

<?php
$json = $_MODULE['fudong_3'];
/*通过PHP函数解析json数据生成JSON数组*/
$jsonObject = json_decode($json);
for($n = 0; $n <4; $n++){
echo '<div class="inhd classp'.$n.'">';

$shopCategory = $shopCategoryManager->queryById($jsonObject[$n]->{rid});// 根据json对象获取rid属性的属性值即得到一级类

$big_url  = $uriManager->shopCategoryURI($shopCategory); //临时记录大分类URL,无子分类时用
$big_name = $shopCategory->name; //临时记录大分类名,无子分类的时候显示
if($shopCategory){
echo '<a href="'.$big_url.'" target="'.$_MODULE[fudong_2].'">'.$big_name.'</a>';
}else{
echo '<a href="#" target="'.$_MODULE[fudong_2].'">请选择大分类'.$n.'</a>';
}
echo '</div>';

?>
<span class='J_TWidget hidden' data-widget-type='Popup' data-widget-config="{
'trigger':'.classp<? echo $n;?>',
'align':{
'node':'.classp<? echo $n;?>',
'offset':[5,0],
'points':['tr','tl']
}
}">
<span class="inbd" style="display:block;">
<ul>

<?php
/*二级类目是通过','分隔的字符串（一定注意是半角逗号字符）*/
$array = explode(",",$jsonObject[$n]->{childIds});
foreach($array as $id){
$subShopCategory =  $shopCategoryManager->queryById($id);

$url = $uriManager->shopCategoryURI($shopCategory);//子分类链接
$name = $subShopCategory->name;//子分类名称
if($subShopCategory){
echo '<li><a href="' .$url. '" target="'.$_MODULE[fudong_2].'">'.$name.'</a></li>';
}else{
for($c = 0; $c <6; $c++){
echo '<li><a href="#" target="'.$_MODULE[fudong_2].'">请选择小分类'.$c.'</a></li>';
}
}
}
?>
</ul>
<div class="clear"></div></span></span>
<?php
}
?>

</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 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 class="pic">
<?php
if ( $_MODULE[fudong_0] ) {
echo '<a href="'.$_MODULE[fudong_0].'" target="'.$_MODULE[fudong_2].'"><img src="'.$_MODULE[fudong_1].'"></a>';
}else{
echo '<a class="J_TokenSign"  href="'.$uriManager->favoriteLink().'" target="'.$_MODULE[fudong_2].'"><img src="'.$_MODULE[fudong_1].'"></a>';
}
?>
</div>
<div class="tp"><a href="#">▲TOP</a></div>
</div>
</div>
<div class="none"></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>fudong01</id>
<name>左侧浮动导航</name>
<file>fudong01.php</file>
<thumbnail>assets/images/index.png</thumbnail>
<description>左侧浮动导航</description>
<requiredCache>true</requiredCache>
<parameters>

<param label="图片地址┏" formType="text" readonly="false" description="请输入图片地址" ptype="text" name="fudong_1">
assets/images/kefu/sc.gif
</param>
<param label="点击图片打开链接┗" formType="text" readonly="false" description="不用填写，默认为收藏本店链接。" ptype="text" name="fudong_0">

</param>

<param label="选择四个大分类" formType="categoryForm" readonly="false" description="点击此处添加分类" ptype="category" name="fudong_3"></param>

<param label="请选择链接打开方式" formType="select" readonly="false" description="默认为新窗口打开" ptype="text" name="fudong_2">
<option selected="selected" value="_blank">_blank</option>
<option value="_parent">_parent</option>
<option value="_self">_self</option>
<option value="_top">_top</option>
</param>

</parameters>
</module>

fudong02.php：

<div class="fudong02 J_TBox" <?php echo $_MODULE_TOOLBAR ?>>

<div class="J_TWidget infudong02" data-widget-type="Tabs" data-widget-config="{
'effect': 'none',
'autoplay': false,
'triggerType': 'click',
'circular': true}">
<ul class="ks-switchable-nav">
<li class="ks-active"><strong><span>+</span><br/>点击此处展开</strong></li>
<li class="ks-none">关闭悬浮⊙</li>
</ul>
<div class="ks-switchable-content">
<div class="block">
<div class="tt">客服中心</div>
<div class="ww">
<div class="hd">售前咨询</div>
<div class="bd">
<?php
$wwid = explode("|",$_MODULE['qzz36_1_0']);
$name = explode("|",$_MODULE['qzz36_1_1']);
for ($i=0;$i<count($wwid);$i++) {
if($_MODULE['qzz36_1_2']==1){
echo '<div class="wwid0">'.$uriManager->supportTag($wwid[$i],"点击这里给我发消息",$_MODULE['qzz36_1_2'],$_MODULE['qzz36_1_3']).'</div>';
}else{
echo '<div class="wwid">'.$name[$i].''.$uriManager->supportTag($wwid[$i],"点击这里给我发消息",$_MODULE['qzz36_1_2'],$_MODULE['qzz36_1_3']).'</div>';
}
}
?>
</div>

<div class="hd">售后服务</div>
<div class="bd">
<?php
$wwid = explode("|",$_MODULE['qzz36_2_0']);
$name = explode("|",$_MODULE['qzz36_2_1']);
for ($i=0;$i<count($wwid);$i++) {
if($_MODULE['qzz36_2_2']==1){
echo '<div class="wwid0">'.$uriManager->supportTag($wwid[$i],"点击这里给我发消息",$_MODULE['qzz36_2_2'],$_MODULE['qzz36_2_3']).'</div>';
}else{
echo '<div class="wwid">'.$name[$i].''.$uriManager->supportTag($wwid[$i],"点击这里给我发消息",$_MODULE['qzz36_2_2'],$_MODULE['qzz36_2_3']).'</div>';
}
}
?>
</div>

<div class="hd">工作时间</div>
<div class="bd">
<p><? echo $_MODULE[qzz36_0]?></p>
<p><? echo $_MODULE[qzz36_1]?></p>
</div>

<div class="tp"><a href="#">▲TOP</a></div>
</div>
</div>
<div class="none"></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>fudong02</id>
<name>右侧浮动客服</name>
<file>fudong02.php</file>
<thumbnail>assets/images/index.png</thumbnail>
<description>右侧浮动客服</description>
<requiredCache>true</requiredCache>
<parameters>

<param label="◆售前客服旺旺风格┏" formType="select" readonly="false" description="请选择" ptype="number" name="qzz36_1_2">
<option value="1">风格一</option>
<option selected="selected" value="2">风格二</option>
</param>
<param label="阿里旺旺账号ID┠" formType="textarea" readonly="false" description="多个，用|分隔" ptype="text" name="qzz36_1_0">
ww1|ww2|ww3|ww4|ww5|ww6
</param>
<param label="客服名字┠" formType="textarea" readonly="false" description="对应旺旺ID的昵称,用|分隔" ptype="text" name="qzz36_1_1">
客服0|客服1|客服2|客服3|客服4|客服6
</param>
<param label="是否需要E客服分流┗" formType="select" readonly="false" description="如果是E客服主号，请选择" ptype="text" name="qzz36_1_3">
<option selected="selected" value="false">不分流</option>
<option value="true">分流</option>
</param>

<param label="★售后服务旺旺风格┏" formType="select" readonly="false" description="请选择" ptype="number" name="qzz36_2_2">
<option value="1">风格一</option>
<option selected="selected" value="2">风格二</option>
</param>
<param label="阿里旺旺账号ID┠" formType="textarea" readonly="false" description="多个，用|分隔" ptype="text" name="qzz36_2_0">
ww1|ww2|ww3|ww4
</param>
<param label="客服名字┠" formType="textarea" readonly="false" description="对应旺旺ID的昵称,用|分隔" ptype="text" name="qzz36_2_1">
昵称0|昵称1|昵称2|昵称3
</param>
<param label="是否需要E客服分流┗" formType="select" readonly="false" description="如果是E客服主号，请选择" ptype="text" name="qzz36_2_3">
<option selected="selected" value="false">不分流</option>
<option value="true">分流</option>
</param>

<param label="请输入工作时间┏" formType="text" readonly="false" description="如：9:00AM—24:00PM" ptype="text" name="qzz36_0">
9:00AM—24:00PM
</param>
<param label="请输入文字提示┗" formType="text" readonly="false" description="请输入" ptype="text" name="qzz36_1">
请咨询亮灯旺旺
</param>

</parameters>
</module>

css样式：

/*[左悬浮]分类导购*/
.fudong01{width:122px;height:auto;font-size:12px;position:fixed;_position:absolute;z-index:9999;top:120px;left:2px;}
.infudong01 .nav .ks-switchable-nav li{width:24px;text-align:center;color:#fff;background:#ff8808;cursor:pointer;margin-right:98px;}
.infudong01 .nav .ks-switchable-nav li span{font-size:16px;}
.infudong01 .nav .ks-switchable-nav li.ks-none{width:115px;height:22px;line-height:22px;background:#EFEFEF;color:#4E4E4E;text-align:left;cursor:pointer;padding-left:5px;background:#fff;border:#999 solid 1px;border-bottom:0;margin-right:0;}
.infudong01 .nav .ks-switchable-nav li.ks-active{display:none;}
.infudong01 .ks-switchable-content{width:120px;background:#fff;border:#999 solid 1px;border-bottom:0;border-top:0;overflow:hidden;}
.infudong01 .ks-switchable-content .block{display:block;border-bottom:#4E4E4E solid 2px;}
.infudong01 .ks-switchable-content .block .tt{width:120px;height:32px;line-height:32px;text-align:center;background:#ff8808;font-weight:bold;font-size:14px;color:#EFEFEF;}

.infudong01 .ks-switchable-content .block .dh{width:110px;margin:0 5px;overflow:hidden;}
.infudong01 .ks-switchable-content .block .dh .bd{padding:5px 0;}
.infudong01 .ks-switchable-content .block .dh .bd .inhd{width:110px;height:28px;line-height:28px;border-bottom:#e6e6e6 solid 1px;text-align:center;}
.infudong01 .ks-switchable-content .block .dh .bd .inhd a{text-decoration:none;}
.infudong01 .ks-switchable-content .block .dh .bd span .inbd{width:122px;background:#EFEFEF;border:#999 solid 1px;border-left:0;display:block;padding:10px;}
.infudong01 .ks-switchable-content .block .dh .bd span .inbd ul{margin:0;display:block;}
.infudong01 .ks-switchable-content .block .dh .bd span .inbd ul li a{width:120px;line-height:26px;border-bottom:#fff solid 1px;display:block;text-align:center;}
.infudong01 .ks-switchable-content .block .dh .bd span .inbd ul li a:hover{width:120px;color:#ff8808;border-bottom:#fff solid 1px;display:block;}

.infudong01 .share{width:120px;clear:both;padding:5px 3px;height:74px;}
.infudong01 .share .sf{margin-top:7px;}
.infudong01 .pic{margin:0;padding:0;}

.infudong01 .ks-switchable-content .block .dh .tp{width:40px;text-align:center;margin:8px 0 0 36px;background-color:#e6e6e6;}
.infudong01 .ks-switchable-content .block .dh .tp a{color:#4E4E4E;display:block;text-decoration:none;}
.infudong01 .ks-switchable-content .none{display:none;}

/*[右悬浮]客户服务*/
.fudong02{width:122px;height:auto;font-size:12px;position:fixed;_position:absolute;z-index:9999;top:120px;right:2px;}
.infudong02 .ks-switchable-nav li{width:24px;text-align:center;color:#fff;background:#ff8808;cursor:pointer;margin-left:98px;}
.infudong02 .ks-switchable-nav li span{font-size:16px;}
.infudong02 .ks-switchable-nav li.ks-none{width:115px;height:22px;line-height:22px;background:#EFEFEF;color:#4E4E4E;text-align:right;cursor:pointer;padding-right:5px;background:#fff;border:#999 solid 1px;border-bottom:0;margin-left:0;}
.infudong02 .ks-switchable-nav li.ks-active{display:none;}
.infudong02 .ks-switchable-content{width:120px;background:#fff;border:#999 solid 1px;border-bottom:0;border-top:0;overflow:hidden;}
.infudong02 .ks-switchable-content .block{display:block;border-bottom:#4E4E4E solid 2px;}
.infudong02 .ks-switchable-content .block .tt{width:120px;height:32px;line-height:32px;text-align:center;background:#ff8808;font-weight:bold;font-size:14px;color:#EFEFEF;}
.infudong02 .ks-switchable-content .block .ww{width:108px;margin:0 4px;}
.infudong02 .ks-switchable-content .block .ww .hd{font-weight:bold;color:#4E4E4E;clear:both;margin-top:8px;border-bottom:#999 dashed 1px;}
.infudong02 .ks-switchable-content .block .ww .bd{padding:5px 0;}
.infudong02 .ks-switchable-content .block .ww .bd p{clear:both;}
.infudong02 .ks-switchable-content .block .ww .bd .wwid0{clear:both;margin:3px 0 0 20px;}
.infudong02 .ks-switchable-content .block .ww .bd .wwid{float:left;width:52px;height:29px;*height:22px;}
.infudong02 .ks-switchable-content .block .ww .tp{width:40px;text-align:center;margin:8px 0 0 40px;background-color:#e6e6e6;}
.infudong02 .ks-switchable-content .block .ww .tp a{color:#4E4E4E;display:block;text-decoration:none;}
.infudong02 .ks-switchable-content .none{display:none;}

效果图如下: