得推企业网站模板开发教程之产品信息
查看视频教程或者获取有关《得推企业网站模板开发教程》更多信息

产品信息有两个文件:

   product/list.html 列表页

   product/show.html 详情页

    image.png

 

一、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>