update
This commit is contained in:
@@ -1,59 +1,268 @@
|
||||
<div class="bg-white shadow p-3 rounded-sm">
|
||||
<h1 class="text-2xl font-bold mb-3">Danh sách sản phẩm</h1>
|
||||
{% assign no_image_url = 'no-image.png' | asset_url %}
|
||||
<div class="w-[1200px] mx-auto flex flex-col gap-4 py-4">
|
||||
|
||||
<div id="action-links" class="mt-3">
|
||||
<div class="flex item-center justify-between">
|
||||
<div class="btn btn-outline btn-view btn-sm">
|
||||
<a href='javascript:;' onclick="RowExpand.open_all();"><span id='js-row-expand-all'></span> Xem hết
|
||||
danh mục</a>
|
||||
</div>
|
||||
<a href="/product/category-form " id="add-prod" class="btn btn-outline btn-view btn-sm">
|
||||
<i data-lucide="plus" class="size-4"></i>
|
||||
<span class="font-500">Thêm
|
||||
danh mục mới</span></a>
|
||||
<!-- Breadcrumb -->
|
||||
<div class="flex items-center gap-2 text-[13px]">
|
||||
<a href="/" class="text-black cursor-pointer hover:text-[#e4057c]">Trang chủ</a>
|
||||
<img src="image/icon_arrow_next.svg" alt="" class="w-[10px] h-[10px]" />
|
||||
<span class="text-black font-medium">{{ page.current_category.name }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Banner Sale -->
|
||||
<div class="relative w-full rounded-[12px] overflow-hidden" style="background:#6e0000; height:651px">
|
||||
<!-- Top banner image -->
|
||||
<div class="absolute top-0 left-0 w-full h-[187px] rounded-t-[12px] overflow-hidden">
|
||||
<img src="{{ 'category_banner_sale_top.png' | asset_url }}" alt=""
|
||||
class="w-full h-full object-cover rounded-t-[12px]" />
|
||||
</div>
|
||||
<!-- 5 sale product cards -->
|
||||
<div class="absolute bottom-[23px] left-[12px] right-[12px] flex gap-3">
|
||||
{% for _product in page.product_list limit:5 %}
|
||||
<a href="/product/detail?id={{ _product.productId }}"
|
||||
class="relative bg-white border border-[#dcdcdc] rounded-[8px] w-[226px] h-[426px] shrink-0 px-[9px] py-[10px] flex flex-col gap-[8px] no-underline">
|
||||
<div class="h-[173px] flex items-center justify-center">
|
||||
<img src="{{ _product.productImage.large }}" alt="{{ _product.productName }}"
|
||||
class="w-[173px] h-[173px] rounded-[4px] object-cover"
|
||||
onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
||||
</div>
|
||||
{% if _product.label != '' %}
|
||||
<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 }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="flex items-center gap-[6px]">
|
||||
{% if _product.price > 0 %}
|
||||
<p class="m-0 text-[18px] leading-none font-bold text-[#db0000] tracking-[-0.36px]">{{
|
||||
_product.price | number_format }} <span class="underline">đ</span></p>
|
||||
{% if _product.price_off != '' %}
|
||||
<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">-{{
|
||||
_product.price_off }}%</span>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<p class="m-0 text-[18px] leading-none font-bold text-[#db0000] tracking-[-0.36px]">Liên hệ</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if _product.marketPrice > 0 %}
|
||||
<p class="m-0 text-[12px] leading-none text-[#c5c5c5] tracking-[-0.24px] line-through">{{
|
||||
_product.marketPrice | number_format }} đ</p>
|
||||
{% endif %}
|
||||
<p
|
||||
class="m-0 h-[32px] overflow-hidden text-[13px] leading-[16px] font-bold tracking-[-0.26px] text-black">
|
||||
{{ _product.productName }}</p>
|
||||
<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 }}</span>
|
||||
<span class="w-[2px] h-[2px] rounded-full bg-[#707070]"></span>
|
||||
<span>Đã bán {{ _product.reviewCount }}</span>
|
||||
</div>
|
||||
<button type="button"
|
||||
class="w-6 h-6 rounded-full bg-[#c1c1c1] flex items-center justify-center shrink-0"
|
||||
aria-label="Add to cart">
|
||||
<img src="{{ 'icon_cart_circle.svg' | asset_url }}" alt="" class="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto border border-base-200 rounded-sm mt-5 w-full mt-3">
|
||||
<table id='tb_padding' cellpadding=2 cellspacing=0 width='100%' border=1 bordercolor='#CCCCCC' class="table">
|
||||
<tr class="bg-base-200 font-bold">
|
||||
<td>Danh mục</td>
|
||||
<td>Link web</td>
|
||||
<td class=" whitespace-nowrap">ID</td>
|
||||
<td>Xem</td>
|
||||
<td>SP</td>
|
||||
<td>STT</td>
|
||||
<td>Hiển thị nội dung</td>
|
||||
<td>Thuộc tính</td>
|
||||
<td class="w-[150px]">Cập nhật</td>
|
||||
</tr>
|
||||
|
||||
{{page.category_list}}
|
||||
|
||||
</table>
|
||||
<!-- Banner QC -->
|
||||
<div class="flex gap-3">
|
||||
<div class="w-[594px] h-[236px] rounded-[8px] overflow-hidden shrink-0">
|
||||
<img src="{{ 'category_qc_samsung.png' | asset_url }}" alt="" class="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div class="w-[594px] h-[236px] rounded-[8px] overflow-hidden shrink-0">
|
||||
<img src="{{ 'category_qc_lg.png' | asset_url }}" alt="" class="w-full h-full object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p style="margin-top: 10px">
|
||||
<strong style="color: red">Lưu ý</strong>: Tổng sản phẩm ở danh mục mẹ được tính là tổng sản phẩm sản phẩm
|
||||
của các danh mục con và danh mục mẹ. Bộ đếm không loại trừ sản phẩm trùng nhau (v.d. trường hợp 1 sản phẩm
|
||||
thuộc cả 2 danh mục con thì sẽ được đếm 2 lần)
|
||||
</p>
|
||||
<!-- Product List -->
|
||||
<div class="bg-white rounded-[12px] px-3 py-5 flex flex-col gap-4">
|
||||
<!-- Filter bar -->
|
||||
<div class="flex items-center gap-2">
|
||||
<!-- Filter button -->
|
||||
<button
|
||||
class="flex items-center gap-2 border border-[#dcdcdc] rounded-[8px] h-10 px-4 shrink-0 hover:bg-gray-50">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M2 5h16M5 10h10M8 15h4" stroke="#333" stroke-width="1.5" stroke-linecap="round" />
|
||||
</svg>
|
||||
<span class="text-[13px] text-black font-medium">Lọc</span>
|
||||
</button>
|
||||
<!-- Brand filter dropdown -->
|
||||
<button
|
||||
class="flex items-center gap-1 border border-[#dcdcdc] rounded-[8px] h-10 px-3 text-[13px] text-black hover:bg-gray-50">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10">
|
||||
<path d="M2 3.5l3 3 3-3" stroke="#333" stroke-width="1.2" stroke-linecap="round"
|
||||
stroke-linejoin="round" />
|
||||
</svg>
|
||||
<span>Thương hiệu</span>
|
||||
</button>
|
||||
<!-- Price filter dropdown -->
|
||||
<button
|
||||
class="flex items-center gap-1 border border-[#dcdcdc] rounded-[8px] h-10 px-3 text-[13px] text-black hover:bg-gray-50">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10">
|
||||
<path d="M2 3.5l3 3 3-3" stroke="#333" stroke-width="1.2" stroke-linecap="round"
|
||||
stroke-linejoin="round" />
|
||||
</svg>
|
||||
<span>Giá</span>
|
||||
</button>
|
||||
<!-- Attribute filter dropdowns -->
|
||||
{% for _attr in page.attribute_filter_list %}
|
||||
<button
|
||||
class="flex items-center gap-1 border border-[#dcdcdc] rounded-[8px] h-10 px-3 text-[13px] text-black hover:bg-gray-50">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10">
|
||||
<path d="M2 3.5l3 3 3-3" stroke="#333" stroke-width="1.2" stroke-linecap="round"
|
||||
stroke-linejoin="round" />
|
||||
</svg>
|
||||
<span>{{ _attr.name }}</span>
|
||||
</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<!-- Sort bar -->
|
||||
<div class="flex items-center gap-3 text-[13px]">
|
||||
<span class="text-[#707070]">Sắp xếp theo:</span>
|
||||
{% for _sort in page.sort_by_collection %}
|
||||
{% if forloop.first %}
|
||||
<span class="text-[#e4057c] font-medium cursor-pointer">{{ _sort.name }}</span>
|
||||
{% else %}
|
||||
<span class="text-[#c0c0c0]">·</span>
|
||||
<span class="text-black cursor-pointer hover:text-[#e4057c]">{{ _sort.name }}</span>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<!-- Product count -->
|
||||
<div class="text-[13px] text-[#707070]">{{ page.product_count }} sản phẩm</div>
|
||||
<!-- Product grid -->
|
||||
<div class="grid grid-cols-5 gap-3">
|
||||
{% for _product in page.product_list %}
|
||||
<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">
|
||||
<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 %}
|
||||
{% if _product.price > 0 %}
|
||||
<div class="flex items-center gap-1">
|
||||
<p class="text-[18px] font-bold text-[#db0000]">{{ _product.price | number_format }} <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>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if _product.marketPrice > 0 %}
|
||||
<p class="text-[12px] text-[#c5c5c5] line-through">{{ _product.marketPrice | number_format }} đ</p>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<p class="text-[18px] font-bold text-[#db0000]">Liên hệ</p>
|
||||
{% endif %}
|
||||
<a href="/product/detail" class="text-[13px] font-bold text-black hover:text-[#e4057c] line-clamp-2">{{
|
||||
_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>
|
||||
{% endif %}
|
||||
<div class="mt-auto flex justify-end">
|
||||
<div class="w-6 h-6 bg-[#BBBBBB] rounded-full flex items-center justify-center shadow">
|
||||
<img src="{{ 'icon_cart_circle.svg' | asset_url }}" alt="" class="w-4 h-4" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<!-- Pagination -->
|
||||
<div class="flex justify-center mt-2">
|
||||
{{ page.paging.html }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="hidden" id="save_open_row" value="," />
|
||||
<input type="hidden" id="track_open_row" value="0" />
|
||||
<!-- Box Article + Video -->
|
||||
{% assign _articles = page.current_category.related['article-article'] %}
|
||||
{% assign _videos = page.current_category.related['article-video'] %}
|
||||
{% if _articles.size > 0 or _videos.size > 0 %}
|
||||
<div class="bg-white rounded-[12px] flex gap-3 px-3 py-4">
|
||||
{% if _articles.size > 0 %}
|
||||
<!-- Tin khuyến mãi -->
|
||||
<div class="flex flex-col gap-3 w-[885px] shrink-0">
|
||||
<h2 class="text-[28px] font-bold text-black tracking-tight">TIN KHUYẾN MÃI</h2>
|
||||
<div class="flex gap-3 items-start">
|
||||
{% assign _main_article = _articles[0] %}
|
||||
<div class="w-[481px] shrink-0">
|
||||
<a href="{{ _main_article.url }}" class="block w-[481px] h-[300px] rounded-[4px] overflow-hidden">
|
||||
<img src="{{ _main_article.image.large }}" alt="{{ _main_article.title }}"
|
||||
class="w-full h-full object-cover" />
|
||||
</a>
|
||||
<p class="mt-2 text-[20px] font-bold text-black tracking-tight">{{ _main_article.title }}</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3 flex-1">
|
||||
{% for _article in _articles offset:1 limit:3 %}
|
||||
<a href="{{ _article.url }}" class="flex gap-3 items-start no-underline">
|
||||
<img src="{{ _article.image.thum }}" alt="{{ _article.title }}"
|
||||
class="w-[153px] h-[92px] rounded-[4px] object-cover shrink-0" />
|
||||
<p class="text-[14px] text-black tracking-tight line-clamp-3">{{ _article.title }}</p>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if _videos.size > 0 %}
|
||||
<!-- Video Review -->
|
||||
<div class="flex flex-col gap-3 flex-1">
|
||||
<h2 class="text-[28px] font-bold text-black tracking-tight">VIDEO REVIEW</h2>
|
||||
<div class="flex flex-col gap-3">
|
||||
{% assign _main_video = _videos[0] %}
|
||||
<a href="{{ _main_video.url }}" class="block w-full h-[159px] rounded-[4px] overflow-hidden relative">
|
||||
<img src="{{ _main_video.image.large }}" alt="{{ _main_video.title }}"
|
||||
class="w-full h-full object-cover" />
|
||||
<div class="absolute inset-0 bg-black/20 rounded-[4px]"></div>
|
||||
</a>
|
||||
{% for _video in _videos offset:1 limit:2 %}
|
||||
<a href="{{ _video.url }}" class="flex gap-3 items-start no-underline">
|
||||
<div class="w-[107px] h-[64px] rounded-[4px] overflow-hidden relative shrink-0">
|
||||
<img src="{{ _video.image.thum }}" alt="{{ _video.title }}"
|
||||
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 line-clamp-3">{{ _video.title }}</p>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
function update_order(id, new_val) {
|
||||
alert("todo");
|
||||
}
|
||||
|
||||
function update_status(id, status) {
|
||||
alert("todo");
|
||||
}
|
||||
|
||||
function deleteThis(id) {
|
||||
alert("todo");
|
||||
}
|
||||
</script>
|
||||
<!-- Key Search -->
|
||||
{% if page.current_category.tags.size > 0 %}
|
||||
<div class="bg-white rounded-[12px] flex flex-col gap-3 px-3 py-4">
|
||||
<h2 class="text-[24px] font-bold text-black tracking-tight">Mọi người cũng tìm kiếm</h2>
|
||||
<div class="bg-[#f3f4f7] rounded-[12px] px-3 py-5 flex flex-wrap gap-5 text-[12px] text-black">
|
||||
{% for _tag in page.current_category.tags %}
|
||||
<a href="{{ _tag.url }}" class="text-black hover:text-[#e4057c]">{{ _tag.name }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
Reference in New Issue
Block a user