This commit is contained in:
2026-03-10 15:07:29 +07:00
parent e2189983f6
commit 1f599a859b
52 changed files with 4136 additions and 1811 deletions

View File

@@ -1,4 +1,4 @@
<div class="layout-container flex flex-col gap-[27px]">
<div class="layout-container flex flex-col gap-[27px] mt-[20px]">
<!-- Box Article + Video Review -->
<div class="bg-white rounded-[12px] overflow-hidden flex gap-3 px-3 py-4">
<!-- Tin khuyến mãi -->
@@ -35,9 +35,10 @@
{% assign _article_idx = _article_idx | plus: 1 %}
{% endfor %}
{% endfor %}
{% if _article_idx > 0 %}</div>{% endif %}
</div>
{% if _article_idx > 0 %}
</div>{% endif %}
</div>
</div>
<!-- Video Review -->
<div class="flex flex-col gap-3 flex-1">
<h2 class="text-[28px] font-bold text-black tracking-tight">VIDEO REVIEW</h2>
@@ -66,29 +67,29 @@
</div>
</div>
<!-- Key Search -->
<div class="bg-white w-[100%] rounded-[12px] my-[20px] 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] overflow-hidden px-3 py-4 flex flex-wrap gap-[10px] text-[12px] text-black">
<a href="/search?q=hút+mùi+hafele" class="hover:text-[#e4057c]">hút mùi hafele</a>
<a href="/search?q=bếp+từ+cheft" class="hover:text-[#e4057c]">bếp từ cheft</a>
<a href="/search?q=nồi+cơm+điện+Tiger" class="hover:text-[#e4057c]">nồi cơm điện Tiger</a>
<a href="/search?q=máy+cạo+râu+Enchen" class="hover:text-[#e4057c]">máy cạo râu Enchen</a>
<a href="/search?q=mũ+bảo+hiểm" class="hover:text-[#e4057c]">mũ bảo hiểm</a>
<a href="/search?q=nồi+cơm+điện+Cuckoo" class="hover:text-[#e4057c]">nồi cơm điện Cuckoo</a>
<a href="/search?q=iPhone+15" class="hover:text-[#e4057c]">iPhone 15</a>
<a href="/search?q=chảo+chống+dính+Elmich" class="hover:text-[#e4057c]">chảo chống dính Elmich</a>
<a href="/search?q=máy+massage+X5+Pro+Omni" class="hover:text-[#e4057c]">máy massage X5 Pro Omni</a>
<a href="/search?q=điều+hòa+Samsung" class="hover:text-[#e4057c]">điều hòa Samsung</a>
<a href="/search?q=máy+lọc+nước+Korihome+Kangen+K8" class="hover:text-[#e4057c]">máy lọc nước Korihome Kangen
K8</a>
<a href="/search?q=tông+đơ+cắt+tóc" class="hover:text-[#e4057c]">tông đơ cắt tóc</a>
<a href="/search?q=điều+hoà+Hisense" class="hover:text-[#e4057c]">điều hoà Hisense</a>
<a href="/search?q=Máy+chạy+bộ" class="hover:text-[#e4057c]">Máy chạy bộ</a>
<a href="/search?q=MacBook+Air+M4" class="hover:text-[#e4057c]">MacBook Air M4</a>
<a href="/search?q=điều+hòa+Nagakawa" class="hover:text-[#e4057c]">điều hòa Nagakawa</a>
</div>
<!-- Key Search -->
<div class="bg-white w-[100%] rounded-[12px] my-[20px] 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] overflow-hidden px-3 py-4 flex flex-wrap gap-[10px] text-[12px] text-black">
<a href="/search?q=hút+mùi+hafele" class="hover:text-[#e4057c]">hút mùi hafele</a>
<a href="/search?q=bếp+từ+cheft" class="hover:text-[#e4057c]">bếp từ cheft</a>
<a href="/search?q=nồi+cơm+điện+Tiger" class="hover:text-[#e4057c]">nồi cơm điện Tiger</a>
<a href="/search?q=máy+cạo+râu+Enchen" class="hover:text-[#e4057c]">máy cạo râu Enchen</a>
<a href="/search?q=mũ+bảo+hiểm" class="hover:text-[#e4057c]">mũ bảo hiểm</a>
<a href="/search?q=nồi+cơm+điện+Cuckoo" class="hover:text-[#e4057c]">nồi cơm điện Cuckoo</a>
<a href="/search?q=iPhone+15" class="hover:text-[#e4057c]">iPhone 15</a>
<a href="/search?q=chảo+chống+dính+Elmich" class="hover:text-[#e4057c]">chảo chống dính Elmich</a>
<a href="/search?q=máy+massage+X5+Pro+Omni" class="hover:text-[#e4057c]">máy massage X5 Pro Omni</a>
<a href="/search?q=điều+hòa+Samsung" class="hover:text-[#e4057c]">điều hòa Samsung</a>
<a href="/search?q=máy+lọc+nước+Korihome+Kangen+K8" class="hover:text-[#e4057c]">máy lọc nước Korihome Kangen
K8</a>
<a href="/search?q=tông+đơ+cắt+tóc" class="hover:text-[#e4057c]">tông đơ cắt tóc</a>
<a href="/search?q=điều+hoà+Hisense" class="hover:text-[#e4057c]">điều hoà Hisense</a>
<a href="/search?q=Máy+chạy+bộ" class="hover:text-[#e4057c]">Máy chạy bộ</a>
<a href="/search?q=MacBook+Air+M4" class="hover:text-[#e4057c]">MacBook Air M4</a>
<a href="/search?q=điều+hòa+Nagakawa" class="hover:text-[#e4057c]">điều hòa Nagakawa</a>
</div>
</div>
</div>

