Quickview
Giới thiệu
Dùng để xem mà mua nhanh chóng các sản phẩm
Tương tự như trang chi tiết sản phẩm, thì trang quickview cũng có những phần sau đây:
Ảnh sản phẩm
Ảnh sản phẩm sẽ thường nằm ở vị trí đầu tiên của trang và sẽ được gọi ra như sau:
{% if (product.images) %}
{% for i in product.images %}
<a href="javascript:void(0)" data-attr="{{ i.thumbnailUri }}" class="image-frame" >
<picture >
<source class="imglarge" data-srcset="{{ i.thumbnailUri }}"
media="(max-width: 767px)" srcset="{{ i.thumbnailUri }}">
<source class="imgsmall" data-srcset="{{ i.thumbnailUri }}"
media="(min-width: 768px)" srcset="{{ i.thumbnailUri }}">
<img class="img-loop lazyload" alt="{{ product.name }}">
</picture>
</a>
{% endfor %}
{% endif %}
Tên sản phẩm
Tên sản phẩm sẽ được đặt trong thẻ h1 như sau:
<h1>{{ product.name }}</h1>Giá sản phẩm
Giá sản phẩm thường sẽ bao gồm giá mới, giá cũ và số phần trăm giảm giá (nếu có) của sản phẩm và sẽ được gọi ra như sau:
<div>
<span>
<strong>Giá:</strong>
</span>
{% if (product.priceAfterDiscount > 0) %}
<p>{{ product.priceAfterDiscount|number_format(0) }}đ</p>
<del>{{product.price|number_format(0) }}đ</del>
{% elseif (product.oldprice() > 0) %}
<p>{{ product.price|number_format(0) }}đ</p>
<del>{{ product.oldPrice|number_format(0) }}đ</del>
{% else %}
<p>{{ product.price|number_format(0) }}đ</p>
{% endif %}
{% if product.calcDiscountPercent > 0 %}
<span>
-{{ product.calcDiscountPercent}}%
</span>
{% endif %}
</div>Thuộc tính sản phẩm
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:
<div>
<div>
<strong>Số lượng:</strong>
</div>
<div>
<input class="minus" type="button" value="-">
<input id="quantity" aria-label="quantity" class="input-qty" max="{{ ivt }}" min="1"
type="number" value="1" psId="{{ product.id }}">
<input class="plus" type="button" value="+">
</div>
</div>Nút thêm sản phẩm vào giỏ hàng và nút mua ngay
Nút thêm sản phẩm vào giỏ hàng và nút mua ngay sẽ được gọi ra như sau:
Chi tiết<div>
{% if (ivt <= 0) %}
<button data-original-title="Sản phẩm tạm thời hết hàng!" selId="{{ product.id }}"
psid="{{ product.id }}" disabled >TẠM HẾT HÀNG</button>
{% elseif (flag or flagchilds) %}
<button data-original-title="Vui lòng chọn màu sắc hoặc kích cỡ!"
selId="{{ product.id }}" psid="{{ product.id }}" ck="0">THÊM VÀO GIỎ HÀNG</button>
<button data-original-title="Vui lòng chọn màu sắc hoặc kích cỡ!!"
selId="{{ product.id }}" ck="0" psid="{{ product.id }}" >Mua ngay</button>
{% else %}
<button selId="{{ product.id }}" psid="{{ product.id }}" ck="1">THÊM VÀO GIỎ HÀNG</button>
<button selId="{{ product.id }}" ck="1" psid="{{ product.id }}" >Mua ngay</button>
{% endif %}
</div>Last updated