Matrox G200 MMS

          
<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: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>