得推企业网站模板开发教程之产品信息
产品信息有两个文件:
product/list.html 列表页
product/show.html 详情页
一、list.html 列表页
相关标签:
$cat 当前分类 {$cat.cname} $children 分类列表 {foreach item=c from=$children} $list 文章列表 {foreach item=c from=$list} 分页数据 只有大于1页的时候显示 {$pagelist}
Tabs制作
<div class="tabs-border"> {foreach item=c from=$children} <a href="/index.php?m=article&a=list&catid={$c.catid}" class="tabs-border-item {if get('catid') eq $c.catid}tabs-border-active{/if}">{$c.cname}</a> {/foreach} </div>
二、show.html 详情页
相关标签
$data 文章详情 $data 结构 id title imgurl description price content
相关源码:
list.html
<!DOCTYPE html> <html> {include file="head.html"} <body> <div class="header"> <div class="header-back"></div> <div class="header-title">{$cat.cname}</div> </div> <div class="header-row"></div> <div class="main-body"> {if $children} <div class="tabs-border"> {foreach item=c from=$children} <a href="/index.php?m=article&a=list&catid={$c.catid}" class="tabs-border-item {if get('catid') eq $c.catid}tabs-border-active{/if}">{$c.cname}</a> {/foreach} </div> {/if} <div class="pd-10 bg-fff"> {foreach item=c from=$list} <a href="/index.php?m=article&a=show&id={$c.id}" class="flexlist-item pointer"> <img class="flexlist-img" src="{$c.imgurl}.100x100.jpg" /> <div class="flex-1"> <div class="flexlist-title">{$c.title}</div> <div class="cl-money">¥{$c.price}</div> <div class="flexlist-desc">{$c.description}</div> </div> </a> {/foreach} </div> {$pagelist} </div> {assign var="ftnav" value="product"} {include file="ftnav.html"} {include file="footer.html"} </body> </html>
show.html
<!DOCTYPE html> <html> {include file="head.html"} <link href="/plugin/swiper/css/swiper.min.css" rel="stylesheet" /> <body> <div class="header"> <div class="header-back"></div> <div class="header-title">产品详情</div> </div> <div class="header-row"></div> <div class="main-body mgb-10"> {if !$imgsata} <img src="{$data.imgurl}" class="d-img" /> {else} <div class="swiper-container" style="width: 100%;" id="indexFlash"> <div class="swiper-wrapper" > {foreach item=c from=$imgsdata} <div class="swiper-slide"> <img class="imgWidth" src="{$c.trueimgurl}" /> </div> {/foreach} </div> <div class="swiper-pagination flex flex-jc-center"></div> </div> {/if} <div class="row-box mgb-5"> <div class="d-title">{$data.title}</div> <div class="flex"> <div class="cl2 mgr-5">价格</div> <div class="cl-money">{$data.price}</div> </div> </div> <div class="pd-10 bg-fff"> <div class="d-content"> {$data.content} </div> </div> </div> {include file="footer.html"} <?php wx_jssdk();?> <script type="text/javascript"> wxshare_title="{$data.title}"; {if $data.imgurl} wxshare_imgUrl="{$data.imgurl|images_site}.100x100.jpg"; {/if} </script> <script> setTimeout(function(){ $.get("/index.php?m=article&a=addclick&id={$data.id}&ajax=1") },3000); </script> <script src="/plugin/swiper/js/swiper.min.js"></script> <script> $(function(){ if($("#indexFlash .swiper-slide").length>0){ var flash = new Swiper("#indexFlash", { pagination: { el: '.swiper-pagination', } }); }else{ $("#indexFlash").hide(); } }) </script> </body> </html>