325 lines
18 KiB
HTML
325 lines
18 KiB
HTML
<div class="layout-container flex flex-col gap-[27px]">
|
|
|
|
<!-- Banner Slider -->
|
|
<div class="w-full h-[364px] rounded-[12px] overflow-hidden relative mt-[20px]">
|
|
<div class="swiper homepage-banner-slider h-full">
|
|
<div class="swiper-wrapper">
|
|
{% for _banner in banner.banner.homepage.banner_slider_homepage %}
|
|
<a href="{{ _banner.desUrl | default: '#' }}" class="swiper-slide block h-full">
|
|
<img src="{{ _banner.fileUrl }}" alt="{{ _banner.title | default: 'Banner' }}"
|
|
class="w-full h-full object-cover" />
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="swiper-pagination homepage-banner-pagination"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Category Icons -->
|
|
<div class="bg-white border border-dashed border-[#db0000] rounded-[8px] p-3 grid grid-cols-8 gap-3">
|
|
{% assign no_image_url = 'no-image.png' | asset_url %}
|
|
{% for _cat in component.main_menu.product.all_category %}
|
|
{% if _cat.is_featured == '1' %}
|
|
<a href="{{ _cat.url }}" class="flex flex-col items-center justify-center h-[99px] hover:bg-gray-50 rounded">
|
|
<img src="{{ _cat.thumnail }}" alt="{{ _cat.title }}" class="w-12 h-12 object-cover"
|
|
onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
|
<span class="text-xs text-black text-center mt-[6px] tracking-tight">{{ _cat.title }}</span>
|
|
</a>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- Product History -->
|
|
<div class="bg-white rounded-[4px] px-3 py-[9px] flex flex-col gap-3">
|
|
<div class="flex items-center gap-2">
|
|
<img src="{{ 'icon_star_gold.svg' | asset_url }}" alt="" class="w-5 h-5" />
|
|
<span class="text-[20px] font-bold text-black tracking-tight">Sản phẩm đã xem</span>
|
|
</div>
|
|
<div class="grid grid-cols-4 gap-3">
|
|
{% for _product in page.product_history | limit: 4 %}
|
|
<div class="bg-white border border-[#f2f2f2] rounded-[4px] flex items-start gap-2 p-[10px]">
|
|
<a href="/product/detail" class="shrink-0 block"><img src="{{ _product.productImage.small }}"
|
|
alt="{{ _product.productName }}" class="w-[60px] h-[60px] rounded-[4px] object-cover shrink-0" /></a>
|
|
<div class="flex flex-col gap-3 flex-1">
|
|
<div class="flex items-start justify-between gap-1">
|
|
<a href="/product/detail"
|
|
class="text-[13px] text-black tracking-tight line-clamp-2 w-[177px] hover:text-[#e4057c]">{{
|
|
_product.productName }}</a>
|
|
<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 | format_number }} <span
|
|
class="underline">đ</span></p>
|
|
{% else %}
|
|
<p class="text-[13px] font-extrabold text-[#e00000] tracking-tight">Liên hệ</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 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" />
|
|
<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="">
|
|
<p class="text-[24px] font-bold text-white uppercase text-center tracking-tight">Ngập tràn ưu đãi- Đừng bỏ
|
|
lỡ!</p>
|
|
</div>
|
|
</div>
|
|
<!-- Tab Filters -->
|
|
<div class="flex items-center gap-2 flex-wrap">
|
|
<span
|
|
class="bg-white text-black text-[13px] px-[17px] py-[6px] rounded-full cursor-pointer hover:bg-gray-100 capitalize">TẾT
|
|
CHILL - VOUCHER 15%</span>
|
|
<span
|
|
class="bg-white text-black text-[13px] px-[17px] py-[6px] rounded-full cursor-pointer hover:bg-gray-100 capitalize">TIVI
|
|
- GIẢM 50%</span>
|
|
<span
|
|
class="bg-white text-black text-[13px] px-[17px] py-[6px] rounded-full cursor-pointer hover:bg-gray-100 capitalize">GIA
|
|
DỤNG - 50%</span>
|
|
<span
|
|
class="bg-white text-black text-[13px] px-[17px] py-[6px] rounded-full cursor-pointer hover:bg-gray-100 capitalize">MÁY
|
|
GIẶT - 50%</span>
|
|
<span
|
|
class="bg-white text-black text-[13px] px-[17px] py-[6px] rounded-full cursor-pointer hover:bg-gray-100 capitalize">PHỤ
|
|
KIỆN - 50%</span>
|
|
<span
|
|
class="bg-white text-black text-[13px] px-[17px] py-[6px] rounded-full cursor-pointer hover:bg-gray-100 capitalize">CÔNG
|
|
NGHỆ CAO - 50%</span>
|
|
<span
|
|
class="bg-white text-black text-[13px] px-[17px] py-[6px] rounded-full cursor-pointer hover:bg-gray-100 capitalize">ĐIỀU
|
|
HÒA - 50%</span>
|
|
<span
|
|
class="bg-white text-black text-[13px] px-[17px] py-[6px] rounded-full cursor-pointer hover:bg-gray-100 capitalize">TỦ
|
|
LẠNH - 50%</span>
|
|
</div>
|
|
<!-- Product Grid -->
|
|
<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 | format_number }} đ
|
|
</p>
|
|
{% if _product.marketPrice > 0 and _product.price_off != '' %}
|
|
<p class="relative text-[11px] text-white tracking-tight">{{ _product.marketPrice | format_number }} đ (-{{
|
|
_product.price_off }}%)</p>
|
|
{% endif %}
|
|
{% else %}
|
|
<p class="relative text-[16px] font-bold text-white tracking-tight">Liên hệ</p>
|
|
{% endif %}
|
|
</div>
|
|
<a href="/product/detail"
|
|
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-full cursor-pointer hover:bg-red-50">
|
|
<span class="text-[#bd0000] text-[14px] font-medium tracking-tight">MUA DEAL HỜI</span>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
<!-- Xem thêm deal -->
|
|
<div class="flex items-center gap-1 cursor-pointer">
|
|
<span class="text-[#db0000] text-[13px] font-medium tracking-tight">Xem thêm deal</span>
|
|
<img src="{{ 'icon_double_next.svg' | asset_url }}" alt="" class="w-[10px] h-[10px]" />
|
|
<img src="{{ 'icon_double_next.svg' | asset_url }}" alt="" class="w-[10px] h-[10px] -ml-1" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Top Trending -->
|
|
<div class="bg-white rounded-[8px] px-3 pt-5 pb-0 h-[505px] overflow-hidden flex flex-col gap-3">
|
|
<h2 class="text-[28px] font-bold text-black tracking-tight">Top trending</h2>
|
|
<div class="grid grid-cols-4 gap-3 h-[420px]">
|
|
<!-- Combo văn phòng -->
|
|
<div class="bg-white rounded-[4px] h-[420px] overflow-hidden flex flex-col gap-[19px] p-3">
|
|
<div class="flex items-center gap-1">
|
|
<a href="#" class="text-[16px] font-bold text-[#1877f2] tracking-tight">Combo văn phòng</a>
|
|
<i class="fa-solid fa-angles-right text-[#1877f2] text-[10px]"></i>
|
|
</div>
|
|
<div class="flex flex-wrap gap-3 w-[262px]">
|
|
<div class="bg-white rounded-[4px] w-[124px] h-[166px] flex flex-col">
|
|
<div class="h-[125px] flex items-center justify-center overflow-hidden">
|
|
<img src="{{ 'trending_may_in_laser.png' | asset_url }}" alt="" class="h-[83px] object-contain" />
|
|
</div>
|
|
<p class="text-[13px] text-black text-center px-1">Máy in laser trắng...</p>
|
|
</div>
|
|
<div class="bg-white rounded-[4px] w-[124px] h-[166px] flex flex-col">
|
|
<div class="h-[125px] flex items-center justify-center overflow-hidden">
|
|
<img src="{{ 'trending_man_hinh.png' | asset_url }}" alt="" class="h-[83px] object-contain" />
|
|
</div>
|
|
<p class="text-[13px] text-black text-center px-1">Màn hình máy tính...</p>
|
|
</div>
|
|
<div class="bg-white rounded-[4px] w-[124px] h-[166px] flex flex-col">
|
|
<div class="h-[125px] flex items-center justify-center overflow-hidden">
|
|
<img src="{{ 'trending_mac_mini.png' | asset_url }}" alt="" class="h-[83px] object-contain" />
|
|
</div>
|
|
<p class="text-[13px] text-black text-center px-1">Mac mini ...</p>
|
|
</div>
|
|
<div class="bg-white rounded-[4px] w-[124px] h-[166px] flex flex-col">
|
|
<div class="h-[125px] flex items-center justify-center overflow-hidden">
|
|
<img src="{{ 'trending_muc_in.png' | asset_url }}" alt="" class="h-[83px] object-contain" />
|
|
</div>
|
|
<p class="text-[13px] text-black text-center px-1">Mực in phun...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Tivi bán chạy nhất -->
|
|
<div class="bg-white rounded-[4px] h-[420px] overflow-hidden flex flex-col gap-4 p-3">
|
|
<div class="flex items-center gap-1">
|
|
<a href="#" class="text-[16px] font-bold text-[#1877f2] tracking-tight">Tivi bán chạy nhất</a>
|
|
<i class="fa-solid fa-angles-right text-[#1877f2] text-[10px]"></i>
|
|
</div>
|
|
<div class="flex flex-col gap-3">
|
|
<img src="{{ 'trending_tivi_main.png' | asset_url }}" alt=""
|
|
class="w-full aspect-square rounded-[4px] object-cover" />
|
|
<div class="flex gap-3">
|
|
<img src="{{ 'trending_tivi_main.png' | asset_url }}" alt=""
|
|
class="w-[80px] h-[80px] rounded-[4px] object-cover border border-[#90004b]" />
|
|
<img src="{{ 'trending_tivi_2.png' | asset_url }}" alt=""
|
|
class="w-[79px] h-[80px] rounded-[4px] object-cover" />
|
|
<img src="{{ 'trending_tivi_3.png' | asset_url }}" alt=""
|
|
class="w-[79px] h-[80px] rounded-[4px] object-cover" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Sống khỏe mỗi ngày -->
|
|
<div class="bg-white rounded-[4px] h-[420px] overflow-hidden flex flex-col gap-4 p-3">
|
|
<div class="flex items-center gap-1">
|
|
<a href="#" class="text-[16px] font-bold text-[#1877f2] tracking-tight">Sống khỏe mỗi ngày</a>
|
|
<i class="fa-solid fa-angles-right text-[#1877f2] text-[10px]"></i>
|
|
</div>
|
|
<div class="flex flex-col gap-3">
|
|
<img src="{{ 'trending_suc_khoe_main.png' | asset_url }}" alt=""
|
|
class="w-full aspect-square rounded-[4px] object-cover" />
|
|
<div class="flex gap-3">
|
|
<img src="{{ 'trending_suc_khoe_1.png' | asset_url }}" alt=""
|
|
class="w-[80px] h-[80px] rounded-[4px] object-cover border border-[#90004b]" />
|
|
<img src="{{ 'trending_suc_khoe_2.png' | asset_url }}" alt=""
|
|
class="w-[79px] h-[80px] rounded-[4px] object-cover" />
|
|
<img src="{{ 'trending_suc_khoe_3.png' | asset_url }}" alt=""
|
|
class="w-[79px] h-[80px] rounded-[4px] object-cover" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Gia dụng tiện ích -->
|
|
<div class="bg-white rounded-[4px] h-[420px] overflow-hidden flex flex-col gap-4 p-3">
|
|
<div class="flex items-center gap-1">
|
|
<a href="#" class="text-[16px] font-bold text-[#1877f2] tracking-tight">Gia dụng tiện ích</a>
|
|
<i class="fa-solid fa-angles-right text-[#1877f2] text-[10px]"></i>
|
|
</div>
|
|
<div class="flex flex-wrap gap-3">
|
|
<div class="w-[262px] h-[262px] bg-white rounded-[4px] relative overflow-hidden">
|
|
<img src="{{ 'trending_gia_dung_main.png' | asset_url }}" alt=""
|
|
class="absolute inset-0 w-full h-full object-cover" />
|
|
</div>
|
|
<img src="{{ 'trending_gia_dung_1.png' | asset_url }}" alt=""
|
|
class="w-[80px] h-[80px] rounded-[4px] object-cover border border-[#90004b]" />
|
|
<img src="{{ 'trending_gia_dung_2.png' | asset_url }}" alt=""
|
|
class="w-[78px] h-[80px] rounded-[4px] object-cover" />
|
|
<img src="{{ 'trending_gia_dung_3.png' | asset_url }}" alt=""
|
|
class="w-[80px] h-[80px] rounded-[4px] object-cover" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Product Category -->
|
|
{% assign no_image_url = 'no-image.png' | asset_url %}
|
|
{% for _cat_products in page.product_category %}
|
|
{% if _cat_products.size > 0 %}
|
|
{% assign _cat_first = _cat_products | first %}
|
|
{% assign _cat_info = _cat_first.categories | first %}
|
|
<div class="relative w-full">
|
|
<div class="relative w-[794px] h-[123px] mx-auto">
|
|
<img src="{{ 'category_banner_dien_tu.png' | asset_url }}" alt=""
|
|
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="/product/category" class="text-[12px] font-semibold text-[#fdd717] text-center font-inter">Xem tất cả
|
|
>></a>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white rounded-[12px] px-3 py-[17px] mt-[10px] relative">
|
|
<div class="swiper product-category-slider overflow-hidden">
|
|
<div class="swiper-wrapper">
|
|
{% for _product in _cat_products %}
|
|
<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?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>
|
|
<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-[6px]">
|
|
<p class="text-[18px] leading-none font-bold text-[#db0000] tracking-[-0.36px]">{{ _product.price | format_number }} <span
|
|
class="underline">đ</span></p>
|
|
{% 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] leading-none text-[#c5c5c5] tracking-[-0.24px] line-through">{{ _product.marketPrice | format_number }} đ</p>
|
|
{% endif %}
|
|
{% else %}
|
|
<p class="text-[18px] leading-none font-bold text-[#db0000] tracking-[-0.36px]">Liên hệ</p>
|
|
{% endif %}
|
|
<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>
|
|
<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>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
<div
|
|
class="swiper-button-prev !w-8 !h-8 !bg-white !rounded-full shadow-md after:!text-[14px] after:!font-bold after:!text-gray-600">
|
|
</div>
|
|
<div
|
|
class="swiper-button-next !w-8 !h-8 !bg-white !rounded-full shadow-md after:!text-[14px] after:!font-bold after:!text-gray-600">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
</div>
|
|
<!-- /container -->
|