{ openzc:proattr }
proattr:产品属性调用,常用于产品详情页,也可与标签 { openzc:list }、{ openzc:prolist }嵌套使用
字段名称 | 说明 |
---|---|
[field:products_attributes_id/] | 产品属性ID |
[field:products_id/] | 产品ID |
[field:options_id/] | 属性项ID |
[field:options_values_id/] | 属性值ID |
[field:options_values_price/] | 属性值价格 |
[field:price_prefix/] | 价格前缀 |
[field:attributes_image/] | 属性图片 |
[field:options_values_name/] | 属性值名称 |
[field:products_options_values_image/] | 属性值图片 |
[field:options_values_final_price/] | 属性值价格字符串 |
参数名称 | 参数值 | 说明 |
---|---|---|
item | select|radio|text|checkbox|file|read | 属性表单类型 |
options_id | 1,2,3 | 属性项ID,多个用‘,’隔开 |
no_options_id | 1,4 | 不调用的属性项ID,多个用‘,’隔开 |
imgsizer | 100,100 | "products_image"图片裁剪尺寸 |
bgcolor | #000000 | 图片裁剪后的背景颜色 |
① 调用产品详情内容
产品页常用字段调用
Matrox G200 MMS
$299.99
<div class="row">
<!-- mobile product slider -->
<div class="tt-mobile-product-layout visible-xs">
<div class="tt-mobile-product-slider arrow-location-center slick-animated-show-js">
{openzc:mulimg imgsizer="375,469"}
<div><img src="[field:products_image_detail/]" alt=""></div>
{/openzc:mulimg}
</div>
</div>
<!-- /mobile product slider -->
<!--产品信息-->
<div class="container container-fluid-mobile">
<div class="row">
<div class="col-6 hidden-xs">
<div class="tt-product-vertical-layout">
<div class="tt-product-single-img">
<div>
<button class="tt-btn-zomm tt-top-right"><i class="icon-f-86"></i></button>
<img class="zoom-product" src='{openzc:proinfo field="products_image"/}' data-zoom-image="{openzc:proinfo field='products_image'/}" alt=""> </div>
</div>
<div class="tt-product-single-carousel-vertical">
<ul id="smallGallery" class="tt-slick-button-vertical slick-animated-show-js">
{openzc:mulimg imgsizer="81,101"}
<li><a class="{openzc:if $field['sort_index']==1}zoomGalleryActive{/openzc:if}" href="#" data-image="[field:products_image_detail_full/]" data-zoom-image="[field:products_image_detail_full/]"><img src="[field:products_image_detail/]" alt=""></a></li>
{/openzc:mulimg}
</ul>
</div>
</div>
</div>
<div class="col-6">
<div class="tt-product-single-info">
<h1 class="tt-title">{openzc:proinfo field="products_name"/}</h1>
<div class="tt-price"> <span class="new-price {openzc:proinfo field='sku_price_class'/}">{openzc:proinfo field="products_price"/}</span> </div>
{openzc:proinfo field="productPriceDiscount"/}
{openzc:if $products_info['productPriceDiscount']}
<div class="tt-wrapper">
<div class="tt-countdown_box_02">
<div class="tt-countdown_inner">
<div class="tt-countdown" data-date="{openzc:proinfo field='expires_date'/}" data-year="Yrs" data-month="Mths" data-week="Wk" data-day="Day" data-hour="Hrs" data-minute="Min" data-second="Sec"></div>
</div>
</div>
</div>
{/openzc:if}
<div class="tt-swatches-container">
<form action="{openzc:link name='FILENAME_PRODUCT_INFO' parameter='[action=>add_product]'/}" method="post">
<input type="hidden" name="securityToken" value="{openzc:field.securityToken/}"/>
<input type="hidden" name="products_id" value="{openzc:proinfo field='products_id'/}"/>
{openzc:proattr options_id="1"}
<div class="tt-wrapper">
<div class="tt-title-options">[field:options_name/]</div>
<div class="form-default">
<div class="form-group">
<select class="form-control" name="id[[field:options_id/]]">
{openzc:loopson}
<option value="[field:options_values_id/]">[field:options_values_name/]</option>
{/openzc:loopson}
</select>
</div>
</div>
</div>
{/openzc:proattr}
{openzc:proattr item="select,radio" no_options_id="1,2"}
<div class="tt-wrapper">
<div class="tt-title-options">[field:options_name/]</div>
<div class="form-default">
<div class="form-group">
<select class="form-control" name="id[[field:options_id/]]">
{openzc:loopson}
<option value="[field:options_values_id/]">[field:options_values_name/]</option>
{/openzc:loopson}
</select>
</div>
</div>
</div>
{/openzc:proattr}
{openzc:proattr options_id="2"}
<div class="tt-wrapper">
<div class="tt-title-options">[field:options_name/]:</div>
<ul class="tt-options-swatch options-large">
{openzc:loopson}
<li> <a class="openzc-btn" data-input-checked="[field:options_input_id/]" href="javascript:void(0);" data-tooltip="[field:options_values_name/]" data-tposition="top"> [field:options_values_name/] </a>
<input class="d-none" id="[field:options_input_id/]" type="radio" name="id[[field:options_id/]]" value="[field:options_values_id/]"/>
</li>
{/openzc:loopson}
</ul>
</div>
{/openzc:proattr}
<div class="tt-wrapper">
<div class="tt-row-custom-01">
<div class="col-item">
<div class="tt-input-counter style-01"> <span class="minus-btn"></span>
<input type="text" name="cart_quantity" value="1" size="5">
<span class="plus-btn"></span> </div>
</div>
</div>
<div class="clearfix mg-t-20">
<button type="submit" class="btn btn-primary btn-lg rounded-20 "><i class="icon-f-39"></i>ADD TO CART</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
② { openzc:proattr } & { openzc:prolist }嵌套使用
在产品列表中调用产品属性

Matrox G200 MMS
Memory =>
4 mb
8 mb
16 mb

Matrox G400 32MB
Memory =>
16 mb
32 mb

Microsoft IntelliMouse Pro

Microsoft Internet Keyboard PS/2

Microsoft IntelliMouse Explorer

Hewlett Packard LaserJet 1100Xi Linked
<!--{ openzc:mulimg } & { openzc:prolist }嵌套使用 -->
<div class="row">
{openzc:prolist cid="1" row="6" imgsizer="230,230"}
<div class="col-6 col-md-2 col-lg-2">
<!--产品主图-->
<div class="d-flex"><img class="mx-auto" style="max-width:100%" src="[field:products_image/]"/></div>
<div class="pb-2">[field:products_name/]</div>
<div class="d-flex">
<!--产品属性调用-->
{openzc:proattr options_id="4"}
[field:options_name/] =>
{openzc:loopson}
<span class="mr-2">[field:options_values_name/]</span>
{/openzc:loopson}
{/openzc:proattr}
</div>
</div>
{/openzc:prolist}
</div>