tag 产品内容列表

更新时间：2020-08-13 23:36:37 作者：米拓建站

## 概述：

当tag标签的action参数值为`product.list`时，可循环调用产品模块内容在当前栏目（产品模块）列表页展示。

【注意】
- 产品模块内容可参考“[内容管理](https://doc.metinfo.cn/metinfo/content/content_166_1.html "内容管理")”进行设置。
- 其他页面可通过[“指定栏目的内容列表list标签”](https://doc.metinfo.cn/mb/mbtag/65.html "“指定栏目的内容列表list标签”")调用产品模块的内容列表。

## 使用范围：
仅在模板文件`product.php`中调用，调取当前产品栏目的数据。

## 类型：
数据标签，用于调用数据的标签
## 语法：

<tag action="product.list" cid=""num="">
        <a href="{$v.url}" title="{$v.title}">{$v._title}</a>
    </tag>

【说明】
- tag标签中对应的参数及选项值可参考下面的“参数说明”；
- tag标签中的数据内容，可通过$v数组及对应的字段获取，具体可参考下方的“$v数组”。

## 标签原理：

tag标签是数据的集合，数据类型类似js的数组，通过action参数传入值不同来获取不同的数据，当action传参为`product.list`时，便可获得产品模块的内容列表。
tag标签的语法和js中的for函数类似，在tag标签的内部书写待渲染的html标签，$v为每个循环变量的别名，包含了每条内容的数据。
	
**tag标签：**

<tag action="product.list" cid="" num="">
        <a href="{$v.url}" title="{$v.title}">{$v._title}</a>//通过$v数组调用内容数据
    </tag>

**for函数：**

for(i=0;i<list.length;i++){
    document.write('<a href="'+list[i][‘url]+'" title="'+list[i]['title]+'">'+list[i]['_title]+'</a>'
    );
    }

总结：tag标签是后台返回数据的集合，类似于数组，在传入指定参数后会返回内容数据，在内部编写html代码，并使用$v变量来获取每个内容的数据，这样我们就可以得到一段动态的包含内容的html代码了。

## 参数说明：

tag标签，可通过传入不同的参数值，来调用对应的内容，以下为产品模块内容列表（`product.list`）标签对应的参数选项值：

|参数名|是否必填|默认值|说明|
|:----    |:-------    |:---|:---|
|action|是 |null|指定调用的方法(product.list)
|num|是|默认为父级栏目或者系统设置的显示条数，此处应手动传入$c['met_product_list']——该变量的值可在可视化网站后台【[当前页设置](https://doc.metinfo.cn/metinfo/style/style573.html "当前页设置")】中自定义设置【列表显示条数】|列表页每页大显示条数
|cid|否|$data['classnow']（当前列表页栏目id）|列表页栏目id|

## $v数组：

tag标签是一个数据的集合，当`action="product.list"`调用产品模块内容列表时，tag标签内部循环需指定$v数组为循环变量的别名，从而调用更多的内容数据。
### 调用语法：{$v.字段名称}

例如：

<tag action="product.list" num="$c['met_product_list']">
    <a href="{$v.url}" title="{$v.title}">{$v._title}</a> //调用内容名称及对应的内容详情页链接。
    </tag>

### $v数组中包含的字段：

| 名称  | 含义  |
| ------------ | ------------ |
|  id | 内容ID  |
| title  | 内容标题  |
| _title  | 带自定义样式的内容标题  |
|class1|所属一级栏目ID|
|class2|所属二级栏目ID|
|class3|所属三级栏目ID|
|keywords|关键词|
|description|简短描述|
|content|详情内容|
|content1|详情内容2|
|content2|详情内容3|
|content3|详情内容4|
|content4|详情内容5|
|imgurl|封面图片路径|
|displayimgs|展示图片路径，返回一个数组|
|video|产品展示视频（video的html）|
|price|商品价格（开启了商城模式时才有数据）|
|stock|商品库存（开启了商城模式时才有数据）|
|sales|商品销量（开启了商城模式时才有数据）|
|para|产品参数，返回一个数组|
|com_ok|是否为推荐列表，1为推荐0为没有推荐|
|top_ok|是否为置顶列表，1为置顶0为没有置顶|
|hits|点击次数|
|updatetime|更新时间|
|addtime|发布时间|
|url|自定义的链接地址（链接至）|
| sub  |  用于判断数组长度|
| _index  |  当前内容的下标，从0开始|
| _first  |  用于判断是否为第一个|
| _last  |  用于判断是否为后一个|

## 示例：
### 如何调用当前栏目（产品模块）的内容列表
**场景案例：**产品模块列表页，按栏目调用对应的内容列表，显示内容标题、详情页链接、封面图片的缩略图、产品参数、所有展示图片。

**模板代码：**

<ul class="met-pager-ajax">// 内容列表用ul、li标签的格式，可根据自己需求修改;列表的父元素必须加上类名met-pager-ajax，这是与列表分页按钮功能相关的
    <tag action="product.list" num="$c['met_product_list']">// 内容列表标签
    // $v包含了每条内容的所有数据，相当于一个数组，可以通过{$v.字段名}的方式来渲染内容数据
    <li>
        <img src="{$v.imgurl|thumb:$c['met_productimg_x'],$c['met_productimg_y']}" title="{$v.title}" alt="图片关键词">//$v.imgurl为封面图地址
    //thumb为缩略图功能（请看文档https://doc.metinfo.cn/mb/mbtag/96.html ）
    //$c['met_productimg_x']和$c['met_productimg_y']为产品模块列表页内容列表缩略图的宽和高（请看文档https://doc.metinfo.cn/mb/mbtag/78.html）
        <div>
           <list data="$v['displayimgs']"  name='$img'>// $v['displayimgs']为该条内容的所有展示图片，相当于一个数组，可通过<list></list>标签渲染（如果不需要调用可不写），具体参考list标签文档
          <img src="{$img.img}" alt="{$v.title}">//{$img.img}为每张展示图片的路径
          </list>
        </div>
            <a href="{$v.url}" title="{$v.title}">{$v._title}</a>
            <list data="$v['para']" name='$para'>// $v['para']为该条内容的参数，相当于一个数组，可通过<list></list>标签渲染（如果不需要调用可不写），具体参考list标签文档
                <if value="$para['value']">// 通过<if></if>标签判断参数有值的情况才显示参数内容，if用法具体参考if标签文档
                <p>{$para.name}:{$para.value}</p>// $para.name为参数名称，$para.value为参数值
            </if>
           </list>
    </li>
    </tag>
    </ul>
    // 列表分页代码：列表下面加上以下固定格式的代码，即可渲染pc端和手机端的分页按钮，实现列表翻页的功能
    // pc端分页按钮
    <div class='m-t-20 text-xs-center hidden-sm-down' m-type="nosysdata">
        <pager type="$c['met_product_page']"/>// 分页标签，参考pager 列表页分页标签文档
    </div>
    // 手机端分页按钮
    <div class="met-pager-ajax-link hidden-md-up" data-plugin="appear" data-animate="slide-bottom" data-repeat="false" m-type="nosysdata">
         <button type="button" class="btn btn-primary btn-block btn-squared ladda-button" id="met-pager-btn" data-plugin="ladda" data-style="slide-left" data-url="" data-page="1">
              <i class="icon wb-chevron-down m-r-5" aria-hidden="true"></i>
          </button>
    </div>

【注意】
- 列表页必须添加分页，电脑端与手机端分页功能实现方式不同；
- 实际编写时请去掉注释文字。

**前台页面输出HTML：**

<ul class="met-pager-ajax">
    <li>
    <img src="../upload/201801/1515574798.jpg" alt="Lenovo/联想一体机电脑I5-6400T" title="图片关键词">
    <div>
        <img src="../upload/201801/1515574797.jpg" alt="Lenovo/联想一体机电脑I5-6400T" title="图片关键词">
    <img src="../upload/201801/1515574798.jpg" alt="Lenovo/联想一体机电脑I5-6400T" title="图片关键词">
        // 实际可能有多张，此处示例只列出两张图片
    </div>
    <a href="../product/showproduct.php?id=3" title="Lenovo/联想一体机电脑I5-6400T"><span>Lenovo/联想一体机电脑I5-6400T</span></a>
    <p>台式机类型 : 游戏影音</p>
    <p>屏幕尺寸 : 23英寸</p>// 实际可能有多条参数，此处示例只列出两条参数
    </li>
    <li>
    <img src="../upload/201801/1515574797.jpg" title="华为HUAWEI平板 M3" alt="图片关键词">
    <div>
        <img src="../upload/201801/1515574897.jpg" title=华为HUAWEI平板 M3" alt="图片关键词">
    <img src="../upload/201801/1515574898.jpg" title="华为HUAWEI平板 M3" alt="图片关键词">
        // 实际可能有多张，此处示例只列出两张图片
    </div>
    <a href="../product/showproduct.php?id=4" title="华为HUAWEI平板 M3"><span>华为HUAWEI平板 M3</span></a>
    <p>屏幕类型 : IPS屏</p>
    <p>屏幕尺寸 : 8.4英寸</p>// 实际可能有多条参数，此处示例只列出两条参数
    </li>
    // 实际可能有多条，此处示例只列出两条内容
    </ul>
    <div class="m-t-20 text-xs-center hidden-sm-down" m-type="nosysdata">
        <div class="met_pager">
            <span class="PreSpan editable-click" met-id="17" met-table="language" met-field="value">上一页</span>
            <a href="../product/product.php?class1=3&pageset=1" class="Ahover" title="链接关键词">1</a>
            <a href="../product/index.php?class1=3&page=2&pageset=1" title="链接关键词">2</a>
            <a href="../product/index.php?class1=3&page=2&pageset=1" class="NextA" title="链接关键词">下一页</a>
            <span class="PageTextk">转至第</span>
            <input type="text" id="metPageT" data-pageurl="index.php?lang=cn&class1=3&page=|&pageset=1|2" value="1">
            <input type="button" id="metPageB" value="页">
        </div>
    </div>
    <div class="met-pager-ajax-link hidden-md-up" data-plugin="appear" data-animate="slide-bottom" data-repeat="false" m-type="nosysdata">
        <button type="button" class="btn btn-primary btn-block btn-squared ladda-button" id="met-pager-btn" data-plugin="ladda" data-style="slide-left" data-url="" data-page="1"> <i class="icon wb-chevron-down m-r-5" aria-hidden="true"></i>
        </button>
    </div>
    
    > **产品参数的调用**
    
    列表页调用产品参数
        
        <tag action='product.list' num="$c[met_product_list]">
        	<list data="$v['para']"  name='$para'>
        		<if value="$para[value]">
        			<p>{$para.name}:{$para.value}</p>
        		</if>
        	</list>
        </tag>
    详情页调用产品参数
    
        
        <list data="$data['para']" name="$para" num='100'>
        	<if value="$para[value]">
        		<li class="p-x-0 p-r-15">
        			<span>{$para.name}：{$para.value}</span>
        		</li>
        	</if>
        </list>
    	// 类型为链接类型的参数这样渲染
    	<list data="$data['para_url']" name="$s" num='100'>
    	<if value="$s['value']">
    	<a href="{$s.value}" class="btn btn-danger linkbtn m-r-20 m-t-10" target="_blank" title="链接关键词">{$s.name}</a>
    	</if>
    	</list>
    首页调用产品参数
    
        
        <tag action="list" cid="3" para="true">
        	<list data="$v['para']" name="$para">
        		<span class="pricing-currency">{$para.name}:{$para.value}</span>
        	</list>
        </tag>
        
    	
    产品详情页图片数组的调用
    
        <list data="$data['displayimgs']" name="$s">
        	<img src="{$s.img}"  alt='{$s.title}' />
        </list>

### 产品模块列表页如何调用子栏目列表
**场景案例：**产品模块列表页，调用子栏目列表，显示子栏目名称、栏目图片的缩略图、栏目页链接，注意：如果没有子栏目则显示当前栏目内容列表。
需设置列表页展示方式为“显示当前栏目下级栏目列表”，具体可参考“[产品列表页当前页设置](https://doc.metinfo.cn/metinfo/style/style573.html "产品列表页当前页设置")”

**模板代码：**

<if value="$c['met_product_page'] && $data['sub'] && !$_M['form']['search']">// 判断当前页设置【显示当前栏目下级栏目列表】（$c['met_product_page']）且当前页有子栏目（$data['sub']），且当前页的搜索参数$_M['form']['search']为空，满足这些条件才执行以下代码
    <ul class="met-pager-ajax">// 栏目列表用ul、li标签的格式，可根据自己需求修改;列表的父元素必须加上类名met-pager-ajax，这是与列表分页按钮功能相关的
    <tag action='category' cid="$data['classnow']" type="son">
          <li>
        <img src="{$v.columnimg|thumb:$c['met_productimg_x'],$c['met_productimg_y']}" title="{$v.name}" alt="图片关键词">//$v.columnimg为栏目图片地址
    //thumb为缩略图功能（请看文档https://doc.metinfo.cn/mb/mbtag/96.html ）
    //$c['met_productimg_x']和$c['met_productimg_y']为产品模块列表页内容列表缩略图的宽和高（请看文档https://doc.metinfo.cn/mb/mbtag/78.html）
            <a href="{$m.url}" title="{$m.name}">{$v.name}</a>
          </li>
    </tag>//调用当前页栏目的子栏目列表，具体请参考栏目信息文档
    </ul>
    <else/>
        <ul class="met-pager-ajax">
    <tag action='product.list' num="$c['met_product_list']">
        // 此处渲染内容列表的html请参考上一个场景案例的代码
    </tag>// 调用当前页栏目的内容列表
    </ul>
    </if>
    // 列表分页代码：列表下面加上以下固定格式的代码，即可渲染pc端和手机端的分页按钮，实现列表翻页的功能
    // pc端分页按钮
    <div class='m-t-20 text-xs-center hidden-sm-down' m-type="nosysdata">
        <pager type="$c['met_product_page']" />// 分页标签，参考pager 列表页分页标签文档
    </div>
    // 手机端分页按钮
    <div class="met-pager-ajax-link hidden-md-up" m-type="nosysdata" data-plugin="appear" data-animate="slide-bottom" data-repeat="false">
        <button type="button" class="btn btn-primary btn-block btn-squared ladda-button" id="met-pager-btn" data-plugin="ladda" data-style="slide-left" data-url="" data-page="1">
            <i class="icon wb-chevron-down m-r-5" aria-hidden="true"></i>    </button>
    </div>
	
【注意】
- 列表页必须添加分页，电脑端与手机端分页功能实现方式不同；
- 实际编写时请去掉注释文字。

**前台页面输出HTML：**

//如果当前有子栏目且页面搜索参数为空的，则html如下，如果不满足这些条件，则输出的html与当前页内容列表的HTML一致，请参考上一个场景案例的前台输出的html。
    // 子栏目列表html
    <ul class="met-pager-ajax">
    <li>
    <img src="../upload/201801/1515574798.jpg" alt="电脑&平板" title="图片关键词">
    <a href="../product/product.php?class2=4" title="电脑&平板">电脑&平板</a>
    </li>	
    <li>
    <img src="../upload/201801/1515574797.jpg" title="手机" alt="图片关键词">
    <div>
    <a href="../product/product.php?class2=5" title="手机">手机</a>
    </li>
    // 实际可能有多个子栏目，此处示例只列出两个子栏目
    </ul>
    // 以下为页面显示子栏目列表时，分页按钮的html
    <div class="m-t-20 text-xs-center hidden-sm-down" m-type="nosysdata">
        //（显示子栏目列表时，分页按钮列表为空）
    </div>
    <div class="met-pager-ajax-link hidden-md-up" data-plugin="appear" data-animate="slide-bottom" data-repeat="false" m-type="nosysdata">
        <button type="button" class="btn btn-primary btn-block btn-squared ladda-button" id="met-pager-btn" data-plugin="ladda" data-style="slide-left" data-url="" data-page="1"> <i class="icon wb-chevron-down m-r-5" aria-hidden="true"></i>
        </button>
    </div>
	
### 产品模块详情页如何调用产品参数、展示图片
**场景案例：**在产品模块详情页展示产品参数、展示图片的缩略图。
产品模块详情页产品参数变量为$data['para']、$data['para_url']（链接类型的参数+【在线询价】链接），展示图片变量为$data['displayimgs']，请参考文档【当前页面参数$data】https://doc.metinfo.cn/mb/mbtag/76.html

**模板代码：**

<ul>// 产品参数列表用ul、li标签的格式，可根据自己需求修改
    <list data="$data['para']" name="$para">// $data['para']为当前页产品的参数，相当于一个数组，可通过<list></list>标签渲染，具体参考list标签文档
    <if value="$para[value]">// 通过<if></if>标签判断参数有值的情况才显示参数信息，if用法具体参考if标签文档
        <li>
        <span>{$para.name}：{$para.value}</span>// $para.name为参数名称，$para.value为参数值
         </li>
        </if>
        </list>
    </ul>
	<if value="$data['para_url']">//$data['para_url']为链接类型的参数+【在线询价】链接（需要到反馈模块栏目的系统设置中开启），相当于一个数组，可通过<list></list>标签渲染，具体参考list标签文档
	<div class='m-t-10'>
		<list data="$data['para_url']" name="$s" num='100'>
		<if value="$s['value']">// 通过<if></if>标签判断参数有值的情况才显示参数信息，if用法具体参考if标签文档
		<a href="{$s.value}" class="btn btn-danger m-r-20" target="_blank" title="链接关键词">{$s.name}</a>// $para.name为参数名称，$para.value为参数值
		</if>
		</list>
	</div>
	</if>
    <div>
    <list data="$data['displayimgs']" name='$img'>// $data['displayimgs']为当前页内容的所有展示图片，相当于一个数组，可通过<list></list>标签渲染，具体参考list标签文档
    <img src="{$img.img|thumb:$c['met_productdetail_x'],$c['met_productdetail_y']}" alt="{$data.title}">//{$img.img}为每张展示图片的路径
    //thumb为缩略图功能（请看文档https://doc.metinfo.cn/mb/mbtag/96.html ）
    //$c['met_productdetail_x']和$c['met_productdetail_y']为产品模块详情页展示图片缩略图的宽和高（请看文档https://doc.metinfo.cn/mb/mbtag/78.html）
     </list>
    </div>
	
【注意】实际编写时请去掉注释文字。

**前台页面输出HTML：**

<ul>
    <li>
            <span>台式机类型 ：</span><span>游戏影音</span>
    </li>
    // 实际可能有多个参数，此处示例只列出一个参数，所以只有一个li标签
    </ul>
	<div class='m-t-10'>
		<a href="https://www.jd.com" class="btn btn-danger m-r-20" target="_blank" title="链接关键词">京东商城</a>
		<a href="https://www.taobao.com" class="btn btn-danger m-r-20" target="_blank" title="链接关键词">淘宝店铺</a>
		// 实际可能有多个链接类型的参数，此处示例只列出2个参数
		<a href="http://demo.metinfo.cn/feedback/index.php?fdtitle=%E5%8D%8E%E4%B8%BAHUAWEI+AKG+H300%E8%80%B3%E6%9C%BA&lang=cn" class="btn btn-danger m-r-20" target="_blank">在线询价</a>//如果反馈模块的系统设置中开启了在线询价功能，则该链接会显示
	</div>
    <div>
    <img src="../upload/201801/1515574797.jpg" alt="Lenovo/联想一体机电脑I5-6400T" title="图片关键词">
    <img src="../upload/201801/1515574798.jpg" alt="Lenovo/联想一体机电脑I5-6400T" title="图片关键词">
    // 实际可能有多张，此处示例只列出两张图片
    </div>
	
### 首页如何调用产品参数
**场景案例：**首页调用指定栏目（产品模块）的内容列表，显示内容标题、产品参数。
调用指定栏目的内容列表，需先获取栏目id：可参考教程“[如何获取栏目ID？](https://doc.metinfo.cn/mb/faq/102.html "如何获取栏目ID？")”

**模板代码：**

<ul>// 信息列表用ul、li标签的格式，可根据自己需求修改
    <tag action="list" cid="4" para="true" >// 调用指定栏目的内容列表，para参数设置为true可调用内容列表的详情参数
    // 将获取到栏目id填入到cid参数中，cid参数的值可以是模板中自定义的变量（https://doc.metinfo.cn/mb/mb/28.html ），例如$lang[‘index_product_id’]
    // $v包含了每条信息的所有数据，相当于一个数组，可以通过{$v.字段名}的方式来渲染信息数据
    <li>
            <a href="{$v.url}" title="{$v.title}">{$v._title}</a>
        <list data="$v['para']" name='$para'>// $v['para']为该条信息的参数，相当于一个数组，可通过<list></list>标签渲染（如果不需要调用可不写），具体参考list标签文档
            <if value="$para['value']">// 通过<if></if>标签判断参数有值的情况才显示参数信息，if用法具体参考if标签文档
            <p>{$para.name}:{$para.value}</p>// $para.name为参数名称，$para.value为参数值
            </if>
        </list>
    </li>
    </tag>
    </ul>

【注意】实际编写时请去掉注释文字。

**前台页面输出HTML：**

<ul>
    <li>
    <a href="product/showproduct.php?id=3" 华为HUAWEI平板 M3" title="链接关键词"><span>"华为HUAWEI平板 M3</span></a>
            <p>台式机类型 ：游戏影音</p>// 实际可能有多条，此处示例只列出一条参数
    </li>
    // 实际可能有多条，此处示例只列出一条信息，所以只有一个li标签
    </ul>