Thuộc tính của sản phẩm sẽ gồm 2 thuộc tính chính là màu và size, sẽ được gọi ra như sau:
{% set variableAttributes = product.variableAttributes %}
<div class="swatch-wrapper">
{% set color = variableAttributes['color'] %}
{% set flag=0 %}
{% if color is not null or color is not empty %}
{% set valuesColor = color.childValues %}
{% set numbC = (valuesColor | length) %}
{% if(valuesColor is not null and numbC>0) %}
{% set flag = flag + 1 %}
<div class="swatch-colo color req swatch" column="{{ color.column }}">
<span>Màu sắc</span>
<ul>
{% for val in valuesColor %}
{% set arrColor = [] %}
{% set arrColor = arrColor|merge({ (color.column): val.Id }) %}
{% set returnImg = {'return':'image'} %}
{% set img = product.attrValueImage(arrColor) %}
{% set pIdsAttrStr = product.attrValueImage(arrColor,true) | json_encode() %}
{% set pIdsAttrStr = pIdsAttrStr | replace({'[': '', ']': ''}) %}
<li class="swatch-element available {{ (numbC==1) ? 'active' : '' }}"
title="{{ val.name }}" value="{{ val.id }}"
data-pIds="{{ pIdsAttrStr }}">
<label style="background: {{ '#' ~ val.content }}"></label>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% endif %}
{% set size = variableAttributes['size'] %}
{% if size is not null or size is not empty %}
{% set valuesSize = size.childValues %}
{% set numbS = (valuesSize | length) %}
{% if(valuesSize is not null and numbS>0) %}
{% set flag = flag + 1 %}
<div class="swatch req size swatch-size" column="{{ size.column }}">
<span>Kích cỡ</span>
<ul>
{% for attrValue in valuesSize %}
<li class="swatch-element available {{ (numbS==1)?'active':'' }}"
value="{{ attrValue.id }}">{{ attrValue.name }}</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% endif %}
{% if((flag==0) and (product.childs)) %}
{% set flagchilds= product.childs|length %}
<p>
<span>Chọn sản phẩm</span>
<select class=" childProducts">
<option value="1">Chọn sản phẩm</option>
{% set name_parent =product.name %}
{% for cp in product.childs %}
<option value="{{ cp.id }}, {{ cp.price }}"
href="{{ cp.imageUri }}"
data-src="{{ cp.imageUri }}">
{{ cp.name|replace({ name_parent :''}) }}
</option>
{% endfor %}
</select>
</p>
{% endif %}
</div>
Số lượng sản phẩm
Số lượng sản phẩm sẽ được tùy chỉnh theo ý muốn của khách hàng và sẽ thường gồm nút tăng, giảm, ô để nhập số lượng. Số lượng sản phẩm sẽ được gọi ra như sau:
