2026-03-08 23:40:18 +07:00
|
|
|
{% assign no_image_url = 'no-image.png' | asset_url %}
|
|
|
|
|
{% assign _product = page.product_info %}
|
|
|
|
|
{% assign _rating_summary = _product.review.summary %}
|
|
|
|
|
|
2026-03-10 15:07:29 +07:00
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5/dist/fancybox/fancybox.css" />
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5/dist/fancybox/fancybox.umd.js"></script>
|
|
|
|
|
|
2026-03-08 23:40:18 +07:00
|
|
|
<style>
|
|
|
|
|
.font-inter {
|
|
|
|
|
font-family: 'Inter', sans-serif;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.star-row {
|
|
|
|
|
display: grid;
|
2026-03-10 15:07:29 +07:00
|
|
|
grid-template-columns: 10px 12px 232px 40px;
|
2026-03-08 23:40:18 +07:00
|
|
|
align-items: center;
|
|
|
|
|
column-gap: 9px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.star-bar {
|
2026-03-10 15:07:29 +07:00
|
|
|
width: 232px;
|
2026-03-08 23:40:18 +07:00
|
|
|
height: 6px;
|
|
|
|
|
border-radius: 9999px;
|
|
|
|
|
background: #e6e6e6;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
2026-03-10 15:07:29 +07:00
|
|
|
.star-bar>span {
|
2026-03-08 23:40:18 +07:00
|
|
|
display: block;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background: #0084ff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.product-description img,
|
|
|
|
|
.product-description iframe,
|
|
|
|
|
.product-description table {
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.product-description table {
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
2026-03-10 15:07:29 +07:00
|
|
|
|
|
|
|
|
.product-thumbs-swiper .swiper-slide {
|
|
|
|
|
opacity: 0.5;
|
|
|
|
|
border: 2px solid transparent;
|
|
|
|
|
border-radius: 2px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.product-thumbs-swiper .swiper-slide-thumb-active {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
border-color: #57aeff;
|
|
|
|
|
}
|
2026-03-08 23:40:18 +07:00
|
|
|
</style>
|
|
|
|
|
|
2026-03-10 15:07:29 +07:00
|
|
|
<div class="layout-container flex flex-col gap-3 py-5">
|
|
|
|
|
<div class="flex items-center gap-2 text-[13px] text-black">
|
|
|
|
|
{% assign _product_paths = _product.productPath[0].path | to_array %}
|
|
|
|
|
{% if _product_paths.size > 0 %}
|
|
|
|
|
{% for _path_entry in _product_paths %}
|
|
|
|
|
{% assign _path = _path_entry.value %}
|
|
|
|
|
{% if _path.url != '' %}
|
|
|
|
|
<a href="{{ _path.url }}" class="hover:text-[#e4057c]">{{ _path.name | strip }}</a>
|
|
|
|
|
{% else %}
|
|
|
|
|
<span>{{ _path.name | strip }}</span>
|
|
|
|
|
{% endif %}
|
|
|
|
|
{% unless forloop.last %}
|
|
|
|
|
<svg class="w-2.5 h-2.5 text-[#888]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
|
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
|
|
|
|
</svg>
|
|
|
|
|
{% endunless %}
|
|
|
|
|
{% endfor %}
|
|
|
|
|
{% elsif _product.categoryInfo.size > 0 %}
|
|
|
|
|
<a href="{{ _product.categoryInfo[0].url }}" class="hover:text-[#e4057c]">{{ _product.categoryInfo[0].name | strip
|
|
|
|
|
}}</a>
|
|
|
|
|
{% else %}
|
|
|
|
|
<span>Chi tiết sản phẩm</span>
|
|
|
|
|
{% endif %}
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{% if false %}
|
2026-03-08 23:40:18 +07:00
|
|
|
<div class="flex items-center gap-2 text-[13px] text-black">
|
|
|
|
|
<a href="/" class="hover:text-[#e4057c]">Trang chủ</a>
|
2026-03-10 15:07:29 +07:00
|
|
|
{% assign _product_paths = _product.productPath[0].path | to_array %}
|
|
|
|
|
{% if _product_paths.size > 0 %}
|
|
|
|
|
{% for _path_entry in _product_paths %}
|
|
|
|
|
{% assign _path = _path_entry.value %}
|
2026-03-08 23:40:18 +07:00
|
|
|
<img src="{{ 'icon_arrow_next.svg' | asset_url }}" alt="" class="w-[10px] h-[10px]" />
|
|
|
|
|
<a href="{{ _path.url }}" class="hover:text-[#e4057c]">{{ _path.name }}</a>
|
|
|
|
|
{% endfor %}
|
|
|
|
|
{% elsif _product.categoryInfo.size > 0 %}
|
|
|
|
|
<img src="{{ 'icon_arrow_next.svg' | asset_url }}" alt="" class="w-[10px] h-[10px]" />
|
|
|
|
|
<a href="{{ _product.categoryInfo[0].url }}" class="hover:text-[#e4057c]">{{ _product.categoryInfo[0].name }}</a>
|
|
|
|
|
{% endif %}
|
2026-03-10 15:07:29 +07:00
|
|
|
<img src="{{ 'icon_arrow_next.svg' | asset_url }}" alt="" class="w-[10px] h-[10px]" />
|
|
|
|
|
<span class="text-black line-clamp-1">{{ _product.productName }}</span>
|
2026-03-08 23:40:18 +07:00
|
|
|
</div>
|
2026-03-10 15:07:29 +07:00
|
|
|
{% endif %}
|
2026-03-08 23:40:18 +07:00
|
|
|
|
|
|
|
|
<div class="flex flex-col gap-2">
|
|
|
|
|
<div class="flex items-center gap-3">
|
|
|
|
|
<h1 class="text-[20px] font-bold tracking-[-0.4px] text-black leading-none">{{ _product.productName }}</h1>
|
|
|
|
|
{% if _product.productType.isNew == 1 %}
|
|
|
|
|
<span class="h-5 rounded-[4px] bg-[#fff3f3] text-[#e40000] text-[12px] px-[11px] leading-5">Mẫu mới</span>
|
|
|
|
|
{% elsif _product.productType.isHot == 1 %}
|
|
|
|
|
<span class="h-5 rounded-[4px] bg-[#fff6ed] text-[#fc7600] text-[12px] px-[11px] leading-5">Bán chạy</span>
|
|
|
|
|
{% endif %}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex items-center gap-3 text-[14px] tracking-[-0.28px]">
|
|
|
|
|
<span class="text-[#959595]">Đã bán {{ _product.buy_count | default: 0 }}</span>
|
|
|
|
|
<span class="text-[#959595] flex items-center gap-1">
|
|
|
|
|
<img src="{{ 'icon_rating_star.svg' | asset_url }}" alt="" class="w-[13px] h-[13px]" />
|
|
|
|
|
{{ _rating_summary.avgRate | default: 0 }}
|
|
|
|
|
</span>
|
|
|
|
|
<a href="#product-spec" class="text-[#0084ff] flex items-center gap-1">
|
2026-03-10 15:07:29 +07:00
|
|
|
<span
|
|
|
|
|
class="inline-flex items-center justify-center w-5 h-5 rounded-full border border-[#0084ff] text-[11px]">i</span>
|
2026-03-08 23:40:18 +07:00
|
|
|
Thông số
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="flex items-start gap-3">
|
2026-03-10 15:07:29 +07:00
|
|
|
<section class="flex-1 min-w-0 flex flex-col gap-3">
|
2026-03-08 23:40:18 +07:00
|
|
|
<div class="bg-white rounded-[8px] px-3 py-[10px] flex flex-col gap-2">
|
2026-03-10 15:07:29 +07:00
|
|
|
<!-- Main image swiper -->
|
|
|
|
|
<div
|
|
|
|
|
class="swiper product-main-swiper w-full max-w-[460px] aspect-square mx-auto rounded-[8px] overflow-hidden bg-white">
|
|
|
|
|
<div class="swiper-wrapper">
|
|
|
|
|
{% if _product.productImageGallery.size > 0 %}
|
|
|
|
|
{% for _image in _product.productImageGallery limit:13 %}
|
|
|
|
|
<div class="swiper-slide flex items-center justify-center">
|
|
|
|
|
<a data-fancybox="product-gallery"
|
|
|
|
|
href="{{ _image.large | default: _image.original | default: _image.small }}"
|
|
|
|
|
class="block w-full h-full">
|
|
|
|
|
<img src="{{ _image.large | default: _image.original | default: _image.small }}"
|
|
|
|
|
alt="{{ _product.productName }}" class="w-full h-full object-contain"
|
|
|
|
|
onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
{% endfor %}
|
|
|
|
|
{% else %}
|
|
|
|
|
<div class="swiper-slide flex items-center justify-center">
|
|
|
|
|
<a data-fancybox="product-gallery" href="{{ _product.productImage.large }}" class="block w-full h-full">
|
|
|
|
|
<img src="{{ _product.productImage.large }}" alt="{{ _product.productName }}"
|
|
|
|
|
class="w-full h-full object-contain" onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
{% endif %}
|
|
|
|
|
</div>
|
2026-03-08 23:40:18 +07:00
|
|
|
</div>
|
2026-03-10 15:07:29 +07:00
|
|
|
<!-- Thumbnails swiper -->
|
|
|
|
|
<div class="swiper product-thumbs-swiper mt-1">
|
|
|
|
|
<div class="swiper-wrapper">
|
|
|
|
|
{% if _product.productImageGallery.size > 0 %}
|
|
|
|
|
{% for _image in _product.productImageGallery limit:13 %}
|
|
|
|
|
<div class="swiper-slide !w-[52px] !h-[52px] rounded-[2px] overflow-hidden">
|
|
|
|
|
<img src="{{ _image.small | default: _image.original | default: _image.large }}"
|
|
|
|
|
alt="{{ _product.productName }}" class="w-full h-full object-cover"
|
|
|
|
|
onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
|
|
|
|
</div>
|
|
|
|
|
{% endfor %}
|
|
|
|
|
{% else %}
|
|
|
|
|
<div class="swiper-slide !w-[52px] !h-[52px] rounded-[2px] overflow-hidden">
|
|
|
|
|
<img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}"
|
|
|
|
|
class="w-full h-full object-cover" onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
|
|
|
|
</div>
|
|
|
|
|
{% endif %}
|
|
|
|
|
</div>
|
2026-03-08 23:40:18 +07:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="bg-white rounded-[8px] px-3 py-2 flex flex-col gap-3">
|
|
|
|
|
<h2 class="font-inter text-[16px] font-bold tracking-[-0.32px]">MIQ cam kết</h2>
|
|
|
|
|
<div class="h-px bg-[#ececec]"></div>
|
|
|
|
|
<div class="grid grid-cols-2 gap-x-[40px] gap-y-3 text-[13px] text-black tracking-[-0.26px]">
|
2026-03-10 15:07:29 +07:00
|
|
|
<p class="flex items-start gap-2">
|
|
|
|
|
<img src="https://www.figma.com/api/mcp/asset/1eb5d75b-4d86-4183-afc5-4ea470d2b03a" alt=""
|
|
|
|
|
class="w-7 h-7 shrink-0" />
|
|
|
|
|
Hư gì đổi nấy 12 tháng tận nhà (miễn phí tháng đầu)
|
|
|
|
|
</p>
|
|
|
|
|
<p class="flex items-start gap-2">
|
|
|
|
|
<img src="https://www.figma.com/api/mcp/asset/67ff0e18-ae1e-4a60-b2f7-7adce5447103" alt=""
|
|
|
|
|
class="w-7 h-7 shrink-0" />
|
|
|
|
|
{% if _product.warranty != '' %}{{ _product.warranty }}{% else %}Bảo hành chính hãng 2 năm, có người đến tận
|
|
|
|
|
nhà{% endif %}
|
|
|
|
|
</p>
|
|
|
|
|
<p class="flex items-start gap-2">
|
|
|
|
|
<img src="https://www.figma.com/api/mcp/asset/67ff0e18-ae1e-4a60-b2f7-7adce5447103" alt=""
|
|
|
|
|
class="w-7 h-7 shrink-0" />
|
|
|
|
|
{% if _product.price > 0 %}Giá bán minh bạch, cập nhật theo dữ liệu sản phẩm.{% else %}Giá đang được cập
|
|
|
|
|
nhật, vui lòng liên hệ để nhận báo giá.{% endif %}
|
|
|
|
|
</p>
|
|
|
|
|
<p class="flex items-start gap-2">
|
|
|
|
|
<img src="https://www.figma.com/api/mcp/asset/ad1d1545-2457-4297-9260-befa7a7ae7c3" alt=""
|
|
|
|
|
class="w-7 h-7 shrink-0" />
|
|
|
|
|
Nếu dùng cho hoạt động kinh doanh (nhà máy, khách sạn, giặt ủi,...) thì không được bảo hành.
|
|
|
|
|
</p>
|
|
|
|
|
<p class="flex items-start gap-2">
|
|
|
|
|
<img src="https://www.figma.com/api/mcp/asset/8ccb7b02-0447-4725-9436-399b0fdcdea2" alt=""
|
|
|
|
|
class="w-7 h-7 shrink-0" />
|
|
|
|
|
{% if _product.package_accessory != '' %}{{ _product.package_accessory }}{% else %}Lắp đặt miễn phí lúc giao
|
|
|
|
|
hàng{% endif %}
|
|
|
|
|
</p>
|
2026-03-08 23:40:18 +07:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="bg-white rounded-[8px] p-3 flex flex-col gap-3">
|
|
|
|
|
<h3 class="text-[16px] font-bold tracking-[-0.32px]">Tham khảo thêm sản phẩm đang xem</h3>
|
|
|
|
|
<div class="min-h-[98px] rounded-[8px] border border-[#ebebeb] flex items-center gap-3 px-3 py-[9px]">
|
2026-03-10 15:07:29 +07:00
|
|
|
<img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}"
|
|
|
|
|
class="w-20 h-20 rounded-[2px] object-cover" onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
|
|
|
|
<div class="flex-1 min-w-0 flex flex-col gap-1">
|
2026-03-08 23:40:18 +07:00
|
|
|
<p class="text-[14px] font-semibold leading-6 tracking-[-0.28px]">{{ _product.productName }}</p>
|
|
|
|
|
<div class="flex items-center gap-2 flex-wrap">
|
|
|
|
|
{% if _product.price > 0 %}
|
2026-03-10 15:07:29 +07:00
|
|
|
<p class="text-[15px] font-bold text-[#cd0000]">{{ _product.price | format_number }}₫</p>
|
2026-03-08 23:40:18 +07:00
|
|
|
{% else %}
|
|
|
|
|
<p class="text-[15px] font-bold text-[#cd0000]">Liên hệ</p>
|
|
|
|
|
{% endif %}
|
|
|
|
|
{% if _product.marketPrice > 0 %}
|
2026-03-10 15:07:29 +07:00
|
|
|
<p class="text-[13px] text-[#9d9d9d] line-through">{{ _product.marketPrice | format_number }}₫</p>
|
2026-03-08 23:40:18 +07:00
|
|
|
{% endif %}
|
|
|
|
|
</div>
|
2026-03-10 15:07:29 +07:00
|
|
|
<p class="text-[13px] leading-6 tracking-[-0.26px]">{% if _product.warranty != '' %}{{ _product.warranty
|
|
|
|
|
}}{% else %}Thông tin bảo hành đang cập nhật.{% endif %}</p>
|
2026-03-08 23:40:18 +07:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="bg-white rounded-[8px] px-3 py-[15px] flex flex-col gap-2">
|
|
|
|
|
<h3 class="text-[16px] font-bold tracking-[-0.32px]">Đặc điểm nổi bật</h3>
|
|
|
|
|
{% if _product.productSummary != '' %}
|
2026-03-10 15:07:29 +07:00
|
|
|
<div class="text-[13px] leading-[22px] tracking-[-0.26px] whitespace-pre-line">{{ _product.productSummary }}
|
|
|
|
|
</div>
|
2026-03-08 23:40:18 +07:00
|
|
|
{% else %}
|
|
|
|
|
<ul class="list-disc ps-5 text-[13px] leading-[22px] tracking-[-0.26px]">
|
|
|
|
|
<li>Sản phẩm đang được cập nhật phần mô tả nổi bật.</li>
|
|
|
|
|
<li>Vui lòng xem thêm thông tin chi tiết ở phần mô tả bên dưới.</li>
|
|
|
|
|
</ul>
|
|
|
|
|
{% endif %}
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="product-spec" class="bg-white rounded-[8px] px-3 py-[22px] flex flex-col gap-4">
|
|
|
|
|
<div class="flex items-center justify-center gap-3">
|
2026-03-10 15:07:29 +07:00
|
|
|
<button id="tab-btn-spec"
|
|
|
|
|
class="w-[205px] h-10 rounded-[4px] border border-[#0084ff] bg-[#edf7ff] text-[16px] text-[#0084ff] font-bold tracking-[-0.32px]">Thông
|
|
|
|
|
số kỹ thuật</button>
|
|
|
|
|
<button id="tab-btn-info"
|
|
|
|
|
class="w-[205px] h-10 rounded-[4px] border border-[#e6e6e6] bg-white text-[16px] text-black font-bold tracking-[-0.32px]">Thông
|
|
|
|
|
tin sản phẩm</button>
|
2026-03-08 23:40:18 +07:00
|
|
|
</div>
|
2026-03-10 15:07:29 +07:00
|
|
|
<!-- Tab: Thông số kỹ thuật -->
|
|
|
|
|
<div id="tab-content-spec">
|
|
|
|
|
<div class="h-10 rounded-[4px] bg-[#f2f4f7] flex items-center justify-between px-2">
|
|
|
|
|
<p class="font-inter font-semibold text-[13px] tracking-[-0.26px]">Tổng quan</p>
|
|
|
|
|
<img src="{{ 'icon_arrow_next.svg' | asset_url }}" alt="" class="w-5 h-5 rotate-90" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="grid grid-cols-[196px_1fr] gap-x-[88px] gap-y-[24px] px-3 mt-4 text-[13px] tracking-[-0.26px]">
|
|
|
|
|
<p>Tên sản phẩm</p>
|
|
|
|
|
<p>{{ _product.productName }}</p>
|
|
|
|
|
<p>Danh mục</p>
|
|
|
|
|
<p>{% if _product.categoryInfo.size > 0 %}{{ _product.categoryInfo[0].name }}{% else %}Đang cập nhật{% endif
|
|
|
|
|
%}</p>
|
|
|
|
|
<p>Thương hiệu</p>
|
|
|
|
|
<p>{% if _product.brand.name != '' %}{{ _product.brand.name }}{% else %}Đang cập nhật{% endif %}</p>
|
|
|
|
|
<p>Model</p>
|
|
|
|
|
<p>{% if _product.productModel != '' %}{{ _product.productModel }}{% else %}Đang cập nhật{% endif %}</p>
|
|
|
|
|
<p>SKU</p>
|
|
|
|
|
<p>{% if _product.productSKU != '' %}{{ _product.productSKU }}{% else %}Đang cập nhật{% endif %}</p>
|
|
|
|
|
<p>Bảo hành</p>
|
|
|
|
|
<p>{% if _product.warranty != '' %}{{ _product.warranty }}{% else %}Đang cập nhật{% endif %}</p>
|
|
|
|
|
<p>Đơn vị tính</p>
|
|
|
|
|
<p>{{ _product.priceUnit }}</p>
|
|
|
|
|
<p>Cập nhật</p>
|
|
|
|
|
<p>{{ _product.lastUpdate }}</p>
|
|
|
|
|
</div>
|
2026-03-08 23:40:18 +07:00
|
|
|
</div>
|
2026-03-10 15:07:29 +07:00
|
|
|
<!-- Tab: Thông tin sản phẩm -->
|
|
|
|
|
<div id="tab-content-info" class="hidden">
|
|
|
|
|
<div class="h-10 rounded-[4px] bg-[#f2f4f7] flex items-center justify-between px-2">
|
|
|
|
|
<p class="font-inter font-semibold text-[13px] tracking-[-0.26px]">Mô tả sản phẩm</p>
|
|
|
|
|
<img src="{{ 'icon_arrow_next.svg' | asset_url }}" alt="" class="w-5 h-5 rotate-90" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="relative mt-4 px-3">
|
|
|
|
|
<div id="product-description-content"
|
|
|
|
|
class="product-description text-[13px] leading-[22px] tracking-[-0.26px] text-black overflow-hidden max-h-[420px] transition-all duration-300 ease-in-out">
|
|
|
|
|
{% if _product.productDescription != '' %}
|
|
|
|
|
{{ _product.productDescription }}
|
|
|
|
|
{% else %}
|
|
|
|
|
<p>Thông tin mô tả sản phẩm đang được cập nhật.</p>
|
|
|
|
|
{% endif %}
|
|
|
|
|
</div>
|
|
|
|
|
<div id="product-description-fade"
|
|
|
|
|
class="pointer-events-none absolute left-3 right-3 bottom-0 h-20 bg-gradient-to-t from-white to-transparent">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="mt-3 flex justify-center">
|
|
|
|
|
<button id="btn-toggle-description" type="button"
|
|
|
|
|
class="hidden h-10 rounded-[4px] border border-[#8c8c8c] px-6 text-[#6b6b6b] text-[13px] font-medium">
|
|
|
|
|
Xem thêm
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
2026-03-08 23:40:18 +07:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2026-03-10 15:07:29 +07:00
|
|
|
{% comment %}
|
2026-03-08 23:40:18 +07:00
|
|
|
<div class="bg-white rounded-[12px] px-3 py-4 flex flex-col gap-5">
|
|
|
|
|
<h3 class="text-[18px] font-semibold tracking-[-0.36px]">Đánh giá {{ _product.productName }}</h3>
|
|
|
|
|
<div class="flex items-center justify-center gap-5">
|
|
|
|
|
<div class="w-[112px] flex flex-col items-center gap-1">
|
2026-03-10 15:07:29 +07:00
|
|
|
<p class="text-[32px] font-extrabold font-inter tracking-[-0.64px]">{{ _rating_summary.avgRate | default: 0
|
|
|
|
|
}}<span class="text-[13px] text-[#9d9d9d] font-normal">/5</span></p>
|
|
|
|
|
<p class="text-[13px] font-inter">{{ page.product_info.comment.summary.total | default: 0 }} khách hài lòng
|
|
|
|
|
</p>
|
2026-03-08 23:40:18 +07:00
|
|
|
<p class="text-[13px] text-[#9d9d9d] font-inter">{{ _rating_summary.total | default: 0 }} đánh giá</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="w-[315px] flex flex-col gap-2 text-[13px]">
|
2026-03-10 15:07:29 +07:00
|
|
|
<div class="star-row"><span>5</span><span>★</span>
|
|
|
|
|
<div class="star-bar"><span style="width:0%"></span></div><span>0%</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="star-row"><span>4</span><span>★</span>
|
|
|
|
|
<div class="star-bar"><span style="width:0%"></span></div><span>0%</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="star-row"><span>3</span><span>★</span>
|
|
|
|
|
<div class="star-bar"><span style="width:0%"></span></div><span>0%</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="star-row"><span>2</span><span>★</span>
|
|
|
|
|
<div class="star-bar"><span style="width:0%"></span></div><span>0%</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="star-row"><span>1</span><span>★</span>
|
|
|
|
|
<div class="star-bar"><span style="width:0%"></span></div><span>0%</span>
|
|
|
|
|
</div>
|
2026-03-08 23:40:18 +07:00
|
|
|
</div>
|
2026-03-10 15:07:29 +07:00
|
|
|
<img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}"
|
|
|
|
|
class="w-20 h-20 rounded-[4px] object-cover" onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
|
|
|
|
<img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}"
|
|
|
|
|
class="w-20 h-20 rounded-[4px] object-cover" onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
|
|
|
|
<img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}"
|
|
|
|
|
class="w-20 h-20 rounded-[4px] object-cover" onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
2026-03-08 23:40:18 +07:00
|
|
|
</div>
|
|
|
|
|
|
2026-03-10 15:07:29 +07:00
|
|
|
<div class="w-full grid gap-2 text-[13px] tracking-[-0.26px]">
|
2026-03-08 23:40:18 +07:00
|
|
|
<div class="flex items-center gap-1">
|
|
|
|
|
<p class="font-bold">MIQ</p>
|
|
|
|
|
<span class="text-[#35b327]">●</span>
|
|
|
|
|
<p class="text-[#35b327] font-medium">Thông tin đánh giá đang được cập nhật</p>
|
|
|
|
|
</div>
|
|
|
|
|
<p>★★★★★ <span class="mx-2 text-[#9d9d9d]">|</span> Chưa có nội dung đánh giá hiển thị</p>
|
2026-03-10 15:07:29 +07:00
|
|
|
<p>Khách hàng có thể để lại đánh giá sau khi mua hàng để hoàn thiện phần trải nghiệm thực tế cho sản phẩm này.
|
|
|
|
|
</p>
|
2026-03-08 23:40:18 +07:00
|
|
|
</div>
|
|
|
|
|
|
2026-03-10 15:07:29 +07:00
|
|
|
<div class="h-px bg-[#e8e8e8] w-full"></div>
|
2026-03-08 23:40:18 +07:00
|
|
|
|
2026-03-10 15:07:29 +07:00
|
|
|
<div class="w-full grid gap-2 text-[13px] tracking-[-0.26px]">
|
2026-03-08 23:40:18 +07:00
|
|
|
<div class="flex items-center gap-1">
|
|
|
|
|
<p class="font-bold">MIQ</p>
|
|
|
|
|
<span class="text-[#35b327]">●</span>
|
|
|
|
|
<p class="text-[#35b327] font-medium">Chưa có bình luận nổi bật</p>
|
|
|
|
|
</div>
|
|
|
|
|
<p>Đội ngũ tư vấn sẽ cập nhật phản hồi khách hàng khi có dữ liệu mới.</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="flex items-center justify-center gap-2">
|
2026-03-10 15:07:29 +07:00
|
|
|
<button
|
|
|
|
|
class="w-[231px] h-10 rounded-[4px] border border-[#8c8c8c] text-[#6b6b6b] text-[13px] font-medium">Xem {{
|
|
|
|
|
_rating_summary.total | default: 0 }} đánh giá</button>
|
|
|
|
|
<button class="w-[231px] h-10 rounded-[4px] bg-[#0084ff] text-white text-[13px] font-medium">Viết đánh
|
|
|
|
|
giá</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
{% endcomment %}
|
|
|
|
|
|
|
|
|
|
{% assign _rating_total = _rating_summary.total | default: 0 | plus: 0 %}
|
|
|
|
|
{% assign _rating_avg = _rating_summary.avgRate | default: 0 %}
|
|
|
|
|
{% assign _happy_total = page.product_info.comment.summary.total | default: _rating_total %}
|
|
|
|
|
<div class="bg-white rounded-[12px] px-3 py-4 flex flex-col gap-5">
|
|
|
|
|
<h3 class="text-[18px] font-semibold tracking-[-0.36px]">Đánh giá {{ _product.productName }}</h3>
|
|
|
|
|
|
|
|
|
|
<div class="flex items-center justify-center gap-5">
|
|
|
|
|
<div class="w-[112px] flex flex-col items-center gap-1 shrink-0">
|
|
|
|
|
<div class="flex items-center gap-[2px]">
|
|
|
|
|
<span class="text-[#f9a000] text-[18px] leading-none">★</span>
|
|
|
|
|
<p class="text-[32px] leading-none font-extrabold font-inter tracking-[-0.64px]">{{ _rating_avg }}</p>
|
|
|
|
|
<p class="text-[13px] text-[#9d9d9d] font-inter">/5</p>
|
|
|
|
|
</div>
|
|
|
|
|
<p class="text-[13px] font-inter text-black">{{ _happy_total }} khách hài lòng</p>
|
|
|
|
|
<p class="text-[13px] text-[#9d9d9d] font-inter">{{ _rating_total }} đánh giá</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="w-[315px] flex flex-col gap-2 text-[13px] shrink-0">
|
|
|
|
|
{% assign _rating_keys = '5,4,3,2,1' | split: ',' %}
|
|
|
|
|
{% for _star in _rating_keys %}
|
|
|
|
|
{% assign _rate_point = _star | plus: 0 %}
|
|
|
|
|
{% assign _rate_count = 0 %}
|
|
|
|
|
{% if _rating_summary.list_rate.size > 0 %}
|
|
|
|
|
{% for _rate in _rating_summary.list_rate %}
|
|
|
|
|
{% assign _rate_key = _rate.rate | default: _rate.star | default: _rate.key | default: _rate.id | plus: 0 %}
|
|
|
|
|
{% if _rate_key == _rate_point %}
|
|
|
|
|
{% assign _rate_count = _rate.total | default: _rate.count | default: _rate.value | plus: 0 %}
|
|
|
|
|
{% endif %}
|
|
|
|
|
{% endfor %}
|
|
|
|
|
{% endif %}
|
|
|
|
|
{% assign _rate_percent = 0 %}
|
|
|
|
|
{% if _rating_total > 0 %}
|
|
|
|
|
{% assign _rate_percent = _rate_count | times: 100.0 | divided_by: _rating_total %}
|
|
|
|
|
{% endif %}
|
|
|
|
|
<div class="star-row">
|
|
|
|
|
<span class="text-[13px] font-medium">{{ _star }}</span>
|
|
|
|
|
<span class="text-[#f9a000] text-[12px] leading-none">★</span>
|
|
|
|
|
<div class="star-bar">
|
|
|
|
|
<span
|
|
|
|
|
style="width:{% if _rate_percent > 100 %}100{% elsif _rate_percent < 0 %}0{% else %}{{ _rate_percent }}{% endif %}%"></span>
|
|
|
|
|
</div>
|
|
|
|
|
<span class="text-[13px] font-medium tracking-[-0.26px]">
|
|
|
|
|
{% if _rate_percent > 0 %}{{ _rate_percent | round: 1 }}%{% else %}0{% endif %}
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
{% endfor %}
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}"
|
|
|
|
|
class="w-20 h-20 rounded-[4px] object-cover shrink-0"
|
|
|
|
|
onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
|
|
|
|
<img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}"
|
|
|
|
|
class="w-20 h-20 rounded-[4px] object-cover shrink-0"
|
|
|
|
|
onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
|
|
|
|
<img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}"
|
|
|
|
|
class="w-20 h-20 rounded-[4px] object-cover shrink-0"
|
|
|
|
|
onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="w-full grid gap-2 text-[13px] tracking-[-0.26px]">
|
|
|
|
|
<div class="flex items-center gap-[6px]">
|
|
|
|
|
<p class="font-bold">Nguyễn Lê Tuấn</p>
|
|
|
|
|
<svg class="w-[15px] h-[15px] shrink-0" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
|
|
|
|
<circle cx="12" cy="12" r="9.5" stroke="#35b327" />
|
|
|
|
|
<path d="M8.5 12.5L11 15L15.5 9.8" stroke="#35b327" stroke-width="1.5" stroke-linecap="round"
|
|
|
|
|
stroke-linejoin="round" />
|
|
|
|
|
</svg>
|
|
|
|
|
<p class="text-[#35b327] font-medium">Đã mua tại MIQ</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex items-center gap-2">
|
|
|
|
|
<span class="text-[#f9a000] text-[12px] leading-none tracking-[1px]">★★★★★</span>
|
|
|
|
|
<span class="w-px h-[14px] bg-[#d5d5d5]"></span>
|
|
|
|
|
<span class="text-[#df0000] text-[12px] leading-none">♥</span>
|
|
|
|
|
<p class="font-medium">Sẽ giới thiệu cho bạn bè, người thân</p>
|
|
|
|
|
</div>
|
|
|
|
|
<p class="font-medium">Tủ lạnh có ngăn chứa rất rộng rãi để được nhiều thực phẩm, có app theo dõi rất tiện
|
|
|
|
|
lợi,
|
|
|
|
|
mua được ngay dịp sale giá rẻ, có dịp mình sẽ ủng hộ nữa</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="h-px bg-[#e8e8e8] w-full"></div>
|
|
|
|
|
|
|
|
|
|
<div class="w-full grid gap-2 text-[13px] tracking-[-0.26px]">
|
|
|
|
|
<div class="flex items-center gap-[6px]">
|
|
|
|
|
<p class="font-bold">Nguyễn Lê Tuấn</p>
|
|
|
|
|
<svg class="w-[15px] h-[15px] shrink-0" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
|
|
|
|
<circle cx="12" cy="12" r="9.5" stroke="#35b327" />
|
|
|
|
|
<path d="M8.5 12.5L11 15L15.5 9.8" stroke="#35b327" stroke-width="1.5" stroke-linecap="round"
|
|
|
|
|
stroke-linejoin="round" />
|
|
|
|
|
</svg>
|
|
|
|
|
<p class="text-[#35b327] font-medium">Đã mua tại MIQ</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex items-center gap-2">
|
|
|
|
|
<span class="text-[#f9a000] text-[12px] leading-none tracking-[1px]">★★★★★</span>
|
|
|
|
|
<span class="w-px h-[14px] bg-[#d5d5d5]"></span>
|
|
|
|
|
<span class="text-[#df0000] text-[12px] leading-none">♥</span>
|
|
|
|
|
<p class="font-medium">Sẽ giới thiệu cho bạn bè, người thân</p>
|
|
|
|
|
</div>
|
|
|
|
|
<p class="font-medium">Tủ lạnh có ngăn chứa rất rộng rãi để được nhiều thực phẩm, có app theo dõi rất tiện
|
|
|
|
|
lợi,
|
|
|
|
|
mua được ngay dịp sale giá rẻ, có dịp mình sẽ ủng hộ nữa</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="flex items-center justify-center gap-2">
|
|
|
|
|
<button
|
|
|
|
|
class="w-[231px] h-10 rounded-[4px] border border-[#8c8c8c] text-[#6b6b6b] text-[13px] font-medium">Xem {{
|
|
|
|
|
_rating_total }} đánh giá</button>
|
|
|
|
|
<button class="w-[231px] h-10 rounded-[4px] bg-[#0084ff] text-white text-[13px] font-medium">Viết đánh
|
|
|
|
|
giá</button>
|
2026-03-08 23:40:18 +07:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
2026-03-10 15:07:29 +07:00
|
|
|
<aside class="w-[392px] shrink-0 flex flex-col gap-3">
|
2026-03-08 23:40:18 +07:00
|
|
|
<div class="bg-white rounded-[8px] px-3 py-[14px] flex flex-col gap-[11px]">
|
2026-03-10 15:07:29 +07:00
|
|
|
<img src="{{ 'category_qc_lg.png' | asset_url }}" alt="" class="w-full h-[144px] rounded-[8px] object-cover" />
|
|
|
|
|
<img src="{{ 'category_qc_samsung.png' | asset_url }}" alt=""
|
|
|
|
|
class="w-full h-[144px] rounded-[8px] object-cover" />
|
2026-03-08 23:40:18 +07:00
|
|
|
<div class="flex items-center gap-2 flex-wrap">
|
|
|
|
|
{% if _product.categoryInfo.size > 0 %}
|
|
|
|
|
{% for _category in _product.categoryInfo limit:3 %}
|
2026-03-10 15:07:29 +07:00
|
|
|
<a href="{{ _category.url }}"
|
|
|
|
|
class="px-3 h-7 rounded-[4px] border {% if forloop.first %}border-[#50aaff] text-[#0084ff]{% else %}border-[#e8e8e8] text-black{% endif %} text-[13px] font-medium inline-flex items-center">{{
|
|
|
|
|
_category.name }}</a>
|
2026-03-08 23:40:18 +07:00
|
|
|
{% endfor %}
|
|
|
|
|
{% else %}
|
2026-03-10 15:07:29 +07:00
|
|
|
<span
|
|
|
|
|
class="px-3 h-7 rounded-[4px] border border-[#50aaff] text-[#0084ff] text-[13px] font-medium inline-flex items-center">Sản
|
|
|
|
|
phẩm</span>
|
2026-03-08 23:40:18 +07:00
|
|
|
{% endif %}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="rounded-[8px] p-[4px] bg-gradient-to-b from-[#6b1440] via-[#e4057c] to-[#6b1440]">
|
|
|
|
|
<div class="bg-white rounded-[6px] p-[11px] flex flex-col gap-3">
|
|
|
|
|
<p class="text-[13px] font-semibold tracking-[-0.26px]">Loại dịch vụ lắp đặt</p>
|
|
|
|
|
{% if _product.addon.size > 0 %}
|
2026-03-10 15:07:29 +07:00
|
|
|
<input type="hidden" id="selected-addon-id" value="{{ _product.addon[0].addon_id | default: '' }}">
|
|
|
|
|
<div id="install-option-group" class="flex flex-col gap-2">
|
|
|
|
|
{% for _addon in _product.addon limit:3 %}
|
|
|
|
|
{% assign _addon_old_price = _addon.market_price | default: 0 | plus: 0 %}
|
|
|
|
|
{% assign _addon_price = _addon.price | default: 0 | plus: 0 %}
|
|
|
|
|
<div
|
|
|
|
|
class="js-install-option relative rounded-[8px] border p-[11px] h-[65px] transition-all cursor-pointer {% if forloop.first %}border-[#e4057c] bg-[#fff6f6] is-selected{% else %}border-[#e2e2e2] bg-white{% endif %}"
|
|
|
|
|
data-addon-id="{{ _addon.addon_id }}" role="radio" tabindex="0"
|
|
|
|
|
aria-checked="{% if forloop.first %}true{% else %}false{% endif %}">
|
|
|
|
|
<div class="flex items-center justify-between gap-3">
|
|
|
|
|
<div class="flex items-center gap-2">
|
|
|
|
|
<span
|
|
|
|
|
class="js-install-radio w-3 h-3 rounded-full border {% if forloop.first %}border-[#a0045c]{% else %}border-[#a9a9a9]{% endif %} inline-flex items-center justify-center">
|
|
|
|
|
<span
|
|
|
|
|
class="js-install-radio-dot w-[5px] h-[5px] rounded-full bg-[#a0045c] {% unless forloop.first %}hidden{% endunless %}"></span>
|
|
|
|
|
</span>
|
|
|
|
|
<p class="text-[13px] font-semibold tracking-[-0.26px]">{{ _addon.title }}</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex items-center gap-2">
|
|
|
|
|
{% if _addon_old_price > _addon_price and _addon_old_price > 0 %}
|
|
|
|
|
<p class="text-[11px] text-[#868686] line-through">{{ _addon_old_price | format_number }}đ</p>
|
|
|
|
|
{% endif %}
|
|
|
|
|
{% if _addon_price > 0 %}
|
|
|
|
|
<p class="text-[14px] font-bold text-[#e40000]">{{ _addon_price | format_number }}đ</p>
|
|
|
|
|
{% else %}
|
|
|
|
|
<p class="text-[14px] font-bold text-[#e40000]">Miễn phí</p>
|
|
|
|
|
{% endif %}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex items-center gap-1 ps-5 mt-1">
|
|
|
|
|
{% if forloop.first %}
|
|
|
|
|
<svg class="w-3 h-3 shrink-0 text-[#35b327]" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
|
|
|
|
<circle cx="12" cy="12" r="9.5" stroke="currentColor" />
|
|
|
|
|
<path d="M8.5 12.5L11 15L15.5 9.8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
|
|
|
|
|
stroke-linejoin="round" />
|
|
|
|
|
</svg>
|
|
|
|
|
<p class="text-[12px]">Gói tiêu chuẩn</p>
|
|
|
|
|
{% elsif forloop.index == 2 %}
|
|
|
|
|
<span class="text-[#ff7300] text-[10px] leading-none font-semibold">VIP</span>
|
|
|
|
|
<p class="text-[12px] text-[#ff7300]">Bảo hành 4 năm (2 năm chính hãng, 2 năm MIQ)</p>
|
|
|
|
|
{% else %}
|
|
|
|
|
<span class="text-[#ff7300] text-[10px] leading-none font-semibold">VIP</span>
|
|
|
|
|
<p class="text-[12px] text-[#ff7300]">Tuỳ chọn dịch vụ đi kèm</p>
|
|
|
|
|
{% endif %}
|
|
|
|
|
</div>
|
|
|
|
|
<span
|
|
|
|
|
class="js-install-selected-dot absolute left-[17px] bottom-[8px] w-[6px] h-[6px] rounded-full bg-[#90004b] {% unless forloop.first %}hidden{% endunless %}"></span>
|
|
|
|
|
</div>
|
|
|
|
|
{% endfor %}
|
|
|
|
|
</div>
|
|
|
|
|
{% comment %}
|
2026-03-08 23:40:18 +07:00
|
|
|
{% for _addon in _product.addon limit:3 %}
|
2026-03-10 15:07:29 +07:00
|
|
|
<div
|
|
|
|
|
class="rounded-[8px] border {% if forloop.first %}border-[#e4057c] bg-[#fff6f6]{% else %}border-[#e2e2e2]{% endif %} p-[13px] grid grid-cols-2 gap-x-[12px] gap-y-2">
|
2026-03-08 23:40:18 +07:00
|
|
|
<div class="flex items-center gap-2">
|
|
|
|
|
<span class="w-3 h-3 rounded-full border border-[#a9a9a9]"></span>
|
|
|
|
|
<p class="text-[13px] font-semibold tracking-[-0.26px]">{{ _addon.title }}</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text-right">
|
|
|
|
|
{% if _addon.price > 0 %}
|
2026-03-10 15:07:29 +07:00
|
|
|
<p class="text-[14px] font-bold text-[#e40000]">{{ _addon.price | format_number }}đ</p>
|
2026-03-08 23:40:18 +07:00
|
|
|
{% else %}
|
|
|
|
|
<p class="text-[14px] font-bold text-[#35b327]">Miễn phí</p>
|
|
|
|
|
{% endif %}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-span-2 flex items-center gap-1 ps-5">
|
|
|
|
|
<span class="text-[#35b327]">◉</span>
|
2026-03-10 15:07:29 +07:00
|
|
|
<p class="text-[12px]">{% if forloop.first %}Gói tiêu chuẩn{% else %}Tuỳ chọn dịch vụ đi kèm{% endif %}
|
|
|
|
|
</p>
|
2026-03-08 23:40:18 +07:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
{% endfor %}
|
2026-03-10 15:07:29 +07:00
|
|
|
{% endcomment %}
|
2026-03-08 23:40:18 +07:00
|
|
|
{% else %}
|
|
|
|
|
<div class="rounded-[8px] border border-[#e4057c] bg-[#fff6f6] p-[13px]">
|
|
|
|
|
<p class="text-[13px] font-semibold tracking-[-0.26px]">Chưa có gói dịch vụ bổ sung</p>
|
|
|
|
|
</div>
|
|
|
|
|
{% endif %}
|
|
|
|
|
|
|
|
|
|
{% if _product.specialOffer.all.size > 0 %}
|
|
|
|
|
<div class="rounded-[8px] border border-[#e2e2e2] overflow-hidden">
|
|
|
|
|
<div class="h-[43px] bg-[#f9fafb] px-2 flex items-center">
|
|
|
|
|
<p class="text-[14px] font-semibold tracking-[-0.28px]">Khuyến mãi</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="p-[10px] flex flex-col gap-3">
|
|
|
|
|
{% for _offer in _product.specialOffer.all limit:3 %}
|
|
|
|
|
<p class="text-[13px] tracking-[-0.26px] flex items-start gap-2">
|
2026-03-10 15:07:29 +07:00
|
|
|
<span
|
|
|
|
|
class="inline-flex items-center justify-center w-4 h-4 rounded-full bg-[#a0045c] text-white text-[13px] shrink-0">{{
|
|
|
|
|
forloop.index }}</span>
|
2026-03-08 23:40:18 +07:00
|
|
|
<span class="line-clamp-3">{{ _offer.title }}</span>
|
|
|
|
|
</p>
|
|
|
|
|
{% endfor %}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
{% endif %}
|
|
|
|
|
|
|
|
|
|
{% if _product.specialOffer.gift.size > 0 %}
|
|
|
|
|
<div class="h-px bg-[#ececec]"></div>
|
|
|
|
|
<p class="text-[13px] font-medium tracking-[-0.26px]">Hình ảnh quà khuyến mãi</p>
|
|
|
|
|
<div class="flex items-center gap-2 flex-wrap">
|
|
|
|
|
{% for _gift in _product.specialOffer.gift limit:2 %}
|
|
|
|
|
{% if _gift.thumbnail != '' and _gift.thumbnail contains '/' %}
|
|
|
|
|
{% assign _gift_image = _gift.thumbnail %}
|
|
|
|
|
{% else %}
|
|
|
|
|
{% assign _gift_image = no_image_url %}
|
|
|
|
|
{% endif %}
|
|
|
|
|
<div class="w-[128px] h-12 rounded-[4px] border border-[#ebebeb] p-[6px] flex items-center gap-1">
|
2026-03-10 15:07:29 +07:00
|
|
|
<img src="{{ _gift_image }}" alt="{{ _gift.title }}" class="w-9 h-9 rounded-[4px] object-cover"
|
|
|
|
|
onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
2026-03-08 23:40:18 +07:00
|
|
|
<p class="text-[10px] font-medium leading-[14px] line-clamp-2">{{ _gift.title }}</p>
|
|
|
|
|
</div>
|
|
|
|
|
{% endfor %}
|
|
|
|
|
</div>
|
|
|
|
|
{% endif %}
|
|
|
|
|
|
|
|
|
|
<div class="h-px bg-[#ececec]"></div>
|
|
|
|
|
<div class="flex items-center gap-3">
|
2026-03-10 15:07:29 +07:00
|
|
|
<button id="btn-add-to-cart" type="button" data-product-name="{{ _product.productName }}"
|
|
|
|
|
data-product-image="{{ _product.productImage.small | default: _product.productImage.large | default: no_image_url }}"
|
|
|
|
|
data-product-price="{% if _product.price > 0 %}{{ _product.price | format_number }}đ{% else %}Liên hệ{% endif %}"
|
|
|
|
|
class="w-[166px] h-12 rounded-[4px] border border-[#0084ff] bg-white text-[#0084ff] flex flex-col items-center justify-center gap-1 shrink-0">
|
|
|
|
|
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
|
|
|
|
<path
|
|
|
|
|
d="M2.25 3.75H3.73C4.14 3.75 4.48 4.04 4.55 4.44L5.97 12.69C6.09 13.41 6.71 13.94 7.44 13.94H17.53C18.2 13.94 18.79 13.5 18.99 12.86L20.54 7.86C20.78 7.08 20.2 6.28 19.39 6.28H6.11"
|
|
|
|
|
stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
|
|
|
|
|
<path
|
|
|
|
|
d="M9.25 20.25C9.94 20.25 10.5 19.69 10.5 19C10.5 18.31 9.94 17.75 9.25 17.75C8.56 17.75 8 18.31 8 19C8 19.69 8.56 20.25 9.25 20.25Z"
|
|
|
|
|
stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
|
|
|
|
|
<path
|
|
|
|
|
d="M16.75 20.25C17.44 20.25 18 19.69 18 19C18 18.31 17.44 17.75 16.75 17.75C16.06 17.75 15.5 18.31 15.5 19C15.5 19.69 16.06 20.25 16.75 20.25Z"
|
|
|
|
|
stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
|
|
|
|
|
<path d="M12.25 8.25V11.75" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"
|
|
|
|
|
stroke-linejoin="round" />
|
|
|
|
|
<path d="M10.5 10H14" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"
|
|
|
|
|
stroke-linejoin="round" />
|
|
|
|
|
</svg>
|
|
|
|
|
<span class="block text-[13px] leading-none tracking-[-0.26px]">Thêm vào giỏ</span>
|
|
|
|
|
</button>
|
|
|
|
|
<button id="btn-buy-now"
|
|
|
|
|
class="w-[166px] h-12 rounded-[4px] bg-[#fc7600] text-white text-[13px] font-semibold tracking-[-0.26px] shrink-0">Mua
|
|
|
|
|
ngay</button>
|
2026-03-08 23:40:18 +07:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="bg-white rounded-[8px] p-3 flex flex-col gap-2">
|
|
|
|
|
<p class="text-[14px] font-semibold leading-6 tracking-[-0.28px]">Sản phẩm đã xem</p>
|
|
|
|
|
<div class="grid grid-cols-2 gap-3">
|
2026-03-10 15:07:29 +07:00
|
|
|
<a href="{{ _product.productUrl }}"
|
|
|
|
|
class="h-[76px] rounded-[4px] border border-[#d9d9d9] p-2 flex items-center gap-2 no-underline">
|
|
|
|
|
<img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}"
|
|
|
|
|
class="w-[60px] h-[60px] rounded-[4px] object-cover"
|
|
|
|
|
onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
2026-03-08 23:40:18 +07:00
|
|
|
<div class="flex-1 min-w-0">
|
|
|
|
|
<p class="text-[11px] leading-4 line-clamp-2 text-black">{{ _product.productName }}</p>
|
|
|
|
|
{% if _product.price > 0 %}
|
2026-03-10 15:07:29 +07:00
|
|
|
<p class="text-[13px] leading-6 font-semibold text-[#d90000]">{{ _product.price | format_number }}đ</p>
|
2026-03-08 23:40:18 +07:00
|
|
|
{% else %}
|
|
|
|
|
<p class="text-[13px] leading-6 font-semibold text-[#d90000]">Liên hệ</p>
|
|
|
|
|
{% endif %}
|
|
|
|
|
</div>
|
|
|
|
|
</a>
|
2026-03-10 15:07:29 +07:00
|
|
|
<a href="{{ _product.productUrl }}"
|
|
|
|
|
class="h-[76px] rounded-[4px] border border-[#d9d9d9] p-2 flex items-center gap-2 no-underline">
|
|
|
|
|
<img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}"
|
|
|
|
|
class="w-[60px] h-[60px] rounded-[4px] object-cover"
|
|
|
|
|
onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
2026-03-08 23:40:18 +07:00
|
|
|
<div class="flex-1 min-w-0">
|
|
|
|
|
<p class="text-[11px] leading-4 line-clamp-2 text-black">{{ _product.productName }}</p>
|
|
|
|
|
{% if _product.marketPrice > 0 %}
|
2026-03-10 15:07:29 +07:00
|
|
|
<p class="text-[13px] leading-6 font-semibold text-[#d90000]">{{ _product.marketPrice | format_number }}đ
|
|
|
|
|
</p>
|
2026-03-08 23:40:18 +07:00
|
|
|
{% elsif _product.price > 0 %}
|
2026-03-10 15:07:29 +07:00
|
|
|
<p class="text-[13px] leading-6 font-semibold text-[#d90000]">{{ _product.price | format_number }}đ</p>
|
2026-03-08 23:40:18 +07:00
|
|
|
{% else %}
|
|
|
|
|
<p class="text-[13px] leading-6 font-semibold text-[#d90000]">Liên hệ</p>
|
|
|
|
|
{% endif %}
|
|
|
|
|
</div>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</aside>
|
|
|
|
|
</div>
|
|
|
|
|
|
2026-03-10 15:07:29 +07:00
|
|
|
</div>
|
2026-03-08 23:40:18 +07:00
|
|
|
|
2026-03-10 15:07:29 +07:00
|
|
|
<!-- Toast thêm vào giỏ -->
|
|
|
|
|
<div id="cart-toast" class="fixed bottom-6 right-6 z-50 hidden transition-all">
|
|
|
|
|
<div
|
|
|
|
|
class="bg-[#35b327] text-white px-5 py-3 rounded-[8px] shadow-lg flex items-center gap-3 text-[14px] font-medium">
|
|
|
|
|
<svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
|
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
|
|
|
</svg>
|
|
|
|
|
Đã thêm sản phẩm vào giỏ hàng!
|
2026-03-08 23:40:18 +07:00
|
|
|
</div>
|
|
|
|
|
</div>
|
