tieptk/agent_test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
tieptk
2026-03-10 15:07:29 +07:00
parent e2189983f6
commit 1f599a859b
52 changed files with 4136 additions and 1811 deletions
Download Patch File Download Diff File Expand all files Collapse all files

247
template/cart/home.html Normal file
View File

@@ -0,0 +1,247 @@
<!-- Breadcrumb -->
<div class="layout-container py-3">
<div class="flex items-center gap-2 text-[12px]">
<a href="/" class="text-[#888] hover:text-brand">Trang chủ</a>
<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" />
</svg>
<span class="text-[#0a0a0a] font-medium">Giỏ hàng</span>
</div>
</div>
<!-- Main Content -->
<div class="layout-container pb-12 flex justify-center">
<div class="bg-white px-4 py-5 w-[832px]">
<div class="flex flex-col gap-3 w-full">
<!-- Section: Thông tin giỏ hàng -->
<h2 class="font-bold text-[16px] text-[#0a0a0a] leading-7">Thông tin giỏ hàng</h2>
<!-- Cart Items -->
{% for _item in page.cart_items %}
{% assign _info = _item.item_info %}
{% assign _ic = _item.in_cart %}
<div class="cart-item-wrap flex flex-col gap-1">
<div class="cart-item flex gap-4 items-start" data-id="{{ _item._id }}" data-price="{{ _ic.price }}"
data-qty="{{ _ic.quantity }}">
<!-- Image -->
<div class="bg-[#f3f4f6] flex items-center justify-center shrink-0 w-16 h-16">
<a href="{{ _info.productUrl }}">
<img src="{{ _info.productImage.small }}" alt="{{ _info.productName }}"
class="w-16 h-16 object-contain" />
</a>
</div>
<!-- Info -->
<div class="flex flex-col flex-1">
<div class="flex items-start justify-between w-full">
<a href="{{ _info.productUrl }}" class="font-bold text-[13px] text-[#0a0a0a] leading-5 hover:text-brand">
{{ _info.productName }}
</a>
<div class="flex items-start gap-10 shrink-0">
<!-- Price -->
<div class="w-[87px]">
{% if _ic.price == 0 %}
<p class="font-medium text-[14px] text-[#e7000b] leading-5">Liên hệ</p>
<p class="text-[14px] text-transparent select-none">&nbsp;</p>
{% else %}
<p class="item-total-price font-medium text-[16px] text-[#e7000b] leading-[18px]">{{ _ic.total_price
}}</p>
{% if _info.marketPrice > 0 %}
<p class="item-market-price text-[12px] text-[#a5a5a5] line-through">{{ _info.marketPrice }}</p>
{% else %}
<p class="text-[14px] text-transparent select-none">&nbsp;</p>
{% endif %}
{% endif %}
</div>
<!-- Quantity -->
<div class="flex items-center gap-3 h-8">
<button onclick="cartDec('{{ _item._id }}')"
class="border border-[#d1d5dc] rounded w-6 h-8 flex items-center justify-center hover:bg-gray-50">
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" />
</svg>
</button>
<div class="border border-[#d1d5dc] rounded w-12 h-8 flex items-center justify-center">
<span class="item-qty text-[14px] text-[#0a0a0a]">{{ _ic.quantity }}</span>
</div>
<button onclick="cartInc('{{ _item._id }}')"
class="border border-[#d1d5dc] rounded w-6 h-8 flex items-center justify-center hover:bg-gray-50">
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>
</button>
</div>
<!-- Delete -->
<button onclick="cartRemove('{{ _item._id }}')"
class="w-4 h-5 flex items-center justify-center text-[#4a5565] hover:text-[#e7000b]">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6" />
<path stroke-linecap="round" stroke-width="1.5" d="M10 11v6M14 11v6" />
</svg>
</button>
</div>
</div>
</div>
</div>
{% if _info.productSummary != '' %}
<div class="flex gap-4">
<div class="shrink-0 w-16"></div>
<div class="flex-1 bg-[#f3f4f6] rounded px-3 py-1.5">
<ul class="list-disc list-inside flex flex-col gap-0.5 text-[12px] text-[#4a5565] leading-[1.6]">
{% assign _lines = _info.productSummary | split: "\n" %}
{% for _line in _lines %}
<li>{{ _line }}</li>
{% endfor %}
</ul>
</div>
</div>
{% endif %}
</div>
{% endfor %}
<!-- Section: Thông tin nhận hàng -->
<h2 class="font-bold text-[16px] text-[#0a0a0a] leading-7 mt-1">Thông tin nhận hàng</h2>
<!-- Delivery form -->
<div class="flex flex-col">
<!-- Tabs -->
<div class="border-b border-black/10 flex">
<button id="tab-delivery" onclick="switchTab('delivery')"
class="h-[46px] w-[392px] text-[14px] font-medium bg-[#f3f4f6] border-b-2 border-[#e7000b] text-[#e7000b] rounded-tl-lg rounded-tr-lg">
Giao hàng tận nơi
</button>
<button id="tab-pickup" onclick="switchTab('pickup')"
class="h-[46px] w-[408px] text-[14px] font-medium text-[#4a5565] border-b-2 border-transparent">
Nhận hàng tại trung tâm
</button>
</div>
<!-- Form body -->
<div class="bg-[#f3f4f6] rounded px-3 py-5 flex flex-col gap-3">
<!-- Gender -->
<div class="flex items-center gap-6">
<label class="flex items-center gap-2 cursor-pointer">
<input type="radio" name="gender" value="anh" checked class="w-4 h-4 accent-[#e7000b]" />
<span class="font-medium text-[13px] text-[#0a0a0a]">Anh</span>
</label>
<label class="flex items-center gap-2 cursor-pointer">
<input type="radio" name="gender" value="chi" class="w-4 h-4 accent-[#e7000b]" />
<span class="font-medium text-[13px] text-[#0a0a0a]">Chị</span>
</label>
</div>
<!-- Name + Phone -->
<div class="grid grid-cols-2 gap-4">
<div class="flex flex-col gap-2">
<label class="text-[13px] font-medium text-[#0a0a0a]">
Họ và tên <span class="text-[#e7000b]">*</span>
</label>
<input type="text" placeholder="Họ tên"
class="bg-white border border-[#d1d5dc] rounded px-4 py-2 h-10 text-[13px] text-[#0a0a0a] outline-none focus:border-[#e7000b]" />
</div>
<div class="flex flex-col gap-2">
<label class="text-[13px] font-medium text-[#0a0a0a]">
Số điện thoại <span class="text-[#e7000b]">*</span>
</label>
<input type="tel" placeholder="Nhập số điện thoại"
class="bg-white border border-[#d1d5dc] rounded px-4 py-2 h-10 text-[13px] text-[#0a0a0a] outline-none focus:border-[#e7000b]" />
</div>
</div>
<!-- Address -->
<div class="flex flex-col gap-2">
<label class="text-[13px] font-medium text-[#0a0a0a]">
Địa chỉ nhận hàng <span class="text-[#e7000b]">*</span>
</label>
<div class="grid grid-cols-2 gap-4">
<div class="relative">
<select
class="appearance-none bg-white border border-[#d1d5dc] rounded px-4 py-2 h-10 w-full text-[13px] text-[#0a0a0a] outline-none focus:border-[#e7000b] cursor-pointer">
<option value="" disabled selected>Chọn Tỉnh/Thành Phố</option>
{% for _province in page.province_list %}
<option value="{{ _province.api_id }}">{{ _province.name }}</option>
{% endfor %}
</select>
<svg
class="absolute right-3 top-1/2 -translate-y-1/2 w-3 h-3 text-[#0a0a0a] pointer-events-none rotate-90"
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" />
</svg>
</div>
<div class="relative">
<select
class="appearance-none bg-white border border-[#d1d5dc] rounded px-4 py-2 h-10 w-full text-[13px] text-[#0a0a0a] outline-none focus:border-[#e7000b] cursor-pointer">
<option value="" disabled selected>Chọn Xã/Phường</option>
</select>
<svg
class="absolute right-3 top-1/2 -translate-y-1/2 w-3 h-3 text-[#0a0a0a] pointer-events-none rotate-90"
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" />
</svg>
</div>
</div>
<textarea rows="2" placeholder="Nhập địa chỉ giao hàng"
class="bg-white border border-[#d1d5dc] rounded px-4 py-2 text-[13px] text-[rgba(10,10,10,0.5)] outline-none focus:border-[#e7000b] resize-none"></textarea>
</div>
</div>
</div>
<!-- Invoice checkbox -->
<label class="flex items-center gap-2 cursor-pointer h-5">
<input type="checkbox" class="w-4 h-4 accent-[#e7000b] border border-[#d1d5dc] rounded" />
<span class="font-medium text-[13px] text-[#0a0a0a]">Yêu cầu xuất hóa đơn công ty</span>
</label>
<!-- Total -->
<div class="flex items-center justify-between h-8">
<span class="font-semibold text-[13px] text-[#0a0a0a]">Tổng tiền</span>
<span id="cart-total" class="font-medium text-[16px] text-[#e7000b]">{{ page.cart_summary.total_value }}</span>
</div>
<!-- Divider -->
<hr class="border-t border-dashed border-[#d1d5dc]" />
<!-- Section: Phương thức thanh toán -->
<div class="flex flex-col gap-3">
<h3 class="font-bold text-[16px] text-[#0a0a0a] leading-7">Phương thức thanh toán</h3>
<div class="flex flex-col gap-3">
{% for _pm in page.payment_method %}
<label class="flex items-center gap-2 cursor-pointer">
<input type="radio" name="payment" value="{{ _pm.type }}" {% if forloop.first %}checked{% endif %}
class="w-4 h-4 accent-[#e7000b]" />
<span class="text-[13px] text-[#0a0a0a]">{{ _pm.title }}</span>
</label>
{% endfor %}
</div>
<!-- Terms checkbox -->
<label class="flex items-center gap-2 cursor-pointer mt-4">
<input type="checkbox" class="w-4 h-4 accent-[#e7000b] border border-[#d1d5dc] rounded" />
<span class="text-[13px] text-[#4a5565]">
Tôi đã đọc và đồng ý với các
<a href="#" class="text-[#155dfc] font-bold hover:underline">Điều kiện giao dịch chung</a>
của website
</span>
</label>
<!-- Order button -->
<button
class="bg-[#e7000b] hover:bg-[#c00009] text-white font-medium text-[16px] h-12 w-full rounded flex items-center justify-center transition-colors mt-5">
ĐẶT HÀNG
</button>
</div>
</div>
</div>
</div>