View File

@@ -102,10 +102,10 @@
<span class="text-white text-sm font-semibold">Đăng nhập</span>
</div>
<div class="flex items-center gap-[10px] cursor-pointer">
<a href="/cart" class="flex items-center gap-[10px] cursor-pointer">
<img src="{{ 'icon_arrow_next.svg' | asset_url }}" alt="" class="w-[20.844px] h-[18.688px]" />
<span class="text-white text-sm font-semibold">Giỏ hàng</span>
</div>
</a>
<div id="btn-showroom"
class="bg-[#b70061] h-8 rounded-full flex items-center justify-between pl-[11px] pr-[7px] w-[199px] cursor-pointer select-none"
@@ -263,4 +263,29 @@
</div>
</header>
<div id="overlay" class="hidden fixed inset-0 bg-black/30 z-40" onclick="closeAll()"></div>
<div id="overlay" class="hidden fixed inset-0 bg-black/30 z-40" onclick="closeAll()"></div>
<!-- Cart popup modal (global) -->
<div id="cart-popup" class="hidden fixed inset-0 z-[999] items-center justify-center bg-black/40" style="display:none">
<div class="bg-white rounded-[12px] p-5 w-[400px] flex flex-col gap-4 shadow-2xl">
<div class="flex items-center gap-2">
<div class="w-6 h-6 rounded-full bg-[#35b327] flex items-center justify-center shrink-0">
<svg class="w-4 h-4" fill="none" stroke="white" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />
</svg>
</div>
<p class="text-[15px] font-semibold text-[#35b327]">Đã thêm sản phẩm vào giỏ hàng!</p>
</div>
<div class="flex items-center gap-3 py-1">
<img id="cart-popup-img" src="" alt="" class="w-16 h-16 rounded-[4px] object-cover border border-[#ebebeb] shrink-0" />
<div class="flex-1 min-w-0">
<p id="cart-popup-name" class="text-[13px] font-semibold text-black line-clamp-2"></p>
<p id="cart-popup-price" class="text-[14px] font-bold text-[#e40000] mt-1"></p>
</div>
</div>
<div class="flex items-center gap-3">
<button onclick="closeCartPopup()" class="flex-1 h-10 rounded-[4px] border border-[#d0d0d0] text-[13px] font-medium text-[#333] hover:bg-gray-50">Tiếp tục mua sắm</button>
<a href="/cart" class="flex-1 h-10 rounded-[4px] bg-[#0084ff] text-white text-[13px] font-medium inline-flex items-center justify-center hover:bg-[#0066cc]">Xem giỏ hàng</a>
</div>
</div>
</div>