update
This commit is contained in:
@@ -2,6 +2,9 @@
|
||||
{% assign _product = page.product_info %}
|
||||
{% assign _rating_summary = _product.review.summary %}
|
||||
|
||||
<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>
|
||||
|
||||
<style>
|
||||
.font-inter {
|
||||
font-family: 'Inter', sans-serif;
|
||||
@@ -9,19 +12,20 @@
|
||||
|
||||
.star-row {
|
||||
display: grid;
|
||||
grid-template-columns: 10px 12px 1fr 36px;
|
||||
grid-template-columns: 10px 12px 232px 40px;
|
||||
align-items: center;
|
||||
column-gap: 9px;
|
||||
}
|
||||
|
||||
.star-bar {
|
||||
width: 232px;
|
||||
height: 6px;
|
||||
border-radius: 9999px;
|
||||
background: #e6e6e6;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.star-bar > span {
|
||||
.star-bar>span {
|
||||
display: block;
|
||||
height: 100%;
|
||||
background: #0084ff;
|
||||
@@ -36,13 +40,52 @@
|
||||
.product-description table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="w-[1200px] mx-auto flex flex-col gap-3 py-5">
|
||||
<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 %}
|
||||
<div class="flex items-center gap-2 text-[13px] text-black">
|
||||
<a href="/" class="hover:text-[#e4057c]">Trang chủ</a>
|
||||
{% if _product.productPath.size > 0 %}
|
||||
{% for _path in _product.productPath[0].path %}
|
||||
{% 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 %}
|
||||
<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 %}
|
||||
@@ -50,7 +93,10 @@
|
||||
<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 %}
|
||||
<img src="{{ 'icon_arrow_next.svg' | asset_url }}" alt="" class="w-[10px] h-[10px]" />
|
||||
<span class="text-black line-clamp-1">{{ _product.productName }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex items-center gap-3">
|
||||
@@ -68,33 +114,60 @@
|
||||
{{ _rating_summary.avgRate | default: 0 }}
|
||||
</span>
|
||||
<a href="#product-spec" class="text-[#0084ff] flex items-center gap-1">
|
||||
<span class="inline-flex items-center justify-center w-5 h-5 rounded-full border border-[#0084ff] text-[11px]">i</span>
|
||||
<span
|
||||
class="inline-flex items-center justify-center w-5 h-5 rounded-full border border-[#0084ff] text-[11px]">i</span>
|
||||
Thông số
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-3">
|
||||
<section class="w-[796px] flex flex-col gap-3">
|
||||
<section class="flex-1 min-w-0 flex flex-col gap-3">
|
||||
<div class="bg-white rounded-[8px] px-3 py-[10px] flex flex-col gap-2">
|
||||
<div class="w-[392px] h-[392px] mx-auto rounded-[8px] overflow-hidden bg-white flex items-center justify-center">
|
||||
<img src="{{ _product.productImage.large }}" alt="{{ _product.productName }}" class="w-full h-full object-contain"
|
||||
onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
||||
<!-- 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>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
{% if _product.productImageGallery.size > 0 %}
|
||||
{% for _image in _product.productImageGallery limit:13 %}
|
||||
<button class="w-[52px] h-[52px] rounded-[2px] overflow-hidden {% if forloop.first %}border border-[#57aeff]{% else %}border border-transparent{% endif %}">
|
||||
<img src="{{ _image.large | default: _image.original | default: _image.small }}" alt="{{ _product.productName }}"
|
||||
class="w-full h-full object-cover" onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
||||
</button>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<button class="w-[52px] h-[52px] rounded-[2px] overflow-hidden border border-[#57aeff]">
|
||||
<img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}" class="w-full h-full object-cover"
|
||||
onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
||||
</button>
|
||||
{% endif %}
|
||||
<!-- 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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -102,37 +175,56 @@
|
||||
<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]">
|
||||
<p class="flex items-start gap-2"><img src="{{ 'icon_double_next_small.svg' | asset_url }}" alt="" class="w-7 h-7 mt-[-2px]" />
|
||||
Hàng chính hãng, hỗ trợ kỹ thuật nhanh chóng.</p>
|
||||
<p class="flex items-start gap-2"><img src="{{ 'icon_certificate.svg' | asset_url }}" alt="" class="w-7 h-7 mt-[-2px]" />
|
||||
{% if _product.warranty != '' %}{{ _product.warranty }}{% else %}Bảo hành theo chính sách của nhà sản xuất.{% endif %}</p>
|
||||
<p class="flex items-start gap-2"><img src="{{ 'icon_certificate.svg' | asset_url }}" alt="" class="w-7 h-7 mt-[-2px]" />
|
||||
{% 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="{{ 'icon_customer_support.svg' | asset_url }}" alt="" class="w-7 h-7 mt-[-2px]" />
|
||||
Tư vấn trước và sau mua hàng trong giờ hành chính.</p>
|
||||
<p class="flex items-start gap-2"><img src="{{ 'icon_double_next_small.svg' | asset_url }}" alt="" class="w-7 h-7 mt-[-2px]" />
|
||||
{% if _product.package_accessory != '' %}{{ _product.package_accessory }}{% else %}Phụ kiện và quà tặng áp dụng theo từng chương trình cụ thể.{% endif %}</p>
|
||||
<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>
|
||||
</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]">
|
||||
<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="w-[472px] flex flex-col gap-1">
|
||||
<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">
|
||||
<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 %}
|
||||
<p class="text-[15px] font-bold text-[#cd0000]">{{ _product.price | number_format }}₫</p>
|
||||
<p class="text-[15px] font-bold text-[#cd0000]">{{ _product.price | format_number }}₫</p>
|
||||
{% else %}
|
||||
<p class="text-[15px] font-bold text-[#cd0000]">Liên hệ</p>
|
||||
{% endif %}
|
||||
{% if _product.marketPrice > 0 %}
|
||||
<p class="text-[13px] text-[#9d9d9d] line-through">{{ _product.marketPrice | number_format }}₫</p>
|
||||
<p class="text-[13px] text-[#9d9d9d] line-through">{{ _product.marketPrice | format_number }}₫</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -140,7 +232,8 @@
|
||||
<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 != '' %}
|
||||
<div class="text-[13px] leading-[22px] tracking-[-0.26px] whitespace-pre-line">{{ _product.productSummary }}</div>
|
||||
<div class="text-[13px] leading-[22px] tracking-[-0.26px] whitespace-pre-line">{{ _product.productSummary }}
|
||||
</div>
|
||||
{% 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>
|
||||
@@ -151,78 +244,117 @@
|
||||
|
||||
<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">
|
||||
<button 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 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>
|
||||
<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>
|
||||
</div>
|
||||
<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" />
|
||||
<!-- 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>
|
||||
</div>
|
||||
<div class="grid grid-cols-[196px_1fr] gap-x-[88px] gap-y-[24px] px-3 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>
|
||||
|
||||
<div class="h-10 rounded-[4px] bg-[#f2f4f7] flex items-center justify-between px-2 mt-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="product-description px-3 text-[13px] leading-[22px] tracking-[-0.26px] text-black overflow-hidden">
|
||||
{% if _product.productDescription != '' %}
|
||||
{{ _product.productDescription }}
|
||||
{% else %}
|
||||
<p>Thông tin mô tả sản phẩm đang được cập nhật.</p>
|
||||
{% endif %}
|
||||
<!-- 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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% comment %}
|
||||
<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">
|
||||
<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>
|
||||
<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>
|
||||
<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]">
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<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 }}'" />
|
||||
<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 }}'" />
|
||||
</div>
|
||||
|
||||
<div class="w-[754px] grid gap-2 text-[13px] tracking-[-0.26px]">
|
||||
<div class="w-full grid gap-2 text-[13px] tracking-[-0.26px]">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="h-px bg-[#e8e8e8] w-[772px]"></div>
|
||||
<div class="h-px bg-[#e8e8e8] w-full"></div>
|
||||
|
||||
<div class="w-[754px] grid gap-2 text-[13px] tracking-[-0.26px]">
|
||||
<div class="w-full grid gap-2 text-[13px] tracking-[-0.26px]">
|
||||
<div class="flex items-center gap-1">
|
||||
<p class="font-bold">MIQ</p>
|
||||
<span class="text-[#35b327]">●</span>
|
||||
@@ -232,23 +364,144 @@
|
||||
</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_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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<aside class="w-[392px] flex flex-col gap-3">
|
||||
<aside class="w-[392px] shrink-0 flex flex-col gap-3">
|
||||
<div class="bg-white rounded-[8px] px-3 py-[14px] flex flex-col gap-[11px]">
|
||||
<img src="{{ 'category_qc_lg.png' | asset_url }}" alt="" class="w-[367px] h-[144px] rounded-[8px] object-cover" />
|
||||
<img src="{{ 'category_qc_samsung.png' | asset_url }}" alt="" class="w-[367px] h-[144px] rounded-[8px] object-cover" />
|
||||
<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" />
|
||||
<div class="flex items-center gap-2 flex-wrap">
|
||||
{% if _product.categoryInfo.size > 0 %}
|
||||
{% for _category in _product.categoryInfo limit:3 %}
|
||||
<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>
|
||||
<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>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<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>
|
||||
<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>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -257,25 +510,79 @@
|
||||
<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 %}
|
||||
<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 %}
|
||||
{% for _addon in _product.addon limit:3 %}
|
||||
<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">
|
||||
<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">
|
||||
<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 %}
|
||||
<p class="text-[14px] font-bold text-[#e40000]">{{ _addon.price | number_format }}đ</p>
|
||||
<p class="text-[14px] font-bold text-[#e40000]">{{ _addon.price | format_number }}đ</p>
|
||||
{% 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>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endcomment %}
|
||||
{% 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>
|
||||
@@ -290,7 +597,9 @@
|
||||
<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">
|
||||
<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>
|
||||
<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>
|
||||
<span class="line-clamp-3">{{ _offer.title }}</span>
|
||||
</p>
|
||||
{% endfor %}
|
||||
@@ -309,7 +618,8 @@
|
||||
{% 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">
|
||||
<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 }}'" />
|
||||
<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 }}'" />
|
||||
<p class="text-[10px] font-medium leading-[14px] line-clamp-2">{{ _gift.title }}</p>
|
||||
</div>
|
||||
{% endfor %}
|
||||
@@ -318,8 +628,30 @@
|
||||
|
||||
<div class="h-px bg-[#ececec]"></div>
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="w-[166px] h-12 rounded-[4px] border border-[#0084ff] text-[#0084ff] text-[25px] leading-4 pb-1">⍟<span class="block text-[13px] leading-4">Thêm vào giỏ</span></button>
|
||||
<button class="w-[166px] h-12 rounded-[4px] bg-[#fc7600] text-white text-[20px] font-semibold">Mua ngay</button>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -327,25 +659,32 @@
|
||||
<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">
|
||||
<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 }}'" />
|
||||
<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 }}'" />
|
||||
<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 %}
|
||||
<p class="text-[13px] leading-6 font-semibold text-[#d90000]">{{ _product.price | number_format }}đ</p>
|
||||
<p class="text-[13px] leading-6 font-semibold text-[#d90000]">{{ _product.price | format_number }}đ</p>
|
||||
{% else %}
|
||||
<p class="text-[13px] leading-6 font-semibold text-[#d90000]">Liên hệ</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</a>
|
||||
<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 }}'" />
|
||||
<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 }}'" />
|
||||
<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 %}
|
||||
<p class="text-[13px] leading-6 font-semibold text-[#d90000]">{{ _product.marketPrice | number_format }}đ</p>
|
||||
<p class="text-[13px] leading-6 font-semibold text-[#d90000]">{{ _product.marketPrice | format_number }}đ
|
||||
</p>
|
||||
{% elsif _product.price > 0 %}
|
||||
<p class="text-[13px] leading-6 font-semibold text-[#d90000]">{{ _product.price | number_format }}đ</p>
|
||||
<p class="text-[13px] leading-6 font-semibold text-[#d90000]">{{ _product.price | format_number }}đ</p>
|
||||
{% else %}
|
||||
<p class="text-[13px] leading-6 font-semibold text-[#d90000]">Liên hệ</p>
|
||||
{% endif %}
|
||||
@@ -356,76 +695,15 @@
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-[12px] h-[431px] overflow-hidden flex gap-3 px-3 py-4">
|
||||
<div class="flex flex-col gap-3 w-[885px] shrink-0 h-[399px]">
|
||||
<h2 class="text-[28px] font-bold text-black tracking-tight">TIN KHUYẾN MẠI</h2>
|
||||
<div class="flex gap-3 items-start">
|
||||
<div class="w-[481px] shrink-0">
|
||||
<div class="w-[481px] h-[300px] rounded-[4px] overflow-hidden">
|
||||
<img src="{{ 'article_main_image.png' | asset_url }}" alt="" class="w-full h-full object-cover" />
|
||||
</div>
|
||||
<p class="mt-2 text-[20px] font-bold text-black tracking-tight">Ngày hội ĐIỆN MÁY - SIÊU RẺ. Duy nhất 17h ngày 10/02 Cơ hội trúng Máy nước</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3 flex-1">
|
||||
<div class="flex gap-3 items-start">
|
||||
<img src="{{ 'article_thumb_1.png' | asset_url }}" alt="" class="w-[153px] h-[92px] rounded-[4px] object-cover shrink-0" />
|
||||
<p class="text-[14px] text-black tracking-tight overflow-hidden">Ngày hội ĐIỆN MÁY - SIÊU RẺ. Duy nhất 17h ngày 10/02 Cơ hội trúng Máy nước</p>
|
||||
</div>
|
||||
<div class="flex gap-3 items-start">
|
||||
<img src="{{ 'article_thumb_2.png' | asset_url }}" alt="" class="w-[153px] h-[92px] rounded-[4px] object-cover shrink-0" />
|
||||
<p class="text-[14px] text-black tracking-tight overflow-hidden">Ngày hội ĐIỆN MÁY - SIÊU RẺ. Duy nhất 17h ngày 10/02 Cơ hội trúng Máy nước</p>
|
||||
</div>
|
||||
<div class="flex gap-3 items-start">
|
||||
<img src="{{ 'article_thumb_3.png' | asset_url }}" alt="" class="w-[153px] h-[92px] rounded-[4px] object-cover shrink-0" />
|
||||
<p class="text-[14px] text-black tracking-tight overflow-hidden">Ngày hội ĐIỆN MÁY - SIÊU RẺ. Duy nhất 17h ngày 10/02 Cơ hội trúng Máy nước</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3 flex-1 h-[356px]">
|
||||
<h2 class="text-[28px] font-bold text-black tracking-tight">VIDEO REVIEW</h2>
|
||||
<div class="flex flex-col gap-3">
|
||||
<div class="w-full h-[159px] rounded-[4px] overflow-hidden relative">
|
||||
<img src="{{ 'video_main.png' | asset_url }}" alt="" class="w-full h-full object-cover" />
|
||||
<div class="absolute inset-0 bg-black/20 rounded-[4px]"></div>
|
||||
</div>
|
||||
<div class="flex gap-3 items-start">
|
||||
<div class="w-[107px] h-[64px] rounded-[4px] overflow-hidden relative shrink-0">
|
||||
<img src="{{ 'video_thumb_1.png' | asset_url }}" alt="" class="w-full h-full object-cover" />
|
||||
<div class="absolute inset-0 bg-black/20 rounded-[4px]"></div>
|
||||
</div>
|
||||
<p class="text-[14px] text-black tracking-tight overflow-hidden">Duy nhất 17h ngày 10/02 Cơ hội trúng Máy nước</p>
|
||||
</div>
|
||||
<div class="flex gap-3 items-start">
|
||||
<div class="w-[107px] h-[64px] rounded-[4px] overflow-hidden relative shrink-0">
|
||||
<img src="{{ 'video_thumb_2.png' | asset_url }}" alt="" class="w-full h-full object-cover" />
|
||||
<div class="absolute inset-0 bg-black/20 rounded-[4px]"></div>
|
||||
</div>
|
||||
<p class="text-[14px] text-black tracking-tight overflow-hidden">Duy nhất 17h ngày 10/02 Cơ hội trúng Máy nước</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-[12px] min-h-[231px] overflow-hidden flex flex-col gap-3 px-3 py-4">
|
||||
<h2 class="text-[24px] leading-[28px] font-bold text-black tracking-tight">Mọi người cũng tìm kiếm</h2>
|
||||
<div class="bg-[#f3f4f7] rounded-[12px] min-h-[156px] overflow-hidden px-3 py-4 flex flex-wrap gap-5 text-[12px] text-black">
|
||||
<span>hút mùi hafele</span>
|
||||
<span>bếp từ cheft</span>
|
||||
<span>nồi cơm điện Tiger</span>
|
||||
<span>máy cạo râu Enchen</span>
|
||||
<span>mũ bảo hiểm</span>
|
||||
<span>nồi cơm điện Cuckoo</span>
|
||||
<span>iPhone 15</span>
|
||||
<span>chảo chống dính Elmich</span>
|
||||
<span>máy massage X5 Pro Omni</span>
|
||||
<span>điều hòa Samsung</span>
|
||||
<span>máy lọc nước Korihome Kangen K8</span>
|
||||
<span>tông đơ cắt tóc</span>
|
||||
<span>điều hoà Hisense</span>
|
||||
<span>Máy chạy bộ</span>
|
||||
<span>MacBook Air M4</span>
|
||||
<span>điều hòa Nagakawa</span>
|
||||
</div>
|
||||
<!-- 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!
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user