实现ecshop首页增加楼层直达效果分析
2016-09-07 22:02 来源：www.chinab4c.com 作者：ecshop专家
实现ecshop首页增加楼层直达效果分析，效果如下图所示：
效果说明：当未达到楼层时，导航部分隐藏，到达楼层时，导航显示。点击楼层，会直接到达楼层。 代码开始： 首页顶部需要引入jQuery。 XHTML <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> 在body标签的下方 增加 下列代码： PHP <ul id="nav" class="navigation">
<!-- {if $category_goods} -->
<!--{foreach from=$category_goods item=ginfo name=gcur}-->
<li onClick="gotofloor(this);" data-slide="{$ginfo.sort_order}"><a class="f{$ginfo.sort_order}" href="javascript:void(0);">{$ginfo.keywords}</a></li>
<!-- {/foreach} -->
<!-- {/if} -->
</ul>
以上代码不可以直接使用，需要按自己的模板处理。 楼层代码如下： PHP <div class="j_FloorItem floor-item" id="f{$ginfo.sort_order}" data-slide="{$ginfo.sort_order}">
<div class="fp-lazyload-con j_LazyloadCon" style="height: 452px;">
<div class="module">
<div class="fp-floor fp-floor-{$ginfo.sort_order}"><!--fp-floor-nvz 某个楼层的楼层色块图-->
<div class="floor-content">
<div class="grid-col-191 floor-show">
<ul class="floor-show-top floor-title floor-single-classify">
<li>
<a href="{$ginfo.url}">
<span class="floor-icon qc-iconfont">
{$ginfo.floor_style}
</span>
<span class="floor-key">{$ginfo.cat_name}</span>
</a>
</li>
<li>
<!--More-->
<!--
<b class="floor-title-separator"></b>
</li>
<li>
<a href="">
<span class="floor-icon fp-iconfont"></span>
<span class="floor-key">名称</span>
</a>
</li>
-->
<!--More-->
</ul>
<div class="floor-show-middle floor-brand-slide j_FloorBrandSlide">
<div style="width: 192px; height: 202px;" class="brand-slide-content">
<div>
<a title="{$ginfo.cat_name}" href="javascript:void(0);"><img style="width: 192px" src="{$ginfo.cat_pic}" title="{$ginfo.cat_name}" alt="{$ginfo.cat_name}"></a>
</div>
</div>
</div>
<div class="floor-show-bottom">
<ul class="floor-label-list">
<li>
<!--{foreach from=$ginfo.catgoods item=gc name=gcr}-->
<!--{if $smarty.foreach.gcr.iteration < 3}-->
<a href="{$gc.url}">{$gc.name}</a>
<!--{/if}-->
<!--{/foreach}-->
</li>
<li>
<!--{foreach from=$ginfo.catgoods item=gc name=gcrn}-->
<!--{if $smarty.foreach.gcrn.iteration > 2 && $smarty.foreach.gcrn.iteration < 5}-->
<a href="{$gc.url}">{$gc.name}</a>
<!--{/if}-->
<!--{/foreach}-->
</li>
<li>
<!--{foreach from=$ginfo.catgoods item=gc name=gcrnn}-->
<!--{if $smarty.foreach.gcrnn.iteration > 4 && $smarty.foreach.gcrnn.iteration < 7}-->
<a href="{$gc.url}">{$gc.name}</a>
<!--{/if}-->
<!--{/foreach}-->
</li>
<li>
<!--{foreach from=$ginfo.catgoods item=gc name=gcrnnn}-->
<!--{if $smarty.foreach.gcrnnn.iteration > 6 && $smarty.foreach.gcrnnn.iteration < 9}-->
<a href="{$gc.url}">{$gc.name}</a>
<!--{/if}-->
<!--{/foreach}-->
</li>
</ul>
</div>
</div>
<div class="floor-banner-container">
<div class="grid-col-400">
<?php
$GLOBALS['smarty']->assign('floor_bigimg',get_adv('首页-楼层ID'.$GLOBALS['smarty']->_var['ginfo']['id'].'-方大图',1));
?>
{if $floor_bigimg}
{$floor_bigimg}
{else}
请在供货商后台增加广告位：首页-楼层ID<?php echo $GLOBALS['smarty']->_var['ginfo']['id']; ?>-方大图 大小为400*422
{/if}
</div>
<div class="grid-col-199">
<!--{foreach from=$ginfo.goods item=bestgoods name=goodscur}-->
<!--{if $smarty.foreach.goodscur.iteration > 0 && $smarty.foreach.goodscur.iteration <3}-->
<div class="{if $smarty.foreach.goodscur.iteration eq 1}grid-row-255{else}grid-row-166{/if} floor-banner j_ActLink" href="{$bestgoods.url}">
<!--{if $bestgoods.ye eq 0}-->
<div style="width: 146px;margin: 0 auto;">
<a title="{$bestgoods.name}" href="{$bestgoods.url}" target="_blank"><img class="j_ActImg j_NeedHD" src="{$bestgoods.thumb}" alt="{$bestgoods.name}" height=146" width="146"></a>
</div>
<div style="width: 186px;margin: 0 auto;">
<div style="height: 36px;">
<a title="{$bestgoods.name}" href="{$bestgoods.url}" target="_blank" style="color:#000">{$bestgoods.name}</a>
</div>
<div style="width: 186px;margin: 0px auto;height: 25px;">
<div style="font-size: 14px;color: #CC0000;width: 90px;float: left;font-weight: 700">
<!-- {if $bestgoods.promote_price neq ""} -->
{$bestgoods.promote_price}
<!-- {else}-->
{$bestgoods.shop_price}
<!--{/if}-->
</div>
<div style="float: right;height: 18px;line-height: 16px;background: red;padding: 5px;color: #fff;margin-top: -8px;font-weight: 700;">
立即购商品
</div>
</div>
</div>
<!--{else}-->
<img class="j_ActImg j_NeedHD" src="no_goods.jpg" alt="未传商品" height="210" width="199"/>
<!--{/if}-->
</div>
<!--{/if}-->
<!--{/foreach}-->
</div>
<div class="grid-col-199 hidden-in-990">
<!--{foreach from=$ginfo.goods item=bestgoods name=goodscur}-->
<!--{if $smarty.foreach.goodscur.iteration > 2 && $smarty.foreach.goodscur.iteration <5}-->
<div class="{if $smarty.foreach.goodscur.iteration eq 1}grid-row-255{else}grid-row-166{/if} floor-banner j_ActLink" href="{$bestgoods.url}">
<!--{if $bestgoods.ye eq 0}-->
<div style="width: 146px;margin: 0 auto;">
<a title="{$bestgoods.name}" href="{$bestgoods.url}" target="_blank"><img class="j_ActImg j_NeedHD" src="{$bestgoods.thumb}" alt="{$bestgoods.name}" height=146" width="146"></a>
</div>
<div style="width: 186px;margin: 0 auto;">
<div style="height: 36px;">
<a title="{$bestgoods.name}" href="{$bestgoods.url}" target="_blank" style="color:#000">{$bestgoods.name}</a>
</div>
<div style="width: 186px;margin: 0px auto;height: 25px;">
<div style="font-size: 14px;color: #CC0000;width: 90px;float: left;font-weight: 700">
<!-- {if $bestgoods.promote_price neq ""} -->
{$bestgoods.promote_price}
<!-- {else}-->
{$bestgoods.shop_price}
<!--{/if}-->
</div>
<div style="float: right;height: 18px;line-height: 16px;background: red;padding: 5px;color: #fff;margin-top: -8px;font-weight: 700;">
立即购商品
</div>
</div>
</div>
<!--{else}-->
<img class="j_ActImg j_NeedHD" src="no_goods.jpg" alt="未传商品" height="210" width="199"/>
<!--{/if}-->
</div>
<!--{/if}-->
<!--{/foreach}-->
</div>
<div class="grid-col-199">
<!--{foreach from=$ginfo.yuegou_goods item=bestgoods name=goodscur}-->
<div class="{if $smarty.foreach.goodscur.iteration eq 1}grid-row-255{else}grid-row-166{/if} floor-banner j_ActLink" href="{$bestgoods.url}">
<!--{if $bestgoods.ye eq 0}-->
<div style="width: 146px;margin: 0 auto;">
<a title="{$bestgoods.name}" href="{$bestgoods.url}" target="_blank"><img class="j_ActImg j_NeedHD" src="{$bestgoods.thumb}" alt="{$bestgoods.name}" height=146" width="146"></a>
</div>
<div style="width: 186px;margin: 0 auto;">
<div style="height: 36px;">
<a title="{$bestgoods.name}" href="{$bestgoods.url}" target="_blank" style="color:#000">{$bestgoods.name}</a>
</div>
<div style="width: 186px;margin: 0px auto;height: 25px;">
<div style="font-size: 14px;color: #CC0000;width: 90px;float: left;font-weight: 700">
<!-- {if $bestgoods.promote_price neq ""} -->
{$bestgoods.promote_price}
<!-- {else}-->
{$bestgoods.shop_price}
<!--{/if}-->
</div>
<div style="float: right;height: 18px;line-height: 16px;background: #14B343;padding: 5px;color: #FFF;margin-top: -8px;font-weight: 700;">
约购商品
</div>
</div>
</div>
<!--{else}-->
<img class="j_ActImg j_NeedHD" src="no_goods.jpg" alt="未传商品" height="210" width="199"/>
<!--{/if}-->
</div>
<!--{/foreach}-->
</div>
</div>
</div>
</div>
</div>
</div>
{if $ginfo.is_longads eq 1}
<!--广告条-->
<div class="fp-lazyload-con j_LazyloadCon" style="height: 120px;"><div class="floor-ad-banner">
<ins style="display:inline-block;padding:0;margin:0;width:1190px;height:90px;*zoom:1;*display:inline"><div style="overflow:hidden;display:inline-block;position:relative;width:1190px;height:90px;*display:inline;*zoom:1;font:12px/1.5 tahoma,'Hiragino Sans GB','microsoft yahei',sans-serif;">
<?php
$GLOBALS['smarty']->assign('floor_img',get_adv('首页-楼层F'.$GLOBALS['smarty']->_var['ginfo']['sort_order'].'-长图',1));
?>
{if $floor_img}
{$floor_img}
{else}
请在供货商后台增加广告位：首页-楼层F<?php echo $GLOBALS['smarty']->_var['ginfo']['sort_order']; ?>-长图 大小为1190*90
{/if}
</div></div>
</div>
<!--广告条-->
{/if}
</div>
以上代码不可以直接使用，需要按自己的模板处理。 |
最近更新
常用插件
- ecshop2.7.1邮件发送插件
ecshop2.7.1邮件发送插件:该插件主要的开发思想是源于ecshop短信发送系统...
- ecshop没登陆情况下订单查
ecshop没登陆情况下订单查询插件，主要是针对ecshop在没有登陆的情况下...
- ecshop2.7.2生成虚拟订单2.
以前我们开发过ecshop下的虚拟订单，就是客户在访问的时候，会自动生...
- ecshop二次开发商品购买增
图片1香...
- ecshop最小购买数量控制插
ecshop最小购买数量控制插件，这个插件主要是为我们提供一个十分方便...
ecshop热门问答
ecshop热门资料
ecshop审核代理
ecshop工具
ecshop缝纫机
ecshop批发方案
ecshop介绍
ecshopJmail
ecshopfeed
ecshophelphelphelp
ecshop开发网站
ecshop分行
ecshop热线
ecshop鉴定
ecshop彩妆
zencart电子商务
ecshop短信发送
ecshop搞活动设置
ecshop密码重置
ecshopsina
ecshop角色
ecshop版权
ecshop商品优惠价格
ecshop开发人
ecshop资料
ecshop恶意
ecshop最新订单
ecshop批量上传
ecshop文章模块
ecshop技术支持
ecshop仿板
ecshopBaiduspider