update
This commit is contained in:
@@ -48,7 +48,7 @@
|
||||
<img src="{{ 'icon_close.svg' | asset_url }}" alt="" class="w-4 h-4 shrink-0" />
|
||||
</div>
|
||||
{% if _product.price > 0 %}
|
||||
<p class="text-[13px] font-extrabold text-[#e00000] tracking-tight">{{ _product.price | number_format }} <span
|
||||
<p class="text-[13px] font-extrabold text-[#e00000] tracking-tight">{{ _product.price | format_number }} <span
|
||||
class="underline">đ</span></p>
|
||||
{% else %}
|
||||
<p class="text-[13px] font-extrabold text-[#e00000] tracking-tight">Liên hệ</p>
|
||||
@@ -62,12 +62,11 @@
|
||||
<!-- BST Sale -->
|
||||
{% if page.product_collection.size > 0 %}
|
||||
<div class="relative w-full rounded-[12px] overflow-hidden">
|
||||
<img src="{{ 'bst_sale_bg.png' | asset_url }}" alt="" class="absolute inset-0 w-full h-full object-cover" />
|
||||
<img src="{{ 'bst_sale_bg.png' | asset_url }}" alt="" class="absolute inset-0 w-full h-full" />
|
||||
<div class="relative flex flex-col gap-3 px-[11px] pt-[93px] pb-5">
|
||||
<!-- Title -->
|
||||
<div class="flex justify-center">
|
||||
<div class="flex items-center justify-center h-[54px] w-[608px] rounded-full"
|
||||
style="background: linear-gradient(90deg, #bf4000 0%, #e86020 50%, #f07810 100%)">
|
||||
<div class="flex items-center justify-center h-[54px] w-[608px] rounded-full" style="">
|
||||
<p class="text-[24px] font-bold text-white uppercase text-center tracking-tight">Ngập tràn ưu đãi- Đừng bỏ
|
||||
lỡ!</p>
|
||||
</div>
|
||||
@@ -100,19 +99,20 @@
|
||||
LẠNH - 50%</span>
|
||||
</div>
|
||||
<!-- Product Grid -->
|
||||
<div class="grid grid-cols-5 gap-2">
|
||||
{% for _product in page.product_collection limit:8 %}
|
||||
<div class="bg-white rounded-[8px] flex flex-col items-center gap-[11px] px-[11px] py-3">
|
||||
<a href="/product/detail" class="block"><img src="{{ _product.productImage.large }}"
|
||||
alt="{{ _product.productName }}" class="w-[204px] h-[204px] rounded-[4px] object-cover" /></a>
|
||||
<div class="relative w-[204px] h-[51px] flex flex-col justify-center px-2 py-[7px]">
|
||||
<div class="grid grid-cols-5 2xl:grid-cols-6 gap-2">
|
||||
{% for _product in page.product_collection limit:12 %}
|
||||
<div
|
||||
class="bg-white rounded-[8px] flex flex-col items-center gap-[11px] px-[11px] py-3{% if forloop.index > 10 %} hidden 2xl:block{% endif %}">
|
||||
<a href="/product/detail" class="block w-full"><img src="{{ _product.productImage.large }}"
|
||||
alt="{{ _product.productName }}" class="w-full aspect-square rounded-[4px] object-cover" /></a>
|
||||
<div class="relative w-full h-[51px] flex flex-col justify-center px-2 py-[7px]">
|
||||
<img src="{{ 'sale_price_box_bg.svg' | asset_url }}" alt=""
|
||||
class="absolute inset-0 w-full h-full object-cover" />
|
||||
{% if _product.price > 0 %}
|
||||
<p class="relative text-[16px] font-bold text-white tracking-tight">{{ _product.price | number_format }} đ
|
||||
<p class="relative text-[16px] font-bold text-white tracking-tight">{{ _product.price | format_number }} đ
|
||||
</p>
|
||||
{% if _product.marketPrice > 0 and _product.price_off != '' %}
|
||||
<p class="relative text-[11px] text-white tracking-tight">{{ _product.marketPrice | number_format }} đ (-{{
|
||||
<p class="relative text-[11px] text-white tracking-tight">{{ _product.marketPrice | format_number }} đ (-{{
|
||||
_product.price_off }}%)</p>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
@@ -120,10 +120,10 @@
|
||||
{% endif %}
|
||||
</div>
|
||||
<a href="/product/detail"
|
||||
class="text-[13px] font-bold text-black tracking-tight w-[204px] hover:text-[#e4057c] line-clamp-2 h-[40px]">{{
|
||||
class="text-[13px] font-bold text-black tracking-tight w-full hover:text-[#e4057c] line-clamp-2 h-[40px]">{{
|
||||
_product.productName }}</a>
|
||||
<div
|
||||
class="bg-white border border-[#e00000] rounded-full h-7 flex items-center justify-center w-[204px] cursor-pointer hover:bg-red-50">
|
||||
class="bg-white border border-[#e00000] rounded-full h-7 flex items-center justify-center w-full cursor-pointer hover:bg-red-50">
|
||||
<span class="text-[#bd0000] text-[14px] font-medium tracking-tight">MUA DEAL HỜI</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -247,7 +247,7 @@
|
||||
class="absolute inset-0 w-full h-full object-cover" />
|
||||
<div class="absolute inset-0 flex flex-col items-center justify-end pb-[5px]">
|
||||
<p class="text-[28px] font-bold text-white text-center capitalize tracking-tight">{{ _cat_info.name }}</p>
|
||||
<a href="{{ _cat_info.url }}" class="text-[12px] font-semibold text-[#fdd717] text-center font-inter">Xem tất cả
|
||||
<a href="/product/category" class="text-[12px] font-semibold text-[#fdd717] text-center font-inter">Xem tất cả
|
||||
>></a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -258,47 +258,49 @@
|
||||
<div class="swiper-slide">
|
||||
<div
|
||||
class="relative bg-white border border-[#dcdcdc] rounded-[8px] p-[9px] pt-[10px] flex flex-col gap-[10px] h-full">
|
||||
<a href="/product/detail" class="block">
|
||||
<a href="/product/detail?id={{ _product.productId }}" class="block">
|
||||
<img src="{{ _product.productImage.large }}" alt="{{ _product.productName }}"
|
||||
class="w-full aspect-square rounded-[4px] object-cover"
|
||||
onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
||||
</a>
|
||||
{% if _product.productType.isSaleOff == 1 %}
|
||||
<span class="inline-block h-5 rounded-full text-white text-[10px] font-medium px-2 leading-5 w-fit"
|
||||
style="background:linear-gradient(89.82deg,#ff0000 2.38%,#cc0003 94.82%)">Sale off</span>
|
||||
{% elsif _product.productType.isHot == 1 %}
|
||||
<span class="inline-block h-5 rounded-full text-white text-[10px] font-medium px-2 leading-5 w-fit"
|
||||
style="background:linear-gradient(89.82deg,#ff6600 2.38%,#cc4400 94.82%)">Hot</span>
|
||||
{% elsif _product.productType.isNew == 1 %}
|
||||
<span class="inline-block h-5 rounded-full text-white text-[10px] font-medium px-2 leading-5 w-fit"
|
||||
style="background:linear-gradient(89.82deg,#0066ff 2.38%,#0044cc 94.82%)">Mới</span>
|
||||
{% endif %}
|
||||
<div class="inline-flex w-fit h-5 items-center gap-1 rounded-full pl-1 pr-[10px] text-white text-[10px] font-medium tracking-[-0.2px]"
|
||||
style="background:linear-gradient(89.82deg,#ff0000 2.38%,#cc0003 94.82%)">
|
||||
<span class="w-4 h-4 rounded-full bg-white flex items-center justify-center overflow-hidden"><img
|
||||
src="{{ 'icon_gift.png' | asset_url }}" alt="" class="w-[11px] h-[11px] object-contain" /></span>
|
||||
<span>{{ _product.label | strip | default: 'Sắm tết vô tư' }}</span>
|
||||
</div>
|
||||
{% if _product.price > 0 %}
|
||||
<div class="flex items-center gap-1">
|
||||
<p class="text-[18px] font-bold text-[#db0000]">{{ _product.price | number_format }} <span
|
||||
<div class="flex items-center gap-[6px]">
|
||||
<p class="text-[18px] leading-none font-bold text-[#db0000] tracking-[-0.36px]">{{ _product.price | format_number }} <span
|
||||
class="underline">đ</span></p>
|
||||
{% if _product.price_off != '' and _product.price_off != '0' %}
|
||||
<span class="bg-[#ffeef0] rounded-full px-[7px] py-[2px] text-[10px] font-medium text-[#dc0d28]">-{{
|
||||
_product.price_off }}%</span>
|
||||
{% assign _price_off = _product.price_off | strip %}
|
||||
{% if _price_off != '' and _price_off != '0' %}
|
||||
<span class="min-w-[35px] h-4 px-[7px] rounded-full bg-[#ffeef0] text-[#dc0d28] text-[10px] leading-none font-medium tracking-[-0.2px] inline-flex items-center justify-center">-{{
|
||||
_price_off }}%</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if _product.marketPrice > 0 %}
|
||||
<p class="text-[12px] text-[#c5c5c5] line-through">{{ _product.marketPrice | number_format }} đ</p>
|
||||
<p class="text-[12px] leading-none text-[#c5c5c5] tracking-[-0.24px] line-through">{{ _product.marketPrice | format_number }} đ</p>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<p class="text-[18px] font-bold text-[#db0000]">Liên hệ</p>
|
||||
<p class="text-[18px] leading-none font-bold text-[#db0000] tracking-[-0.36px]">Liên hệ</p>
|
||||
{% endif %}
|
||||
<a href="/product/detail" class="text-[13px] font-bold text-black hover:text-[#e4057c] line-clamp-2">{{
|
||||
<a href="/product/detail?id={{ _product.productId }}" class="h-[32px] overflow-hidden text-[13px] leading-[16px] font-bold tracking-[-0.26px] text-black hover:text-[#e4057c]">{{
|
||||
_product.productName
|
||||
}}</a>
|
||||
{% if _product.rating > 0 %}
|
||||
<div class="flex items-center gap-1 text-[12px] text-[#707070]">
|
||||
<img src="{{ 'icon_rating_star.svg' | asset_url }}" alt="" class="w-[11px] h-[11px]" />
|
||||
<span>{{ _product.rating }} · {{ _product.reviewCount }} đánh giá</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<img src="{{ 'product_badge_1.png' | asset_url }}" alt="" class="w-8 h-8 rounded-full object-cover"
|
||||
onerror="this.style.display='none'">
|
||||
<img src="{{ 'product_badge_2.png' | asset_url }}" alt="" class="w-8 h-8 rounded-full object-cover"
|
||||
onerror="this.style.display='none'">
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="mt-auto flex justify-end">
|
||||
<div class="w-6 h-6 bg-[#BBBBBB] rounded-full flex items-center justify-center shadow">
|
||||
<div class="mt-auto flex items-center justify-between gap-[6px]">
|
||||
<div class="inline-flex items-center gap-1 text-[#707070] text-[12px] leading-none tracking-[-0.24px] whitespace-nowrap">
|
||||
<img src="{{ 'icon_rating_star.svg' | asset_url }}" alt="" class="w-[11px] h-[11px]" />
|
||||
<span>{{ _product.rating | default: 0 }} · Đã bán {{ _product.reviewCount | default: 0 }}</span>
|
||||
</div>
|
||||
|
||||
<div class="w-6 h-6 bg-[#BBBBBB] rounded-full flex items-center justify-center shrink-0 shadow">
|
||||
<img src="{{ 'icon_cart_circle.svg' | asset_url }}" alt="" class="w-4 h-4" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -319,4 +321,4 @@
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
<!-- /container -->
|
||||
<!-- /container -->
|
||||
|
||||
Reference in New Issue
Block a user