Ajax getSKU事件 返回
获取产品属性SKU价格
可调用字段 参数说明
Ajax getSKU 代码格式
<!--getSKU代码格式--简要代码示例-->
...<code/>...
<!--{openzc:proinfo field='sku_price_class'/} SKU价格变化 DOM位置 -->
<div class="tt-price"> <span class="new-price {openzc:proinfo field='sku_price_class'/}">{openzc:proinfo field="products_price"/}</span> </div>
...<code/>...
{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">
<!--class="openzc-select" data-action="getSKU" data-options="产品ID:属性项ID"-->
<select class="form-control openzc-select" data-action="getSKU" data-options="[field:products_id/]:[field:options_id/]" 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}
- Model: MG200MMS
- Availability: 30 in Stock
Matrox G200 MMS
$299.99
Reinforcing its position as a multi-monitor trailblazer, Matrox Graphics Inc. has once again developed the most flexible and highly advanced solution in the industry. Introducing the new Matrox G200 M... ...
<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">
<div class="tt-add-info">
<ul>
<li><span>Model:</span> {openzc:proinfo field="products_model"/}</li>
{openzc:if $products_info['products_quantity']>0}
<li><span>Availability:</span> {openzc:proinfo field="products_quantity"/} in Stock</li>
{else}
<li><span>Availability:</span> Out Stock</li>
{/openzc:if}
</ul>
</div>
<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>
<div class="tt-review">
<div class="tt-rating"> {openzc:rating star='<i class="icon-star"></i>' half='<i class="icon-star-half"></i>' empty='<i class="icon-star-empty"></i>'/} </div>
<a class="product-page-gotocomments-js" href="#">({openzc:proinfo field="products_reviews_count"/} Customer Review)</a> </div>
<div class="tt-wrapper text-black-50"> {openzc:proinfo field="products_description_preview" desclen="200"/}... ... </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 openzc-select" data-action="getSKU" data-options="[field:products_id/]:[field:options_id/]" 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 openzc-select" data-action="getSKU" data-options="[field:products_id/]:[field:options_id/]" 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 class="col-item">
<button type="submit" class="btn btn-primary btn-lg rounded-20"><i class="icon-f-39"></i>ADD TO CART</button>
</div>
</div>
</div>
<div class="tt-wrapper">
<ul class="tt-list-btn">
<li><a class="btn-link openzc-btn" href="javascript:void(0);" data-action="addWishlist" data-id="{openzc:proinfo field='products_id'/}"><i class="icon-n-072"></i>ADD TO WISH LIST</a></li>
<li><a class="btn-link openzc-btn" href="javascript:void(0);" data-action="addCompare" data-id="{openzc:proinfo field='products_id'/}"><i class="icon-n-08"></i>ADD TO COMPARE</a></li>
</ul>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>