update
This commit is contained in:
@@ -1,163 +0,0 @@
|
||||
<div class="w-[100%]">
|
||||
<div
|
||||
class="bg-white m-[16px] p-[20px_16px] rounded-[15px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[20px]">
|
||||
<p class="leading-[30px] mb-[13px] font-bold text-[24px]"> Danh mục nội dung </p>
|
||||
|
||||
<div class="flex items-center justify-end font-[500] leading-[35px] mb-[20px]">
|
||||
<a href="/article/category-add"
|
||||
class="inline-flex items-center whitespace-nowrap border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] p-[0_12px] m-[0_16px_0_0] group hover:bg-[#0041E8] hover:text-[#fff]">
|
||||
<span
|
||||
class="border-[1px] border-[#0041E8] h-[13px] w-[13px] leading-[10.2px] text-center rounded-[50%] mr-1 group-hover:border-[#fff]">+</span>
|
||||
<span>Thêm danh mục mới</span>
|
||||
</a>
|
||||
|
||||
<a href="/article"
|
||||
class="inline-flex items-center whitespace-nowrap border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] p-[0_12px] group hover:bg-[#0041E8] hover:text-[#fff]">
|
||||
<i class="far fa-folder mr-2"></i>
|
||||
<span>Danh sách nội dung</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="table">
|
||||
<table>
|
||||
<thead class="bg-[#f6f6f6] text-[#000] text-[14px] font-[500]">
|
||||
<tr>
|
||||
<td width="600"> Danh mục </td>
|
||||
<td width="50" align="center"> ID </td>
|
||||
<td width="100" align="center"> Hiển thị </td>
|
||||
<td width="100" align="center"> STT </td>
|
||||
<td width="120" align="center"> Số bài viết </td>
|
||||
<td width="172" align="center"> Lựa chọn </td>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
|
||||
<tr align="center">
|
||||
<td align="left"> 1. Danh mục cấp 1 </td>
|
||||
|
||||
<td> 1 </td>
|
||||
|
||||
<td> child_article </td>
|
||||
|
||||
<td>
|
||||
<input type="text" value="0"
|
||||
class="w-[100%] h-[36px] p-[0_10px] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)] text-center">
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<span class="inline-block mr-[10px] leading-[30px]"> 60 </span>
|
||||
<a href=""
|
||||
class="inline-block cursor-pointer leading-[30px] bg-[#0041E8] text-[#fff_!important] rounded-[4px] font-[500] p-[0_11px]">
|
||||
Xem
|
||||
</a>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<div class="items-center flex justify-center">
|
||||
<a href="/article/category-add?id=1" title="Sửa lại"
|
||||
class="icons icon-edit mr-[6px]"></a>
|
||||
|
||||
<a href="" title="Xem tại web"
|
||||
class="fas fa-globe bg-[#F5F7FF] leading-[30px] rounded-[5px] text-[#0041E8_!important] text-center w-[30px] border border-[#0041E8] mr-[6px]"></a>
|
||||
|
||||
<a href="" title="Hạ xuống"
|
||||
class="far fa-eye-slash bg-[#F9F9F9] leading-[30px] rounded-[5px] text-[#9E9E9E_!important] text-center w-[30px] border border-[#ECECEC] mr-[6px]"></a>
|
||||
|
||||
<a href="" title="Cho Hiển thị"
|
||||
class="far fa-eye bg-[#F5F7FF] leading-[30px] rounded-[5px] text-[#0041E8_!important] text-center w-[30px] border border-[#0041E8] mr-[6px]">
|
||||
</a>
|
||||
|
||||
<a href="" title="Xóa" class="icons icon-delete"></a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Danh mục cấp 2 -->
|
||||
<tr align="center">
|
||||
<td align="left" style="padding-left: 30px;"> 1.1 Danh mục cấp 2 </td>
|
||||
|
||||
<td> 1 </td>
|
||||
|
||||
<td> child_article </td>
|
||||
|
||||
<td>
|
||||
<input type="text" value="0"
|
||||
class="w-[100%] h-[36px] p-[0_10px] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)] text-center">
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<span class="inline-block mr-[10px] leading-[30px]"> 60 </span>
|
||||
<a href=""
|
||||
class="inline-block cursor-pointer leading-[30px] bg-[#0041E8] text-[#fff_!important] rounded-[4px] font-[500] p-[0_11px]">
|
||||
Xem
|
||||
</a>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<div class="items-center flex justify-center">
|
||||
<a href="/article/category-add?id=1" title="Sửa lại"
|
||||
class="icons icon-edit mr-[6px]"></a>
|
||||
|
||||
<a href="" title="Xem tại web"
|
||||
class="fas fa-globe bg-[#F5F7FF] leading-[30px] rounded-[5px] text-[#0041E8_!important] text-center w-[30px] border border-[#0041E8] mr-[6px]"></a>
|
||||
|
||||
<a href="" title="Hạ xuống"
|
||||
class="far fa-eye-slash bg-[#F9F9F9] leading-[30px] rounded-[5px] text-[#9E9E9E_!important] text-center w-[30px] border border-[#ECECEC] mr-[6px]"></a>
|
||||
|
||||
<a href="" title="Cho Hiển thị"
|
||||
class="far fa-eye bg-[#F5F7FF] leading-[30px] rounded-[5px] text-[#0041E8_!important] text-center w-[30px] border border-[#0041E8] mr-[6px]">
|
||||
</a>
|
||||
|
||||
<a href="" title="Xóa" class="icons icon-delete"></a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Danh mục cấp 3 -->
|
||||
<tr align="center">
|
||||
<td align="left" style="padding-left: 60px;"> 1.1.1 Danh mục cấp 3 </td>
|
||||
|
||||
<td> 1 </td>
|
||||
|
||||
<td> child_article </td>
|
||||
|
||||
<td>
|
||||
<input type="text" value="0"
|
||||
class="w-[100%] h-[36px] p-[0_10px] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)] text-center">
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<span class="inline-block mr-[10px] leading-[30px]"> 60 </span>
|
||||
<a href=""
|
||||
class="inline-block cursor-pointer leading-[30px] bg-[#0041E8] text-[#fff_!important] rounded-[4px] font-[500] p-[0_11px]">
|
||||
Xem
|
||||
</a>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<div class="items-center flex justify-center">
|
||||
<a href="/article/category-add?id=1" title="Sửa lại"
|
||||
class="icons icon-edit mr-[6px]"></a>
|
||||
|
||||
<a href="" title="Xem tại web"
|
||||
class="fas fa-globe bg-[#F5F7FF] leading-[30px] rounded-[5px] text-[#0041E8_!important] text-center w-[30px] border border-[#0041E8] mr-[6px]"></a>
|
||||
|
||||
<a href="" title="Hạ xuống"
|
||||
class="far fa-eye-slash bg-[#F9F9F9] leading-[30px] rounded-[5px] text-[#9E9E9E_!important] text-center w-[30px] border border-[#ECECEC] mr-[6px]"></a>
|
||||
|
||||
<a href="" title="Cho Hiển thị"
|
||||
class="far fa-eye bg-[#F5F7FF] leading-[30px] rounded-[5px] text-[#0041E8_!important] text-center w-[30px] border border-[#0041E8] mr-[6px]">
|
||||
</a>
|
||||
|
||||
<a href="" title="Xóa" class="icons icon-delete"></a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
158
template/article/detail.html
Normal file
158
template/article/detail.html
Normal file
@@ -0,0 +1,158 @@
|
||||
{% assign no_image_url = 'no-image.png' | asset_url %}
|
||||
{% assign _article = page.article_detail %}
|
||||
{% assign _article_cat_url = _article.categoryInfo[0].request_path | default: _article.categoryInfo[0].url %}
|
||||
{% if _article_cat_url != '' %}
|
||||
{% unless _article_cat_url contains '/' %}
|
||||
{% assign _article_cat_url = '/' | append: _article_cat_url %}
|
||||
{% endunless %}
|
||||
{% endif %}
|
||||
<div class="layout-container flex flex-col gap-4 py-4">
|
||||
|
||||
<!-- Breadcrumb -->
|
||||
<div class="flex items-center gap-2 text-[12px] tracking-[-0.24px]">
|
||||
<a href="/article" class="text-[#888] hover:text-[#e4057c]">Tin tức</a>
|
||||
<img src="{{ 'icon_arrow_next.svg' | asset_url }}" alt="" class="w-[10px] h-[10px]" />
|
||||
<span class="text-black">Chi tiết tin tức</span>
|
||||
</div>
|
||||
|
||||
<!-- Main layout: article + sidebar -->
|
||||
<div class="flex gap-5">
|
||||
|
||||
<!-- Article Content -->
|
||||
<article class="flex flex-col gap-5 w-[864px] mx-auto bg-white p-[20px] shrink-0">
|
||||
|
||||
<!-- Category badge -->
|
||||
{% if _article.categoryInfo.size > 0 %}
|
||||
<div class="inline-flex items-center self-start bg-[#eff6ff] border border-[#bedbff] rounded-full px-4 py-2">
|
||||
<a href="{{ _article_cat_url }}" class="text-[14px] text-[#364153] hover:text-[#e4057c]">
|
||||
{{ _article.categoryInfo[0].name }}
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Title -->
|
||||
<h1 class="font-medium text-[32px] leading-normal text-black">
|
||||
{{ _article.title }}
|
||||
</h1>
|
||||
|
||||
<!-- Meta: date + author -->
|
||||
<div class="flex items-center gap-4 border-b border-black/10 pb-3">
|
||||
<div class="flex items-center gap-1.5 text-[14px] text-[#4a5565]">
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="3" y="4" width="18" height="18" rx="2" />
|
||||
<path d="M16 2v4M8 2v4M3 10h18" />
|
||||
</svg>
|
||||
{{ _article.createDate }}
|
||||
</div>
|
||||
{% if _article.author != '' %}
|
||||
<div class="flex items-center gap-1.5 text-[14px] text-[#4a5565]">
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
|
||||
<circle cx="12" cy="7" r="4" />
|
||||
</svg>
|
||||
{{ _article.author }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Summary box -->
|
||||
{% if _article.summary != '' %}
|
||||
<div class="bg-[#e5e7eb] rounded-[10px] p-6 flex flex-col gap-3">
|
||||
<p class="font-bold text-[20px] leading-[30px] text-[#101828]">
|
||||
{{ _article.summary }}
|
||||
</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Article Content -->
|
||||
<div class="font-inter text-[16px] leading-6 text-[#364153] flex flex-col gap-4 article-content">
|
||||
{{ _article.content }}
|
||||
</div>
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!-- TIN KHUYẾN MẠI + VIDEO REVIEW từ bà i liên quan -->
|
||||
{% assign _promo_articles = page.home_article_list[19] %}
|
||||
{% assign _video_articles = page.home_article_list[29] %}
|
||||
{% if _promo_articles.size > 0 or _video_articles.size > 0 %}
|
||||
<div class="bg-white rounded-xl px-3 py-4 flex gap-3">
|
||||
|
||||
{% if _promo_articles.size > 0 %}
|
||||
<div class="flex flex-col gap-3 flex-1">
|
||||
<h2 class="text-[28px] font-bold text-black tracking-[-0.56px]">TIN KHUYẾN MẠI</h2>
|
||||
<div class="flex gap-3">
|
||||
{% assign _main_promo = _promo_articles[0] %}
|
||||
<a href="{{ _main_promo.url }}" class="flex flex-col gap-2 w-[481px] shrink-0">
|
||||
<div class="overflow-hidden rounded-[4px]">
|
||||
<img src="{{ _main_promo.image.thum }}" alt="{{ _main_promo.title }}"
|
||||
class="h-[300px] w-full object-cover rounded-[4px] hover:scale-105 transition-transform duration-300"
|
||||
onerror="this.onerror=null;this.src='{{ no_image_url }}'">
|
||||
</div>
|
||||
<p class="text-[20px] font-bold text-black tracking-[-0.4px] leading-snug">{{ _main_promo.title }}</p>
|
||||
</a>
|
||||
<div class="flex flex-col gap-3 flex-1">
|
||||
{% for _article in _promo_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="h-[92px] w-[153px] object-cover rounded-[4px] shrink-0"
|
||||
onerror="this.onerror=null;this.src='{{ no_image_url }}'">
|
||||
<p class="text-[14px] text-black tracking-[-0.28px] leading-snug line-clamp-3 hover:text-[#e4057c]">
|
||||
{{ _article.title }}
|
||||
</p>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if _promo_articles.size > 0 and _video_articles.size > 0 %}
|
||||
<div class="w-px bg-gray-200 self-stretch"></div>
|
||||
{% endif %}
|
||||
|
||||
{% if _video_articles.size > 0 %}
|
||||
<div class="flex flex-col gap-3 w-[279px] shrink-0">
|
||||
<h2 class="text-[28px] font-bold text-black tracking-[-0.56px]">VIDEO REVIEW</h2>
|
||||
<div class="flex flex-col gap-3">
|
||||
{% assign _main_video = _video_articles[0] %}
|
||||
<a href="{{ _main_video.url }}" class="relative block rounded-[4px] overflow-hidden group">
|
||||
<img src="{{ _main_video.image.thum }}" alt="{{ _main_video.title }}"
|
||||
class="h-[159px] w-full object-cover rounded-[4px]"
|
||||
onerror="this.onerror=null;this.src='{{ no_image_url }}'">
|
||||
<div class="absolute inset-0 bg-black/20 flex items-center justify-center rounded-[4px]">
|
||||
<div
|
||||
class="w-10 h-10 bg-white/80 rounded-full flex items-center justify-center group-hover:bg-white transition-colors">
|
||||
<svg class="w-5 h-5 text-[#e4057c] ml-0.5" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M8 5v14l11-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{% for _video in _video_articles offset:1 limit:2 %}
|
||||
<a href="{{ _video.url }}" class="flex gap-3 items-start group no-underline">
|
||||
<div class="relative w-[107px] h-[64px] rounded-[4px] overflow-hidden shrink-0">
|
||||
<img src="{{ _video.image.thum }}" alt="{{ _video.title }}" class="w-full h-full object-cover rounded-[4px]"
|
||||
onerror="this.onerror=null;this.src='{{ no_image_url }}'">
|
||||
<div class="absolute inset-0 bg-black/20 flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M8 5v14l11-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-[14px] text-black tracking-[-0.28px] leading-snug line-clamp-2 group-hover:text-[#e4057c]">
|
||||
{{ _video.title }}
|
||||
</p>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,502 +0,0 @@
|
||||
<div class="global-breadcrumb-container">
|
||||
<a href="/article"> Bài viết </a>
|
||||
<a href=""> Form cập nhật Bài viết </a>
|
||||
</div>
|
||||
|
||||
<div class="max-w-[1141px] m-auto p-[0_15px]">
|
||||
<div class="flex flex-wrap items-start m-[16px_0]">
|
||||
<div
|
||||
class="w-[100%] p-[11px_16px] bg-white m-[0_0_16px] rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[18px] flex flex-wrap items-center justify-between">
|
||||
{% if global.url contains 'id=' %}
|
||||
<p class="font-bold text-[20px]"> Sửa nội dung </p>
|
||||
|
||||
<p class="w-[100%] text-[#6B7280] order-[1]">
|
||||
ROG FALCHION LOW PROFILE – CHƠI GAME TRÊN MAC LÀ CHUYỆN NHỎ
|
||||
</p>
|
||||
{% else %}
|
||||
<p class="font-bold text-[20px]"> Thêm mới </p>
|
||||
{% endif %}
|
||||
|
||||
<div class="flex items-center">
|
||||
<a href="/article/form"
|
||||
class="inline-flex items-center whitespace-nowrap border border-[#ECECEC] rounded-[4px] bg-[#fff] text-[#6B7280] leading-[35px] p-[0_12px] m-[0_10px_0_0] group hover:bg-[#0041E8] hover:text-[#fff]">
|
||||
<span
|
||||
class="border-[1px] border-[#6B7280] h-[13px] w-[13px] leading-[10.3px] text-center rounded-[50%] mr-1 group-hover:border-[#fff]">+</span>
|
||||
<span>Thêm nội dung mới</span>
|
||||
</a>
|
||||
|
||||
<a href=""
|
||||
class="inline-flex items-center whitespace-nowrap border border-[#ECECEC] rounded-[4px] bg-[#fff] text-[#6B7280] leading-[35px] p-[0_12px] m-[0_10px_0_0] group hover:bg-[#0041E8] hover:text-[#fff]">
|
||||
<span class="far fa-folder mr-2"></span>
|
||||
<span>Quản lý danh mục</span>
|
||||
</a>
|
||||
|
||||
<a href="/article" title="Danh sách nội dung"
|
||||
class="fas fa-ellipsis-h text-[18px] border border-[#ECECEC] rounded-[4px] bg-[#fff] text-[#6B7280] leading-[35px] text-center min-w-[36px] group hover:bg-[#0041E8] hover:text-[#fff]"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-[25%] mr-[16px]">
|
||||
<div
|
||||
class="bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] font-[500] leading-[24px] overflow-hidden">
|
||||
<a href="javascript:void(0)" style="color: #Fff;background: #0041E8;"
|
||||
class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition"> Chỉnh sửa
|
||||
</a>
|
||||
|
||||
{% if global.url contains 'id=' %}
|
||||
<a href="/article/tag?id=1"
|
||||
class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition"> Tag </a>
|
||||
<a href="/article/relation?id=1&related_item_type=product"
|
||||
class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition"> Liên
|
||||
quan:
|
||||
Sản phẩm </a>
|
||||
<a href="/article/relation?id=1&related_item_type=product-category"
|
||||
class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition"> Liên
|
||||
quan:
|
||||
Danh mục sản phẩm </a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form method="post" enctype="multipart/form-data"
|
||||
class="w-[calc(100%_-25%_-16px)] bg-white rounded-[15px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[20px] block">
|
||||
<div class="p-[16px] border-[#FAFAFB] border-b-[8px]">
|
||||
<p class="font-bold text-[20px] leading-[20px] mb-[15px]"> Thông tin cơ bản </p>
|
||||
|
||||
<div class="mb-[15px] flex flex-wrap items-center">
|
||||
<p class="mb-[7px] w-[100%] font-[600]">Ảnh đại diện </p>
|
||||
|
||||
<div class="inline-block">
|
||||
<img src="https://via.placeholder.com/400x300" class="block max-h-[80px] mr-[20px]">
|
||||
</div>
|
||||
|
||||
<label class="cursor-pointer">
|
||||
<span class="font-[300] mr-[10px]"> Cập nhật ảnh </span>
|
||||
|
||||
<input type="file" name="file_thumbnail"
|
||||
class="file-input h-[40px] rounded-[4px] file-input-bordered file-input-primary w-full max-w-xs">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="mb-[15px] flex flex-wrap items-center">
|
||||
<p class="mb-[7px] w-[100%] font-[600]"> Ảnh nền trong chi tiết </p>
|
||||
|
||||
<div class="inline-block">
|
||||
<img src="https://via.placeholder.com/400x300" class="block max-h-[80px] mr-[20px]">
|
||||
</div>
|
||||
|
||||
<label class="cursor-pointer">
|
||||
<span class="font-[300] mr-[10px]"> Cập nhật ảnh </span>
|
||||
|
||||
<input type="file" name="file_thumbnail"
|
||||
class="file-input h-[40px] rounded-[4px] file-input-bordered file-input-primary w-full max-w-xs">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="p-[12px_20px] m-[15px_0] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] rounded-[4px]">
|
||||
<p class="font-bold mb-2"> Danh mục <i class="font-[300] text-[#6B7280]"> * có thể chọn nhiều danh
|
||||
mục </i> </p>
|
||||
|
||||
<div class="overflow-auto max-h-[250px]">
|
||||
<div class="mb-1">
|
||||
<label class="inline-flex items-center mb-1 ml-1 cursor-pointer group">
|
||||
<input type="checkbox" value="1" class="checkbox checkbox-success">
|
||||
<b class="label-text ml-[5px]"> Danh mục cấp 1 </b>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="mb-1">
|
||||
|
||||
<p class="font-bold mb-[5px]"> Danh mục cấp 1 </p>
|
||||
|
||||
<div class="pl-[25px]">
|
||||
<!-- KHÔNG CÓ danh mục con -->
|
||||
<label class="inline-flex items-center mb-1 ml-1 cursor-pointer group">
|
||||
<input type="checkbox" value="2" class="checkbox checkbox-success">
|
||||
<span class="label-text ml-[5px] text-[#6B7280]"> Danh mục
|
||||
cấp 2 </span>
|
||||
</label> <br>
|
||||
|
||||
<!-- CÓ danh mục con -->
|
||||
<div>
|
||||
<p class="font-bold mb-[5px]"> Danh mục cấp 2 </p>
|
||||
|
||||
<div class="pl-[25px]">
|
||||
<label class="inline-flex items-center mb-1 ml-1 cursor-pointer group">
|
||||
<input type="checkbox" value="2" class="checkbox checkbox-success">
|
||||
<span class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 3 </span>
|
||||
</label> <br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input
|
||||
type="checkbox" value="2" class="checkbox checkbox-success"> <span
|
||||
class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 2 </span> </label>
|
||||
<br>
|
||||
<div>
|
||||
<p class="font-bold mb-[5px]"> Danh mục cấp 2 </p>
|
||||
<div class="pl-[25px]"> <label
|
||||
class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input
|
||||
type="checkbox" value="2" class="checkbox checkbox-success"> <span
|
||||
class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 3 </span>
|
||||
</label> <br></div>
|
||||
</div><label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input
|
||||
type="checkbox" value="2" class="checkbox checkbox-success"> <span
|
||||
class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 2 </span> </label>
|
||||
<br><label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input
|
||||
type="checkbox" value="2" class="checkbox checkbox-success"> <span
|
||||
class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 2 </span> </label>
|
||||
<br><label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input
|
||||
type="checkbox" value="2" class="checkbox checkbox-success"> <span
|
||||
class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 2 </span> </label>
|
||||
<br><label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input
|
||||
type="checkbox" value="2" class="checkbox checkbox-success"> <span
|
||||
class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 2 </span> </label>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- clone -->
|
||||
<div class="mb-1"> <label class="inline-flex items-center mb-1 ml-1 cursor-pointer group">
|
||||
<input type="checkbox" value="1" class="checkbox checkbox-success">
|
||||
<b class="label-text ml-[5px]"> Danh mục cấp 1</b>
|
||||
</label> </div>
|
||||
<div class="mb-1">
|
||||
<p class="font-bold mb-[5px]"> Danh mục cấp 1 </p>
|
||||
<div class="pl-[25px]"> <label
|
||||
class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input
|
||||
type="checkbox" value="2" class="checkbox checkbox-success"> <span
|
||||
class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 2 </span> </label>
|
||||
<br><label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input
|
||||
type="checkbox" value="2" class="checkbox checkbox-success"> <span
|
||||
class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 2 </span> </label>
|
||||
<br><label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input
|
||||
type="checkbox" value="2" class="checkbox checkbox-success"> <span
|
||||
class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 2 </span> </label>
|
||||
<br><label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input
|
||||
type="checkbox" value="2" class="checkbox checkbox-success"> <span
|
||||
class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 2 </span> </label>
|
||||
<br><label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input
|
||||
type="checkbox" value="2" class="checkbox checkbox-success"> <span
|
||||
class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 2 </span> </label>
|
||||
<br><label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input
|
||||
type="checkbox" value="2" class="checkbox checkbox-success"> <span
|
||||
class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 2 </span> </label>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
<!-- // -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-[15px]">
|
||||
<p class="mb-[7px] w-[100%] font-[600]"> Tiêu đề </p>
|
||||
|
||||
<input type="text" value=""
|
||||
class="w-[100%] h-[36px] input input-md input-bordered rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]" />
|
||||
</div>
|
||||
|
||||
<div class="mb-[15px]">
|
||||
<p class="mb-[7px] w-[100%] font-[600]"> Link Index </p>
|
||||
|
||||
<input type="text" value=""
|
||||
class="w-[100%] h-[36px] input input-md input-bordered rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]" />
|
||||
</div>
|
||||
|
||||
<div class="mb-[15px]">
|
||||
<p class="mb-[7px] w-[100%] font-[600]"> Link tham khảo (link web ngoài nếu có) </p>
|
||||
|
||||
<input type="text" value=""
|
||||
class="w-[100%] h-[36px] input input-md input-bordered rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]" />
|
||||
</div>
|
||||
|
||||
<div class="mb-[15px]">
|
||||
<p class="mb-[7px] w-[100%] font-[600]"> Tóm tắt chính </p>
|
||||
|
||||
<textarea
|
||||
class="w-[100%] min-h-[90px] max-h-[150px] textarea textarea-bordered rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]"></textarea>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="mb-[7px] w-[100%] font-[600]"> Tags (Mỗi cụm từ 1 dòng) </p>
|
||||
|
||||
<textarea
|
||||
class="w-[100%] min-h-[90px] max-h-[150px] rounded-[4px] textarea textarea-bordered shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="p-[16px] border-[#FAFAFB] border-b-[8px]">
|
||||
<div class="flex flex-wrap items-center justify-between mb-3">
|
||||
<p class="font-bold text-[20px] leading-[20px]"> Mô tả (nếu có) </p>
|
||||
|
||||
<div class="flex items-center font-[500] leading-[35px]">
|
||||
<a href=""
|
||||
class="group flex items-center whitespace-nowrap border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] p-[0_12px] m-[0_10px_0_0] group hover:bg-[#0041E8] hover:text-[#fff]">
|
||||
<span class="icons icon-upload group-hover:filter-none"></span>
|
||||
<span> Upload ảnh </span>
|
||||
</a>
|
||||
|
||||
<a href=""
|
||||
class="flex items-center whitespace-nowrap border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] p-[0_12px] m-[0_10px_0_0] group hover:bg-[#0041E8] hover:text-[#fff]">
|
||||
<i class="far fa-folder mr-2"></i>
|
||||
<span> Quản lý </span>
|
||||
</a>
|
||||
|
||||
<a href=""
|
||||
class="flex items-center whitespace-nowrap border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] p-[0_12px] group hover:bg-[#0041E8] hover:text-[#fff]">
|
||||
<i class="fa fa-image mr-2"></i>
|
||||
<span> Chọn ảnh trong kho ảnh </span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flex overflow-auto pb-2 w-[100%]">
|
||||
|
||||
<a href="javascript:void(0)" class="min-w-[100px] m-[10px_10px_0_0]">
|
||||
<img src="https://via.placeholder.com/2000x800" class="h-[40px] block" />
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-[15px]">
|
||||
<textarea id="js-desc"> </textarea>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="mb-[7px] w-[100%] font-[600]"> Thứ tự <i class="font-[300] text-[13px]"> (* số cao xếp
|
||||
trước)</i> </p>
|
||||
|
||||
<input type="text" value=""
|
||||
class="w-[100%] h-[36px] input input-md input-bordered rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="p-[16px] border-[#FAFAFB] border-b-[8px]">
|
||||
<p class="font-bold text-[20px] leading-[20px] mb-[15px]"> Dùng cho SEO </p>
|
||||
|
||||
<div class="mb-[15px]">
|
||||
<p class="mb-[7px] w-[100%] font-[600]">
|
||||
Url canonical
|
||||
<i class="text-[13px] font-[300]"> * để trống sẽ dùng link mặc định của hệ thống </i>
|
||||
</p>
|
||||
|
||||
<input type="text" value=""
|
||||
class="w-[100%] h-[36px] input input-md input-bordered rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]" />
|
||||
</div>
|
||||
|
||||
<div class="mb-[15px]">
|
||||
<p class="mb-[7px] w-[100%] font-[600]">
|
||||
Meta Title
|
||||
<i class="text-[13px] font-[300]"> 0 ký tự , 0 từ </i>
|
||||
</p>
|
||||
|
||||
<input type="text" value=""
|
||||
class="w-[100%] h-[36px] input input-md input-bordered rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]" />
|
||||
</div>
|
||||
|
||||
<div class="mb-[15px]">
|
||||
<p class="mb-[7px] w-[100%] font-[600]">
|
||||
Meta Keywords
|
||||
<i class="text-[13px] font-[300]"> 0 ký tự , 0 từ </i>
|
||||
</p>
|
||||
|
||||
<input type="text" value=""
|
||||
class="w-[100%] h-[36px] input input-md input-bordered rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]" />
|
||||
</div>
|
||||
|
||||
<div class="mb-[15px]">
|
||||
<p class="mb-[7px] w-[100%] font-[600]">
|
||||
Meta Description
|
||||
<i class="text-[13px] font-[300]"> 0 ký tự , 0 từ (Khuyến nghị: 160 ký tự) </i>
|
||||
</p>
|
||||
|
||||
<textarea
|
||||
class="w-[100%] min-h-[90px] max-h-[150px] rounded-[4px] textarea textarea-bordered shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="mb-[15px] flex items-start">
|
||||
<p class="mb-[7px] w-[100%] font-[600] w-[220px]"> Cho phép Google Index </p>
|
||||
|
||||
<label class="inline-flex items-center cursor-pointer">
|
||||
<input type="checkbox" class="checkbox checkbox-success">
|
||||
<span class="label-text ml-[15px]"> Cho phép Google Index </span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start">
|
||||
<p class="mb-[7px] w-[100%] font-[600] w-[220px]"> Hiển thị Mục lục đầu bài viết </p>
|
||||
|
||||
<label class="inline-flex items-center cursor-pointer">
|
||||
<input type="checkbox" class="checkbox checkbox-success">
|
||||
<span class="label-text ml-[15px]"> Cho phép hiển thị </span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="p-[16px] border-[#FAFAFB] border-b-[8px]">
|
||||
<p class="font-bold text-[20px] leading-[20px] mb-[15px]"> Quản trị hiển thị </p>
|
||||
|
||||
|
||||
<div class="mb-[15px] flex flex-wrap">
|
||||
<p class="w-[230px] font-bold">Thời gian của bài viết</p>
|
||||
|
||||
<div>
|
||||
<label class="inline-flex items-center cursor-pointer relative pl-[30px] mr-[34px]">
|
||||
<input type="radio" value="0" name="info[article_time_set]"
|
||||
class="radio checked:bg-blue-500" checked="">
|
||||
<span class="label-text ml-[10px]"> Thời gian tạo bài </span>
|
||||
</label>
|
||||
|
||||
<label class="inline-flex items-center cursor-pointer relative pl-[30px] mr-[34px]">
|
||||
<input type="radio" value="1" name="info[article_time_set]"
|
||||
class="radio checked:bg-blue-500">
|
||||
<span class="label-text ml-[10px]"> Chọn thời gian </span>
|
||||
</label>
|
||||
|
||||
<div class="w-[100%] hidden" id="js-publish_time">
|
||||
<div class="flex items-center m-[10px_0]">
|
||||
<div class="relative mr-[20px]">
|
||||
<i
|
||||
class="far fa-calendar text-[#7E7E7E] m-[0_5px_0_0] absolute left-[10px] leading-[35px]"></i>
|
||||
<input type="date" name="from_time_date" value="" placeholder="Từ ngày"
|
||||
class="w-[135px] h-[36px] p-[0_10px_0_30px] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]">
|
||||
</div>
|
||||
|
||||
<p class="mr-[10px]"> Giờ </p>
|
||||
|
||||
<select name="info[from_time_minute]" id="from_time_minute" style="width: 85px;"
|
||||
class="border border-[#d8d8d8] h-[36px] rounded-[4px] pl-[5px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)]">
|
||||
<option value="00:00">00:00</option>
|
||||
<option value="00:30">00:30</option>
|
||||
<option value="01:00">01:00</option>
|
||||
<option value="01:30">01:30</option>
|
||||
<option value="02:00">02:00</option>
|
||||
<option value="02:30">02:30</option>
|
||||
<option value="03:00">03:00</option>
|
||||
<option value="03:30">03:30</option>
|
||||
<option value="04:00">04:00</option>
|
||||
<option value="04:30">04:30</option>
|
||||
<option value="05:00">05:00</option>
|
||||
<option value="05:30">05:30</option>
|
||||
<option value="06:00">06:00</option>
|
||||
<option value="06:30">06:30</option>
|
||||
<option value="07:00">07:00</option>
|
||||
<option value="07:30">07:30</option>
|
||||
<option value="08:00">08:00</option>
|
||||
<option value="08:30">08:30</option>
|
||||
<option value="09:00">09:00</option>
|
||||
<option value="09:30">09:30</option>
|
||||
<option value="10:00">10:00</option>
|
||||
<option value="10:30">10:30</option>
|
||||
<option value="11:00">11:00</option>
|
||||
<option value="11:30">11:30</option>
|
||||
<option value="12:00">12:00</option>
|
||||
<option value="12:30">12:30</option>
|
||||
<option value="13:00">13:00</option>
|
||||
<option value="13:30">13:30</option>
|
||||
<option value="14:00">14:00</option>
|
||||
<option value="14:30">14:30</option>
|
||||
<option value="15:00">15:00</option>
|
||||
<option value="15:30">15:30</option>
|
||||
<option value="16:00">16:00</option>
|
||||
<option value="16:30">16:30</option>
|
||||
<option value="17:00">17:00</option>
|
||||
<option value="17:30">17:30</option>
|
||||
<option value="18:00">18:00</option>
|
||||
<option value="18:30">18:30</option>
|
||||
<option value="19:00">19:00</option>
|
||||
<option value="19:30">19:30</option>
|
||||
<option value="20:00">20:00</option>
|
||||
<option value="20:30">20:30</option>
|
||||
<option value="21:00">21:00</option>
|
||||
<option value="21:30">21:30</option>
|
||||
<option value="22:00">22:00</option>
|
||||
<option value="22:30">22:30</option>
|
||||
<option value="23:00">23:00</option>
|
||||
<option value="23:30">23:30</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<i class="w-[100%] font-[300] text-[#6B7280] mt-[5px]">(Hiển thị cho người xem thời gian thật của
|
||||
bài thay vì thời gian cập nhật)</i>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mb-[15px] flex flex-wrap">
|
||||
<p class="w-[230px] font-bold"> Trạng thái </p>
|
||||
|
||||
<div>
|
||||
<label class="inline-flex items-center cursor-pointer relative pl-[30px] mr-[34px]">
|
||||
<input type="radio" value="0" name="info[status]" class="radio checked:bg-blue-500"
|
||||
checked="">
|
||||
<span class="label-text ml-[10px]"> Bản nháp </span>
|
||||
</label>
|
||||
|
||||
<label class="inline-flex items-center cursor-pointer relative pl-[30px] mr-[34px]">
|
||||
<input type="radio" value="1" name="info[status]" class="radio checked:bg-blue-500">
|
||||
<span class="label-text ml-[10px]"> Cho hiển thị </span>
|
||||
</label>
|
||||
|
||||
<label class="inline-flex items-center cursor-pointer relative pl-[30px] mr-[34px]">
|
||||
<input type="radio" value="-1" name="info[status]" class="radio checked:bg-blue-500">
|
||||
<span class="label-text ml-[10px]"> Chờ duyệt </span>
|
||||
</label>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex flex-wrap items-center">
|
||||
<p class="w-[230px] font-bold"> Xem thử </p>
|
||||
|
||||
<a href="" target="_blank"
|
||||
class="inline-block font-[600] border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] leading-[30px] p-[0_12px] transition hover:bg-[#0041E8] hover:text-white">
|
||||
Xem bài viết tại trang web
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<input type="submit" value="Cập nhật"
|
||||
class="inline-block m-[16px] cursor-pointer h-[32px] bg-[#0041E8] text-[#fff] rounded-[4px] font-[500] p-[0_11px]" />
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
|
||||
|
||||
<script>
|
||||
tinymce.init({
|
||||
selector: 'textarea#js-desc',
|
||||
height: 350,
|
||||
menubar: true,
|
||||
plugins: [
|
||||
'advlist autolink lists link image charmap print preview anchor',
|
||||
'searchreplace visualblocks code fullscreen',
|
||||
'insertdatetime media table paste code help wordcount'
|
||||
],
|
||||
toolbar: 'undo redo | formatselect | ' +
|
||||
'bold italic backcolor | alignleft aligncenter ' +
|
||||
'alignright alignjustify | bullist numlist outdent indent | ' +
|
||||
'removeformat | help',
|
||||
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
$(function () {
|
||||
$("input[name='info[article_time_set]']").click(function () {
|
||||
if ($(this).val() == 1) $("#js-publish_time").show();
|
||||
else $("#js-publish_time").hide();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@@ -1,137 +1,92 @@
|
||||
<div class="w-[100%]">
|
||||
<div
|
||||
class="bg-white m-[16px] p-[20px_16px] rounded-[15px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[20px]">
|
||||
<p class="leading-[30px] mb-[13px] font-bold text-[24px]"> Bài viết </p>
|
||||
{% assign no_image_url = 'no-image.png' | asset_url %}
|
||||
<div class="layout-container flex flex-col gap-4 py-4">
|
||||
|
||||
<form method="get" enctype="multipart/form-data" action="/"
|
||||
class="border border-[#F6F6F6] m-[12px_0_16px] p-[15px] bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)]">
|
||||
<input type="text" name="q" id="keyword" value="" placeholder=""
|
||||
class="w-[375px] h-[36px] border border-[#D8D8D8] m-[0_10px_0_0] p-[0_10px] bg-white rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] ">
|
||||
<input type="submit" value="Tìm kiếm"
|
||||
class="h-[36px] bg-[#0041E8] text-[#fff] font-[500] p-[0_8px] cursor-pointer rounded-[4px]">
|
||||
</form>
|
||||
<!-- Breadcrumb -->
|
||||
<div class="flex items-center gap-2 text-[12px] text-[#888]">
|
||||
<a href="/" class="hover:text-[#e4057c]">Trang chủ</a>
|
||||
<svg class="w-2.5 h-2.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
||||
<path d="M9 18l6-6-6-6" />
|
||||
</svg>
|
||||
<span class="text-black">Tin tức</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center flex-wrap justify-between mb-[20px]">
|
||||
<div class="flex items-center">
|
||||
<select
|
||||
class="min-w-[160px] h-[36px] p-[0_5px] border border-[#D8D8D8] rounded-[4px] mr-[15px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)]">
|
||||
<option value=""> Chọn danh mục </option>
|
||||
<option value=""> option </option>
|
||||
</select>
|
||||
<!-- News Tabs + Cards -->
|
||||
<div class="bg-white rounded-xl p-4">
|
||||
|
||||
<a href=""
|
||||
class="leading-[35px] mr-[16px] border border-[#79B0E2] rounded-[4px] bg-white p-[0_15px] font-[500] text-[#79B0E2] hover:bg-[#79B0E2] hover:text-[#fff]">
|
||||
Xem nội dung đang ẩn
|
||||
</a>
|
||||
|
||||
<a href=""
|
||||
class="leading-[35px] border border-[#79B0E2] rounded-[4px] bg-white p-[0_15px] font-[500] text-[#79B0E2] hover:bg-[#79B0E2] hover:text-[#fff]">
|
||||
Xem nội dung nổi bật
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex items-center font-[500] leading-[35px]">
|
||||
<a href="/article/form"
|
||||
class="inline-flex items-center whitespace-nowrap border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] p-[0_12px] m-[0_16px_0_0] group hover:bg-[#0041E8] hover:text-[#fff]">
|
||||
<span
|
||||
class="border-[1px] border-[#0041E8] h-[13px] w-[13px] leading-[10.2px] text-center rounded-[50%] mr-1 group-hover:border-[#fff]">+</span>
|
||||
<span>Thêm nội dung mới</span>
|
||||
</a>
|
||||
|
||||
<a href="/article/category"
|
||||
class="inline-flex items-center whitespace-nowrap border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] p-[0_12px] group hover:bg-[#0041E8] hover:text-[#fff]">
|
||||
<i class="far fa-folder mr-2"></i>
|
||||
<span>Quản lý danh mục</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table">
|
||||
<thead class="bg-[#F6F6F6] text-[#000] text-[14px] font-500">
|
||||
<tr>
|
||||
<td width="40"> STT </td>
|
||||
<td width="130"> Ảnh </td>
|
||||
<td> Sản phẩm (Tổng số: 1.742) </td>
|
||||
<td> Thống kê </td>
|
||||
<td> Quản trị </td>
|
||||
<td width="160"> Lựa chọn </td>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
<td align="center"> 1 </td>
|
||||
|
||||
<td>
|
||||
<img src="https://via.placeholder.com/880x350" class="block m-auto" />
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<span> [#2481] </span>
|
||||
<a href=""> Elgato – Happy New Year 2024 Deal Hot Đầu Xuân </a>
|
||||
|
||||
<div class="m-[5px_0]"> Thời gian chương trình : 15.02.2024 – 24.02.2024 </div>
|
||||
|
||||
<div>
|
||||
STT
|
||||
<input type="text" value="0"
|
||||
class="w-[140px] h-[32px] border border-[#D8D8D8] m-[0_0_0_10px] p-[0_10px] bg-white rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] ">
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<p> - Xem: 90 </p>
|
||||
<p> - Thích: 0 </p>
|
||||
<p> - Comment: 0 </p>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<p> Cập nhật: Nguyễn MInh Hải </p>
|
||||
<p> (15-02-2024, 2:57 pm) </p>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<div class="items-center flex">
|
||||
<a href="/article/form?id=1" title="Sửa lại"
|
||||
class="border-[1px] border-[#0041E8_!important] icons icon-edit mr-[6px]"></a>
|
||||
|
||||
<a href="" title="Xem tại web"
|
||||
class="fas fa-globe bg-[#F5F7FF] leading-[30px] rounded-[5px] text-[#0041E8_!important] text-center w-[30px] border border-[#0041E8] mr-[6px]"></a>
|
||||
|
||||
<a href="" title="Cho nổi bật"
|
||||
class="fas fa-crown bg-[#F5F7FF] leading-[30px] rounded-[5px] text-[#0041E8_!important] text-center w-[30px] border border-[#0041E8] mr-[6px]"></a>
|
||||
|
||||
<a href="" title="Hạ nổi bật"
|
||||
class="fas fa-crown bg-[#F9F9F9] leading-[30px] rounded-[5px] text-[#9E9E9E_!important] text-center w-[30px] border border-[#ECECEC] mr-[6px]"></a>
|
||||
|
||||
<a href="" title="Hạ xuống"
|
||||
class="far fa-eye-slash bg-[#F9F9F9] leading-[30px] rounded-[5px] text-[#9E9E9E_!important] text-center w-[30px] border border-[#ECECEC] mr-[6px]"></a>
|
||||
|
||||
<a href="" title="Cho Hiển thị"
|
||||
class="far fa-eye bg-[#F5F7FF] leading-[30px] rounded-[5px] text-[#0041E8_!important] text-center w-[30px] border border-[#0041E8] mr-[6px]">
|
||||
</a>
|
||||
|
||||
<a href="" title="Xóa" class="icons icon-delete"></a>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="paging">
|
||||
<a href="" class="paging-prev"><i class="fas fa-chevron-left"></i></a>
|
||||
<a href="" class="current">1</a>
|
||||
<a href="">2</a>
|
||||
<a href="">3</a>
|
||||
<a href="">4</a>
|
||||
<a href="" class="paging-next"><i class="fas fa-chevron-right"></i></a>
|
||||
</div>
|
||||
<!-- Tab Navigation -->
|
||||
<nav class="flex border-b border-[#e5e7eb] mb-5">
|
||||
{% for _cat in page.home_article_category %}
|
||||
{% assign _cat_id = _cat.id %}
|
||||
<a href="{{ _cat.url }}"
|
||||
class="border-b-2 border-transparent pb-2.5 pt-2 px-5 text-[13px] text-[#6a7282] uppercase tracking-[0.35px] whitespace-nowrap hover:text-[#e91e63] js-article-tab"
|
||||
data-cat="{{ _cat_id }}">
|
||||
{{ _cat.name }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</nav>
|
||||
|
||||
<!-- News Cards - mỗi category một section, JS toggle show/hide -->
|
||||
{% for _cat in page.home_article_category %}
|
||||
{% assign _cat_id = _cat.id %}
|
||||
{% assign _articles = page.home_article_list[_cat_id] %}
|
||||
{% if _articles.size > 0 %}
|
||||
<div class="js-article-section" data-cat="{{ _cat_id }}" style="display:none">
|
||||
<div class="grid grid-cols-3 gap-3 mb-6">
|
||||
{% for _article in _articles %}
|
||||
<article class="flex flex-col gap-2">
|
||||
<a href="{{ _article.url }}" class="block overflow-hidden rounded-lg">
|
||||
<img src="{{ _article.image.original }}" alt="{{ _article.title }}"
|
||||
class="h-[260px] w-full object-cover rounded-lg hover:scale-105 transition-transform duration-300"
|
||||
onerror="this.onerror=null;this.src='{{ no_image_url }}'">
|
||||
</a>
|
||||
<h3 class="text-[16px] font-bold leading-[1.625] text-[#101828] line-clamp-2">
|
||||
{{ _article.title }}
|
||||
</h3>
|
||||
<div class="flex items-center gap-2 text-[12px] text-[#6a7282]">
|
||||
<svg class="w-3.5 h-3.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="3" y="4" width="18" height="18" rx="2" />
|
||||
<path d="M16 2v4M8 2v4M3 10h18" />
|
||||
</svg>
|
||||
{{ _article.createDate }}
|
||||
</div>
|
||||
</article>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<!-- Tab switcher script -->
|
||||
<script>
|
||||
(function () {
|
||||
var tabs = document.querySelectorAll('.js-article-tab');
|
||||
var sections = document.querySelectorAll('.js-article-section');
|
||||
function activate(catId) {
|
||||
tabs.forEach(function (t) {
|
||||
var active = t.dataset.cat === catId;
|
||||
t.classList.toggle('border-[#e91e63]', active);
|
||||
t.classList.toggle('text-[#e91e63]', active);
|
||||
t.classList.toggle('font-bold', active);
|
||||
t.classList.toggle('border-transparent', !active);
|
||||
t.classList.toggle('text-[#6a7282]', !active);
|
||||
});
|
||||
sections.forEach(function (s) {
|
||||
s.style.display = s.dataset.cat === catId ? '' : 'none';
|
||||
});
|
||||
}
|
||||
if (tabs.length > 0) {
|
||||
activate(tabs[0].dataset.cat);
|
||||
tabs.forEach(function (t) {
|
||||
t.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
activate(t.dataset.cat);
|
||||
});
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
@@ -1,124 +0,0 @@
|
||||
{% assign _check_type = global.url | split: 'related_item_type=' %}
|
||||
|
||||
<div class="global-breadcrumb-container">
|
||||
<a href="/article"> Bài viết </a>
|
||||
<a href=""> Form cập nhật Bài viết </a>
|
||||
</div>
|
||||
|
||||
<div class="max-w-[1141px] m-[0_auto_20px]">
|
||||
<div class="flex flex-wrap items-start justify-center">
|
||||
|
||||
<div
|
||||
class="w-[100%] p-[11px_16px] bg-white m-[0_0_16px] rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[20px] flex flex-wrap items-center justify-between">
|
||||
<p class="font-bold text-[20px]"> Sửa nội dung </p>
|
||||
|
||||
<p class="text-[#6B7280] mt-[10px] order-[1] w-[100%]"> ROG FALCHION LOW PROFILE – CHƠI GAME TRÊN MAC LÀ
|
||||
CHUYỆN NHỎ </p>
|
||||
|
||||
<div class="flex items-center">
|
||||
<a href="/article/form"
|
||||
class="inline-flex items-center whitespace-nowrap border border-[#ECECEC] rounded-[4px] bg-[#fff] text-[#6B7280] leading-[35px] p-[0_12px] m-[0_10px_0_0] group hover:bg-[#0041E8] hover:text-[#fff]">
|
||||
<span
|
||||
class="border-[1px] border-[#6B7280] h-[13px] w-[13px] leading-[10.3px] text-center rounded-[50%] mr-1 group-hover:border-[#fff]">+</span>
|
||||
<span>Thêm nội dung mới</span>
|
||||
</a>
|
||||
|
||||
<a href=""
|
||||
class="inline-flex items-center whitespace-nowrap border border-[#ECECEC] rounded-[4px] bg-[#fff] text-[#6B7280] leading-[35px] p-[0_12px] m-[0_10px_0_0] group hover:bg-[#0041E8] hover:text-[#fff]">
|
||||
<span class="far fa-folder mr-2"></span>
|
||||
<span>Quản lý danh mục</span>
|
||||
</a>
|
||||
|
||||
<a href="/article" title="Danh sách nội dung"
|
||||
class="fas fa-ellipsis-h text-[18px] border border-[#ECECEC] rounded-[4px] bg-[#fff] text-[#6B7280] leading-[35px] text-center min-w-[36px] group hover:bg-[#0041E8] hover:text-[#fff]"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- col left -->
|
||||
<div
|
||||
class="w-[270px] m-[0_16px_0_0] bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] font-[500] leading-[24px] overflow-hidden">
|
||||
<a href="/article/form?id=1"
|
||||
class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition"> Chỉnh sửa
|
||||
</a>
|
||||
|
||||
<a href="/article/tag?id=1"
|
||||
class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition"> Tag </a>
|
||||
|
||||
<a href="/article/relation?id=1&related_item_type=product"
|
||||
class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition" {% if
|
||||
_check_type[1]=='product' %}style="color: #Fff;background: #0041E8;" {% endif %}> Liên quan: Sản phẩm
|
||||
</a>
|
||||
|
||||
<a href="/article/relation?id=1&related_item_type=product-category"
|
||||
class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition" {% if
|
||||
_check_type[1]=='product-category' %}style="color: #Fff;background: #0041E8;" {% endif %}> Liên quan:
|
||||
Danh mục sản phẩm </a>
|
||||
</div>
|
||||
|
||||
<!-- col right -->
|
||||
<div
|
||||
class="w-[852px] bg-white p-[16pX_16px_20px] rounded-[15px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[20px] block">
|
||||
{% if _check_type[1] == 'product'%}
|
||||
|
||||
{% include 'article/relation_product' %}
|
||||
|
||||
{% elsif _check_type[1] == 'product-category' %}
|
||||
|
||||
{% include 'article/relation_product_category' %}
|
||||
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Popup chọn tag -->
|
||||
<div id="popup-tag" class="hidden bg-white w-[852px] p-[16px] rounded-[15px]">
|
||||
<p class="mb-[14px] font-bold text-[20px] leading-[26px]"> Chọn Tag </p>
|
||||
|
||||
<form method="get" enctype="multipart/form-data" action="/"
|
||||
class="border border-[#F6F6F6] m-[12px_0_20px] p-[15px] bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)]">
|
||||
<input type="text" name="q" id="keyword" value="" placeholder="Tìm link truy cập"
|
||||
class="w-[375px] h-[36px] border border-[#D8D8D8] m-[0_10px_0_0] p-[0_10px] bg-white rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] ">
|
||||
<input type="submit" value="Tìm kiếm"
|
||||
class="h-[36px] bg-[#0041E8] text-[#fff] font-[500] p-[0_8px] mr-[12px] cursor-pointer rounded-[4px]">
|
||||
<p class="inline-block leading-[36px]"> (v.d. abc-xyz) </p>
|
||||
</form>
|
||||
|
||||
<div class="order-page-table max-h-[400px] overflow-auto">
|
||||
<table class="table">
|
||||
<thead class="bg-[#f6f6f6] text-[14px] text-[#000] font-700">
|
||||
<tr>
|
||||
<td width="40">STT</td>
|
||||
<td>Thương hiệu</td>
|
||||
<td width="80"> Lựa chọn </td>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
|
||||
<tr align="center">
|
||||
<td class="text-center"> 1 </td>
|
||||
<td align="left"> Laptop AMD Ryzen 3 </td>
|
||||
<td>
|
||||
<a href=""
|
||||
class="block font-[500] leading-[36px] rounded-[4px] bg-[#0041E8] p-[0_7px] text-[#fff_!important]">
|
||||
Chọn
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="paging">
|
||||
<a href="" class="paging-prev"><i class="fas fa-chevron-left"></i></a>
|
||||
<a href="" class="current">1</a>
|
||||
<a href="">2</a>
|
||||
<a href="">3</a>
|
||||
<a href="">4</a>
|
||||
<a href="" class="paging-next"><i class="fas fa-chevron-right"></i></a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -1,70 +0,0 @@
|
||||
{% assign _check_type = global.url | split: 'related_item_type=' %}
|
||||
|
||||
<div class="global-breadcrumb-container">
|
||||
<a href="/article"> Bài viết </a>
|
||||
<a href="/article/form?id=1"> Form cập nhật Bài viết </a>
|
||||
<a href=""> Thêm liên quan </a>
|
||||
</div>
|
||||
|
||||
<div class="max-w-[1141px] m-auto">
|
||||
<div class="flex flex-wrap items-start m-[16px_0]">
|
||||
<div class="w-[100%] p-[11px_16px] bg-white m-[0_0_16px] rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[18px]">
|
||||
<p class="font-bold text-[20px] mb-[6px] leading-[26px]"> Thêm liên quan </p>
|
||||
|
||||
<p class="w-[100%] text-[#6B7280] order-[1]">
|
||||
Thêm liên quan: HuraSoft - Test tin tức
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="w-[270px] m-[0_16px_0_0] bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] font-[500] leading-[24px] overflow-hidden">
|
||||
<a href="/article/relation-add?id=1&related_item_type=product" {% if _check_type[1] == 'product' %} style="color: #Fff;background: #0041E8;" {% endif %} class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition">
|
||||
Sản phẩm (2)
|
||||
</a>
|
||||
|
||||
<a href="/article/relation-add?id=1&related_item_type=product-category" {% if _check_type[1] == 'product-category' %} style="color: #Fff;background: #0041E8;" {% endif %} class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition">
|
||||
Danh mục sản phẩm (0)
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% if _check_type[1] == 'product' %}
|
||||
|
||||
{% include 'article/relation_product_add' %}
|
||||
|
||||
{% elsif _check_type[1] == 'product-category' %}
|
||||
|
||||
{% include 'article/relation_product_category_add' %}
|
||||
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
|
||||
|
||||
<script>
|
||||
tinymce.init({
|
||||
selector: 'textarea#js-desc',
|
||||
height: 350,
|
||||
menubar: true,
|
||||
plugins: [
|
||||
'advlist autolink lists link image charmap print preview anchor',
|
||||
'searchreplace visualblocks code fullscreen',
|
||||
'insertdatetime media table paste code help wordcount'
|
||||
],
|
||||
toolbar: 'undo redo | formatselect | ' +
|
||||
'bold italic backcolor | alignleft aligncenter ' +
|
||||
'alignright alignjustify | bullist numlist outdent indent | ' +
|
||||
'removeformat | help',
|
||||
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
$(function(){
|
||||
$("input[name='info[article_time_set]']").click(function(){
|
||||
if($(this).val() == 1) $("#js-publish_time").show();
|
||||
else $("#js-publish_time").hide();
|
||||
}) ;
|
||||
});
|
||||
</script>
|
||||
@@ -1,68 +0,0 @@
|
||||
<div class="flex flex-wrap items-center justify-between">
|
||||
<p class="font-bold leading-[20px] text-[20px] mr-3 mb-[13px]"> Danh sách liên quan: HuraSoft - Test tin tức </p>
|
||||
|
||||
<a href="/article/relation-add?id=1&related_item_type=product" class="flex items-center border border-[#0041E8] font-[500] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] leading-[31px] p-[0_10px] mb-[13px] group hover:bg-[#0041E8] hover:text-[#fff]">
|
||||
<span class="border-[1px] border-[#6B7280] h-[13px] w-[13px] leading-[10.3px] text-center rounded-[50%] mr-1 group-hover:border-[#fff]">+</span>
|
||||
<span> Thêm liên quan mới </span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="order-page-table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td width="40"> STT </td>
|
||||
<td width="70"> Ảnh </td>
|
||||
<td width="270"> Tên </td>
|
||||
<td> Thông tin bán hàng </td>
|
||||
<td width="70"> Cài đặt </td>
|
||||
<td > Lựa chọn </td>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr align="center">
|
||||
<td> 1 </td>
|
||||
|
||||
<td> <img src="https://via.placeholder.com/500x500" class="block"> </td>
|
||||
|
||||
<td align="left">
|
||||
<a href=""> CPU Intel Pentium Gold G6405 (Intel LGA1200 - 2 Core - 4 Thread - Base 4.1Ghz - Cache 4MB </a>
|
||||
</td>
|
||||
|
||||
<td align="left">
|
||||
<p> - Mã kho : <b> CPUI0132 </b> </p>
|
||||
<p> - Lượt xem: <b> 21577 </b> </p>
|
||||
<p> - Giá bán : <b class="text-[red]"> 1.999.000 vnđ </b> </p>
|
||||
<p> - Kho hàng : <b> 3 </b> </p>
|
||||
<p> - Bảo hành : <b> 36 Tháng </b> </p>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<p class="mb-[5px]"> STT </p>
|
||||
<input type="text" value="0" class="w-[100%] text-center h-[34px] p-[0_10px] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]">
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<div class="flex items-center flex-wrap justify-center">
|
||||
<a href="" class="inline-block text-center border border-[#0041E8] font-[500] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] leading-[31px] p-[0_10px] mr-[5px] hover:bg-[#0041E8] hover:text-[#fff]">
|
||||
Bỏ lựa chọn
|
||||
</a>
|
||||
|
||||
<a href="" title="Xem tại web" class="fas fa-globe bg-[#F5F7FF] leading-[30px] rounded-[5px] text-[#0041E8_!important] text-center w-[30px] border border-[#0041E8]"></a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="paging">
|
||||
<a href="" class="paging-prev"><i class="fas fa-chevron-left"></i></a>
|
||||
<a href="" class="current">1</a>
|
||||
<a href="">2</a>
|
||||
<a href="">3</a>
|
||||
<a href="">4</a>
|
||||
<a href="" class="paging-next"><i class="fas fa-chevron-right"></i></a>
|
||||
</div>
|
||||
@@ -1,78 +0,0 @@
|
||||
<div class="p-[16px] w-[852px] bg-white rounded-[15px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[20px] block">
|
||||
<p class="font-bold text-[20px] leading-[20px] mb-[15px]"> Chọn sản phẩm liên quan - Tổng số: 28872 </p>
|
||||
|
||||
<form method="get" enctype="multipart/form-data" action="/" class="border border-[#F6F6F6] m-[12px_0_16px] p-[15px] bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] flex items-center">
|
||||
<input type="text" name="q" id="keyword" value="" placeholder="Tìm sản phẩm liên quan" class="w-[245px] h-[36px] border border-[#D8D8D8] mr-[10px] p-[0_10px] bg-white rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] ">
|
||||
|
||||
<p class="mr-[10px]"> Chọn danh mục </p>
|
||||
|
||||
<select class="w-[160px] h-[36px] p-[0_5px] border border-[#D8D8D8] rounded-[4px] mr-[10px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)]">
|
||||
<option value=""> Tất cả sản phẩm </option>
|
||||
<option value=""> option </option>
|
||||
</select>
|
||||
|
||||
<select class="w-[160px] h-[36px] p-[0_5px] border border-[#D8D8D8] rounded-[4px] mr-[10px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)]">
|
||||
<option value=""> Thương hiệu </option>
|
||||
<option value=""> option </option>
|
||||
</select>
|
||||
|
||||
<input type="submit" value="Tìm kiếm" class="h-[36px] bg-[#0041E8] text-[#fff] font-[500] p-[0_8px] cursor-pointer rounded-[4px]">
|
||||
</form>
|
||||
|
||||
<a href="" class="inline-block leading-[35px] mr-[16px] border border-[#79B0E2] rounded-[4px] bg-white p-[0_15px] font-[500] text-[#79B0E2] hover:bg-[#79B0E2] hover:text-[#fff]">
|
||||
Chọn toàn bộ danh sách
|
||||
</a>
|
||||
|
||||
<div class="order-page-table m-[20px_0]">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td width="40"> STT </td>
|
||||
<td width="80"> Ảnh </td>
|
||||
<td> Tên </td>
|
||||
<td width="220"> Thông tin bán hàng </td>
|
||||
<td> Lựa chọn </td>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td align="center"> 1 </td>
|
||||
|
||||
<td>
|
||||
<img src="https://via.placeholder.com/880x350" class="block m-auto">
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<a href=""> CPU Intel Pentium Gold G6405 Intel LGA1200 - 2 Core - 4 Thread - Base 4.1Ghz - Cache 4MB </a>
|
||||
<p> Cập nhật: Hôm nay, 11:11 am </p>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
- Mã kho : <b> CPUI0132 </b> <br>
|
||||
- Lượt xem: <b> 21577 </b> <br>
|
||||
- Giá bán : <b> 1.999.000 vnđ </b> <br>
|
||||
- Kho hàng : <b> 3 </b> <br>
|
||||
- Bảo hành : <b> 36 Tháng </b>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<a href="" class="block leading-[29px] text-center font-[500] whitespace-nowrap border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] p-[0_5px] hover:bg-[#0041E8] hover:text-[#fff]">
|
||||
Chọn liên quan
|
||||
</a>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="paging">
|
||||
<a href="" class="paging-prev"><i class="fas fa-chevron-left"></i></a>
|
||||
<a href="" class="current">1</a>
|
||||
<a href="">2</a>
|
||||
<a href="">3</a>
|
||||
<a href="">4</a>
|
||||
<a href="" class="paging-next"><i class="fas fa-chevron-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,53 +0,0 @@
|
||||
<div class="flex flex-wrap items-center justify-between">
|
||||
<p class="font-bold leading-[20px] text-[20px] mr-3 mb-[13px]"> Danh sách liên quan: HuraSoft - Test tin tức </p>
|
||||
|
||||
<a href="/article/relation-add?id=1&related_item_type=product-category"
|
||||
class="flex items-center border border-[#0041E8] font-[500] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] leading-[31px] p-[0_10px] mb-[13px] group hover:bg-[#0041E8] hover:text-[#fff]">
|
||||
<span
|
||||
class="border-[1px] border-[#6B7280] h-[13px] w-[13px] leading-[10.3px] text-center rounded-[50%] mr-1 group-hover:border-[#fff]">+</span>
|
||||
<span> Thêm liên quan mới </span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="table">
|
||||
<table>
|
||||
<thead class="bg-[#f6f6f6] text-[#f6f6f6] font-700 text-[14px]">
|
||||
<tr>
|
||||
<td width="40"> STT </td>
|
||||
<td> Tên </td>
|
||||
<td width="120"> Lựa chọn </td>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr align="center">
|
||||
<td> 1 </td>
|
||||
|
||||
<td align="left">
|
||||
<p class="mb-[7px]"> Laptop - Tablet - Mobile </p>
|
||||
|
||||
<p class="mr-[10px] inline-block"> STT </p>
|
||||
<input type="text" value="0"
|
||||
class="w-[70px] text-center h-[34px] p-[0_10px] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]">
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<a href=""
|
||||
class="block text-center border border-[#0041E8] font-[500] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] leading-[31px] p-[0_5px] hover:bg-[#0041E8] hover:text-[#fff]">
|
||||
Bỏ lựa chọn
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="paging">
|
||||
<a href="" class="paging-prev"><i class="fas fa-chevron-left"></i></a>
|
||||
<a href="" class="current">1</a>
|
||||
<a href="">2</a>
|
||||
<a href="">3</a>
|
||||
<a href="">4</a>
|
||||
<a href="" class="paging-next"><i class="fas fa-chevron-right"></i></a>
|
||||
</div>
|
||||
@@ -1,60 +0,0 @@
|
||||
<form method="post" enctype="multipart/form-data" class="p-[16px] w-[852px] bg-white rounded-[15px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[20px] block">
|
||||
<p class="font-bold text-[20px] leading-[20px] mb-[20px]"> Chọn danh mục liên quan </p>
|
||||
|
||||
<div class="order-page-table table-vertical-inherit">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td> Danh mục </td>
|
||||
<td width="140"> Lựa chọn </td>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td> 1 Danh mục cấp 1 </td>
|
||||
<td>
|
||||
<a href="" class="block leading-[29px] text-center font-[500] whitespace-nowrap border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] p-[0_5px] hover:bg-[#0041E8] hover:text-[#fff]">
|
||||
Chọn liên quan
|
||||
</a>
|
||||
|
||||
<p class="block leading-[29px] text-center font-[500] whitespace-nowrap border border-[#000] rounded-[4px] p-[0_5px]"> Đã chọn </p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Danh mục cấp 2 -->
|
||||
<tr>
|
||||
<td style="padding-left: 30px;"> 1.1 Danh mục cấp 2 </td>
|
||||
<td>
|
||||
<a href="" class="block leading-[29px] text-center font-[500] whitespace-nowrap border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] p-[0_5px] hover:bg-[#0041E8] hover:text-[#fff]">
|
||||
Chọn liên quan
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Danh mục cấp 3 -->
|
||||
<tr>
|
||||
<td style="padding-left: 50px;"> 1.1.1 Danh mục cấp 3 </td>
|
||||
<td>
|
||||
<a href="" class="block leading-[29px] text-center font-[500] whitespace-nowrap border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] p-[0_5px] hover:bg-[#0041E8] hover:text-[#fff]">
|
||||
Chọn liên quan
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
<!-- Danh mục cấp 4 -->
|
||||
<tr>
|
||||
<td style="padding-left: 70px;"> 1.1.1.1 Danh mục cấp 4 </td>
|
||||
<td>
|
||||
<a href="" class="block leading-[29px] text-center font-[500] whitespace-nowrap border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] p-[0_5px] hover:bg-[#0041E8] hover:text-[#fff]">
|
||||
Chọn liên quan
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
</form>
|
||||
@@ -1,123 +0,0 @@
|
||||
<div class="global-breadcrumb-container">
|
||||
<a href="/article"> Bài viết </a>
|
||||
<a href=""> Form cập nhật Bài viết </a>
|
||||
</div>
|
||||
|
||||
<div class="max-w-[1141px] m-[0_auto_20px]">
|
||||
<div class="flex flex-wrap items-start justify-center">
|
||||
|
||||
<div class="w-[100%] p-[11px_16px] bg-white m-[0_0_16px] rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[20px] flex flex-wrap items-center justify-between">
|
||||
<p class="font-bold text-[20px]"> Sửa nội dung </p>
|
||||
|
||||
<p class="text-[#6B7280] mt-[10px] order-[1] w-[100%]"> ROG FALCHION LOW PROFILE – CHƠI GAME TRÊN MAC LÀ CHUYỆN NHỎ </p>
|
||||
|
||||
<div class="flex items-center">
|
||||
<a href="/article/form" class="inline-flex items-center whitespace-nowrap border border-[#ECECEC] rounded-[4px] bg-[#fff] text-[#6B7280] leading-[35px] p-[0_12px] m-[0_10px_0_0] group hover:bg-[#0041E8] hover:text-[#fff]">
|
||||
<span class="border-[1px] border-[#6B7280] h-[13px] w-[13px] leading-[10.3px] text-center rounded-[50%] mr-1 group-hover:border-[#fff]">+</span>
|
||||
<span>Thêm nội dung mới</span>
|
||||
</a>
|
||||
|
||||
<a href="" class="inline-flex items-center whitespace-nowrap border border-[#ECECEC] rounded-[4px] bg-[#fff] text-[#6B7280] leading-[35px] p-[0_12px] m-[0_10px_0_0] group hover:bg-[#0041E8] hover:text-[#fff]">
|
||||
<span class="far fa-folder mr-2"></span>
|
||||
<span>Quản lý danh mục</span>
|
||||
</a>
|
||||
|
||||
<a href="/article" title="Danh sách nội dung" class="fas fa-ellipsis-h text-[18px] border border-[#ECECEC] rounded-[4px] bg-[#fff] text-[#6B7280] leading-[35px] text-center min-w-[36px] group hover:bg-[#0041E8] hover:text-[#fff]"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- col left -->
|
||||
<div class="w-[270px] m-[0_16px_0_0] bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] font-[500] leading-[24px] overflow-hidden">
|
||||
<a href="/article/form?id=1" class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition"> Chỉnh sửa </a>
|
||||
|
||||
{% if global.url contains 'id=' %}
|
||||
<a href="javascript:void(0)" style="color: #Fff;background: #0041E8;" class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition"> Tag </a>
|
||||
<a href="/article/relation?id=1&related_item_type=product" class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition"> Liên quan: Sản phẩm </a>
|
||||
<a href="/article/relation?id=1&related_item_type=product-category" class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition"> Liên quan: Danh mục sản phẩm </a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- col right -->
|
||||
<form method="post" enctype="multipart/form-data" class="w-[852px] bg-white p-[16pX_16px_20px] rounded-[15px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[20px] block">
|
||||
|
||||
<a href="#popup-tag" data-fancybox class="inline-block border border-[#0041E8] font-[500] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] leading-[31px] p-[0_10px] hover:bg-[#0041E8] hover:text-[#fff]">
|
||||
Chọn tag mới
|
||||
</a>
|
||||
|
||||
<div class="order-page-table mt-[13px]">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td width="70"> STT </td>
|
||||
<td> Tag </td>
|
||||
<td width="70"> Lựa chọn </td>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr align="center">
|
||||
<td> 1 </td>
|
||||
<td align="left"> Laptop GTX 1050 </td>
|
||||
<td>
|
||||
<a href="" title="Xóa" class="icons icon-delete"></a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<hr class="border-[4px] border-[#FAFAFB] m-[16px_-16px]">
|
||||
|
||||
<input name="commit" type="submit" value="Cập nhật" class="inline-block cursor-pointer h-[32px] bg-[#0041E8] text-[#fff] rounded-[4px] font-[500] p-[0_11px]">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Popup chọn tag -->
|
||||
<div id="popup-tag" class="hidden bg-white w-[852px] p-[16px] rounded-[15px]">
|
||||
<p class="mb-[14px] font-bold text-[20px] leading-[26px]"> Chọn Tag </p>
|
||||
|
||||
<form method="get" enctype="multipart/form-data" action="/" class="border border-[#F6F6F6] m-[12px_0_20px] p-[15px] bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)]">
|
||||
<input type="text" name="q" id="keyword" value="" placeholder="Tìm link truy cập" class="w-[375px] h-[36px] border border-[#D8D8D8] m-[0_10px_0_0] p-[0_10px] bg-white rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] ">
|
||||
<input type="submit" value="Tìm kiếm" class="h-[36px] bg-[#0041E8] text-[#fff] font-[500] p-[0_8px] mr-[12px] cursor-pointer rounded-[4px]">
|
||||
<p class="inline-block leading-[36px]"> (v.d. abc-xyz) </p>
|
||||
</form>
|
||||
|
||||
<div class="order-page-table max-h-[400px] overflow-auto">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td width="40">STT</td>
|
||||
<td>Thương hiệu</td>
|
||||
<td width="80"> Lựa chọn </td>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
|
||||
<tr align="center">
|
||||
<td> 1 </td>
|
||||
<td align="left"> Laptop AMD Ryzen 3 </td>
|
||||
<td>
|
||||
<a href="" class="block font-[500] leading-[36px] rounded-[4px] bg-[#0041E8] p-[0_7px] text-[#fff_!important]">
|
||||
Chọn
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="paging">
|
||||
<a href="" class="paging-prev"><i class="fas fa-chevron-left"></i></a>
|
||||
<a href="" class="current">1</a>
|
||||
<a href="">2</a>
|
||||
<a href="">3</a>
|
||||
<a href="">4</a>
|
||||
<a href="" class="paging-next"><i class="fas fa-chevron-right"></i></a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
247
template/cart/home.html
Normal file
247
template/cart/home.html
Normal 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"> </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"> </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>
|
||||
@@ -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 -->
|
||||
|
||||
103
template/javascript/cart.html
Normal file
103
template/javascript/cart.html
Normal file
@@ -0,0 +1,103 @@
|
||||
<script>
|
||||
// ── Helpers ──────────────────────────────────────────────────────────────
|
||||
function formatPrice(n) {
|
||||
return Number(n).toLocaleString('vi-VN') + '₫';
|
||||
}
|
||||
|
||||
// cartItems cần global để các onclick inline gọi được
|
||||
var cartItems = {};
|
||||
|
||||
// ── Update total ─────────────────────────────────────────────────────────
|
||||
function updateCartTotal() {
|
||||
var total = 0;
|
||||
Object.values(cartItems).forEach(function (item) {
|
||||
if (item.price > 0) total += item.price * item.qty;
|
||||
});
|
||||
var totalEl = document.getElementById('cart-total');
|
||||
if (totalEl) totalEl.textContent = formatPrice(total);
|
||||
}
|
||||
|
||||
// ── Quantity controls ─────────────────────────────────────────────────────
|
||||
function cartInc(id) {
|
||||
var item = cartItems[id];
|
||||
if (!item) return;
|
||||
item.qty++;
|
||||
item.el.dataset.qty = item.qty;
|
||||
item.el.querySelector('.item-qty').textContent = item.qty;
|
||||
if (item.price > 0) {
|
||||
item.el.querySelector('.item-total-price').textContent = formatPrice(item.price * item.qty);
|
||||
}
|
||||
updateCartTotal();
|
||||
}
|
||||
|
||||
function cartDec(id) {
|
||||
var item = cartItems[id];
|
||||
if (!item || item.qty <= 1) return;
|
||||
item.qty--;
|
||||
item.el.dataset.qty = item.qty;
|
||||
item.el.querySelector('.item-qty').textContent = item.qty;
|
||||
if (item.price > 0) {
|
||||
item.el.querySelector('.item-total-price').textContent = formatPrice(item.price * item.qty);
|
||||
}
|
||||
updateCartTotal();
|
||||
}
|
||||
|
||||
// ── Remove item ──────────────────────────────────────────────────────────
|
||||
function cartRemove(id) {
|
||||
var item = cartItems[id];
|
||||
if (!item) return;
|
||||
if (!confirm('Bạn có chắc muốn xóa sản phẩm này khỏi giỏ hàng?')) return;
|
||||
item.el.closest('.cart-item-wrap').remove();
|
||||
delete cartItems[id];
|
||||
updateCartTotal();
|
||||
}
|
||||
|
||||
// ── Delivery tab switch ───────────────────────────────────────────────────
|
||||
function switchTab(tab) {
|
||||
var tabDelivery = document.getElementById('tab-delivery');
|
||||
var tabPickup = document.getElementById('tab-pickup');
|
||||
if (tab === 'delivery') {
|
||||
tabDelivery.className = 'h-[46px] w-[392px] text-[14px] font-medium bg-[#f3f4f6] border-b-2 border-[#e7000b] text-[#e7000b] rounded-tl-lg rounded-tr-lg';
|
||||
tabPickup.className = 'h-[46px] w-[408px] text-[14px] font-medium text-[#4a5565] border-b-2 border-transparent';
|
||||
} else {
|
||||
tabPickup.className = 'h-[46px] w-[408px] text-[14px] font-medium bg-[#f3f4f6] border-b-2 border-[#e7000b] text-[#e7000b] rounded-tl-lg rounded-tr-lg';
|
||||
tabDelivery.className = 'h-[46px] w-[392px] text-[14px] font-medium text-[#4a5565] border-b-2 border-transparent';
|
||||
}
|
||||
}
|
||||
|
||||
// ── Init sau khi DOM sẵn sàng ────────────────────────────────────────────
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
// Build cart state từ DOM
|
||||
document.querySelectorAll('.cart-item').forEach(function (el) {
|
||||
var id = el.dataset.id;
|
||||
var price = parseInt(el.dataset.price) || 0;
|
||||
var qty = parseInt(el.dataset.qty) || 1;
|
||||
cartItems[id] = { el: el, price: price, qty: qty };
|
||||
});
|
||||
|
||||
// Format giá từng item (số thô → "1.850.000₫")
|
||||
document.querySelectorAll('.cart-item').forEach(function (el) {
|
||||
var id = el.dataset.id;
|
||||
var item = cartItems[id];
|
||||
if (!item) return;
|
||||
if (item.price > 0) {
|
||||
var priceEl = el.querySelector('.item-total-price');
|
||||
if (priceEl) priceEl.textContent = formatPrice(item.price * item.qty);
|
||||
}
|
||||
var marketEl = el.querySelector('.item-market-price');
|
||||
if (marketEl) {
|
||||
var raw = parseInt(marketEl.textContent) || 0;
|
||||
if (raw > 0) marketEl.textContent = formatPrice(raw);
|
||||
}
|
||||
});
|
||||
|
||||
// Format tổng tiền
|
||||
var totalEl = document.getElementById('cart-total');
|
||||
if (totalEl) {
|
||||
var raw = parseInt(totalEl.textContent.replace(/\D/g, '')) || 0;
|
||||
totalEl.textContent = formatPrice(raw);
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
@@ -1,83 +0,0 @@
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monaco-editor@0.34.1/min/vs/editor/editor.main.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.34.1/min/vs/loader.js"></script>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
require.config({ paths: { 'vs': 'https://cdn.jsdelivr.net/npm/monaco-editor@0.34.1/min/vs' } });
|
||||
require(['vs/editor/editor.main'], function () {
|
||||
|
||||
monaco.editor.defineTheme('myCustomTheme', {
|
||||
base: 'vs',
|
||||
inherit: true,
|
||||
rules: [
|
||||
{ token: 'tag', foreground: '4CAF50', fontStyle: 'bold' }, // Màu cam cho thẻ HTML
|
||||
{ token: 'attribute.name', foreground: 'e00000' }, // Màu xanh lá cho thuộc tính
|
||||
{ token: 'attribute.value', foreground: 'e00000' }, // Màu vàng cho giá trị thuộc tính
|
||||
{ token: 'string', foreground: 'e00000' }, // Màu xanh dương cho chuỗi
|
||||
{ token: 'comment', foreground: '#4CAF50', fontStyle: 'italic' },
|
||||
],
|
||||
colors: {
|
||||
'editor.foreground': '#000000',
|
||||
'editorGutter.background': '#f6f6f6',
|
||||
'editor.lineNumber.foreground': '#000000',
|
||||
}
|
||||
})
|
||||
|
||||
monaco.editor.create(document.getElementById('tpl_editor'), {
|
||||
value: `<section class= "section-breakcrumb routing py-12 line-clamp" >
|
||||
<div class="global-breadcrumb container">
|
||||
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="list-style-none
|
||||
d- flex">
|
||||
<li class="routing-link" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
|
||||
<a href="/" itemprop="item" class="nopad-l">
|
||||
<span itemprop="name">Trang chủ</span>
|
||||
</a>
|
||||
<meta itemprop="position" content="1">
|
||||
</li>
|
||||
|
||||
<li class="routing-link" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
|
||||
<a href="{{ path.url }}" itemprop="item" class="nopad-l">
|
||||
<span itemprop="name"> {{ path.name }} </span>
|
||||
</a>
|
||||
<meta itemprop="position" content="{{ counter }}" />
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
|
||||
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="list-style-none d-flex">
|
||||
<li class="routing-link" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
|
||||
<a href="/" itemprop="item" class="nopad-l">
|
||||
<span itemprop="name">Trang chủ</span>
|
||||
</a>
|
||||
<meta itemprop="position" content="1">
|
||||
</li>
|
||||
|
||||
`,
|
||||
language: 'html',
|
||||
theme: 'myCustomTheme',
|
||||
automaticLayout: true,
|
||||
minimap: { enabled: false },
|
||||
autoClosingBrackets: true,
|
||||
autoClosingQuotes: true,
|
||||
autoIndent: true,
|
||||
wordWrap: 'on',
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
function open_template_list(id) {
|
||||
var $template = $('#template_list_' + id)
|
||||
if ($template.prop('open')) {
|
||||
$('#template_list_' + id).prop('open', false);
|
||||
} else {
|
||||
$('#template_list_' + id).prop('open', true);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function show_older_version() {
|
||||
$('#older_version').toggle()
|
||||
}
|
||||
</script>
|
||||
@@ -31,8 +31,8 @@
|
||||
prevEl: el.querySelector(".swiper-button-prev"),
|
||||
},
|
||||
breakpoints: {
|
||||
1280: { slidesPerView: 4 },
|
||||
1600: { slidesPerView: 5 },
|
||||
1200: { slidesPerView: 5 },
|
||||
1600: { slidesPerView: 6 },
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
@@ -12,45 +12,12 @@
|
||||
|
||||
{% if global.view == 'home' %}
|
||||
{% include javascript/product_list %}
|
||||
{% elsif global.view == 'detail' %}
|
||||
{% include javascript/product-detail %}
|
||||
{% endif %}
|
||||
|
||||
{% include javascript/product_form %}
|
||||
{% elsif global.module == 'cart' %}
|
||||
|
||||
{% elsif global.module == 'deal' %}
|
||||
{% include javascript/cart %}
|
||||
|
||||
{% include javascript/product_form %}
|
||||
|
||||
{% elsif global.module == 'marketing' %}
|
||||
|
||||
{% include javascript/marketing_form %}
|
||||
|
||||
{% elsif global.module == 'brand' %}
|
||||
|
||||
{% include javascript/brand %}
|
||||
|
||||
{% elsif global.module == 'report' %}
|
||||
|
||||
{% include javascript/visitor %}
|
||||
|
||||
{% elsif global.module == 'system' %}
|
||||
|
||||
{% include javascript/system %}
|
||||
|
||||
{% elsif global.module == 'page' %}
|
||||
|
||||
{% include javascript/page %}
|
||||
|
||||
{% elsif global.module == 'template' and global.view == 'edit-template' %}
|
||||
|
||||
{% include javascript/edit_template %}
|
||||
|
||||
{% elsif global.module == 'tag' and global.view == 'add' %}
|
||||
|
||||
{% include javascript/tag %}
|
||||
|
||||
{% elsif global.module == 'shipping2' %}
|
||||
|
||||
{% include javascript/shipping2 %}
|
||||
|
||||
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
226
template/javascript/product-detail.html
Normal file
226
template/javascript/product-detail.html
Normal file
@@ -0,0 +1,226 @@
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
// Swiper Thumbs Gallery
|
||||
if (typeof Swiper !== "undefined") {
|
||||
var thumbsSwiper = new Swiper(".product-thumbs-swiper", {
|
||||
spaceBetween: 8,
|
||||
slidesPerView: "auto",
|
||||
freeMode: true,
|
||||
watchSlidesProgress: true,
|
||||
})
|
||||
new Swiper(".product-main-swiper", {
|
||||
spaceBetween: 0,
|
||||
thumbs: { swiper: thumbsSwiper },
|
||||
})
|
||||
}
|
||||
|
||||
// Fancybox
|
||||
if (typeof Fancybox !== "undefined") {
|
||||
Fancybox.bind("[data-fancybox='product-gallery']")
|
||||
}
|
||||
|
||||
// Tab switching
|
||||
var tabBtnSpec = document.getElementById("tab-btn-spec")
|
||||
var tabBtnInfo = document.getElementById("tab-btn-info")
|
||||
var tabContentSpec = document.getElementById("tab-content-spec")
|
||||
var tabContentInfo = document.getElementById("tab-content-info")
|
||||
var descriptionContent = document.getElementById("product-description-content")
|
||||
var descriptionFade = document.getElementById("product-description-fade")
|
||||
var toggleDescriptionBtn = document.getElementById("btn-toggle-description")
|
||||
var descriptionCollapsedHeight = 420
|
||||
var isDescriptionExpanded = false
|
||||
|
||||
function setActiveTab(active) {
|
||||
if (active === "spec") {
|
||||
tabBtnSpec.className = "w-[205px] h-10 rounded-[4px] border border-[#0084ff] bg-[#edf7ff] text-[16px] text-[#0084ff] font-bold tracking-[-0.32px]"
|
||||
tabBtnInfo.className = "w-[205px] h-10 rounded-[4px] border border-[#e6e6e6] bg-white text-[16px] text-black font-bold tracking-[-0.32px]"
|
||||
tabContentSpec.classList.remove("hidden")
|
||||
tabContentInfo.classList.add("hidden")
|
||||
} else {
|
||||
tabBtnInfo.className = "w-[205px] h-10 rounded-[4px] border border-[#0084ff] bg-[#edf7ff] text-[16px] text-[#0084ff] font-bold tracking-[-0.32px]"
|
||||
tabBtnSpec.className = "w-[205px] h-10 rounded-[4px] border border-[#e6e6e6] bg-white text-[16px] text-black font-bold tracking-[-0.32px]"
|
||||
tabContentInfo.classList.remove("hidden")
|
||||
tabContentSpec.classList.add("hidden")
|
||||
requestAnimationFrame(syncDescriptionToggle)
|
||||
}
|
||||
}
|
||||
|
||||
function syncDescriptionToggle() {
|
||||
if (!descriptionContent || !toggleDescriptionBtn || !descriptionFade || !tabContentInfo) return
|
||||
if (tabContentInfo.classList.contains("hidden")) return
|
||||
|
||||
var fullHeight = descriptionContent.scrollHeight
|
||||
if (fullHeight <= descriptionCollapsedHeight + 8) {
|
||||
descriptionContent.style.maxHeight = "none"
|
||||
descriptionFade.classList.add("hidden")
|
||||
toggleDescriptionBtn.classList.add("hidden")
|
||||
return
|
||||
}
|
||||
|
||||
toggleDescriptionBtn.classList.remove("hidden")
|
||||
|
||||
if (isDescriptionExpanded) {
|
||||
descriptionContent.style.maxHeight = fullHeight + "px"
|
||||
toggleDescriptionBtn.textContent = "Thu gọn"
|
||||
descriptionFade.classList.add("hidden")
|
||||
} else {
|
||||
descriptionContent.style.maxHeight = descriptionCollapsedHeight + "px"
|
||||
toggleDescriptionBtn.textContent = "Xem thêm"
|
||||
descriptionFade.classList.remove("hidden")
|
||||
}
|
||||
}
|
||||
|
||||
function scrollToDescription() {
|
||||
if (!tabContentInfo) return
|
||||
var offsetTop = tabContentInfo.getBoundingClientRect().top + window.pageYOffset - 80
|
||||
window.scrollTo({
|
||||
top: offsetTop > 0 ? offsetTop : 0,
|
||||
behavior: "smooth",
|
||||
})
|
||||
}
|
||||
|
||||
if (tabBtnSpec && tabBtnInfo && tabContentSpec && tabContentInfo) {
|
||||
tabBtnSpec.addEventListener("click", function () { setActiveTab("spec") })
|
||||
tabBtnInfo.addEventListener("click", function () { setActiveTab("info") })
|
||||
}
|
||||
|
||||
if (toggleDescriptionBtn) {
|
||||
toggleDescriptionBtn.addEventListener("click", function () {
|
||||
var wasExpanded = isDescriptionExpanded
|
||||
isDescriptionExpanded = !isDescriptionExpanded
|
||||
syncDescriptionToggle()
|
||||
if (wasExpanded) {
|
||||
setTimeout(scrollToDescription, 60)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if (tabContentInfo && !tabContentInfo.classList.contains("hidden")) {
|
||||
requestAnimationFrame(syncDescriptionToggle)
|
||||
}
|
||||
window.addEventListener("load", syncDescriptionToggle)
|
||||
|
||||
var installOptionGroup = document.getElementById("install-option-group")
|
||||
var installOptions = installOptionGroup ? Array.prototype.slice.call(installOptionGroup.querySelectorAll(".js-install-option")) : []
|
||||
var selectedAddonInput = document.getElementById("selected-addon-id")
|
||||
|
||||
function setInstallOptionActive(activeOption) {
|
||||
if (!activeOption) return
|
||||
|
||||
installOptions.forEach(function (option) {
|
||||
var isActive = option === activeOption
|
||||
option.classList.toggle("is-selected", isActive)
|
||||
option.classList.toggle("border-[#e4057c]", isActive)
|
||||
option.classList.toggle("bg-[#fff6f6]", isActive)
|
||||
option.classList.toggle("border-[#e2e2e2]", !isActive)
|
||||
option.classList.toggle("bg-white", !isActive)
|
||||
option.setAttribute("aria-checked", isActive ? "true" : "false")
|
||||
|
||||
var radio = option.querySelector(".js-install-radio")
|
||||
var radioDot = option.querySelector(".js-install-radio-dot")
|
||||
var selectedDot = option.querySelector(".js-install-selected-dot")
|
||||
|
||||
if (radio) {
|
||||
radio.classList.toggle("border-[#a0045c]", isActive)
|
||||
radio.classList.toggle("border-[#a9a9a9]", !isActive)
|
||||
}
|
||||
if (radioDot) {
|
||||
radioDot.classList.toggle("hidden", !isActive)
|
||||
}
|
||||
if (selectedDot) {
|
||||
selectedDot.classList.toggle("hidden", !isActive)
|
||||
}
|
||||
})
|
||||
|
||||
if (selectedAddonInput) {
|
||||
selectedAddonInput.value = activeOption.getAttribute("data-addon-id") || ""
|
||||
}
|
||||
}
|
||||
|
||||
if (installOptions.length > 0) {
|
||||
installOptions.forEach(function (option) {
|
||||
option.addEventListener("click", function () {
|
||||
setInstallOptionActive(option)
|
||||
})
|
||||
option.addEventListener("keydown", function (event) {
|
||||
if (event.key === "Enter" || event.key === " ") {
|
||||
event.preventDefault()
|
||||
setInstallOptionActive(option)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
var defaultOption = installOptionGroup.querySelector(".js-install-option.is-selected") || installOptions[0]
|
||||
setInstallOptionActive(defaultOption)
|
||||
}
|
||||
|
||||
function closeCartPopup() {
|
||||
var popup = document.getElementById("cart-popup")
|
||||
if (!popup) return
|
||||
popup.classList.add("hidden")
|
||||
popup.style.display = "none"
|
||||
document.body.classList.remove("overflow-hidden")
|
||||
}
|
||||
|
||||
function showAddToCartPopup(button) {
|
||||
var popup = document.getElementById("cart-popup")
|
||||
|
||||
if (!popup) {
|
||||
// Fallback for pages without the global popup container.
|
||||
var toast = document.getElementById("cart-toast")
|
||||
if (toast) {
|
||||
toast.classList.remove("hidden")
|
||||
setTimeout(function () { toast.classList.add("hidden") }, 3000)
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
var productName = button.getAttribute("data-product-name") || ""
|
||||
var productImage = button.getAttribute("data-product-image") || ""
|
||||
var productPrice = button.getAttribute("data-product-price") || "Liên hệ"
|
||||
|
||||
var popupImg = document.getElementById("cart-popup-img")
|
||||
var popupName = document.getElementById("cart-popup-name")
|
||||
var popupPrice = document.getElementById("cart-popup-price")
|
||||
|
||||
if (popupImg) popupImg.src = productImage
|
||||
if (popupName) popupName.textContent = productName
|
||||
if (popupPrice) popupPrice.textContent = productPrice
|
||||
|
||||
popup.classList.remove("hidden")
|
||||
popup.style.display = "flex"
|
||||
document.body.classList.add("overflow-hidden")
|
||||
}
|
||||
|
||||
window.closeCartPopup = closeCartPopup
|
||||
|
||||
var cartPopup = document.getElementById("cart-popup")
|
||||
if (cartPopup) {
|
||||
cartPopup.addEventListener("click", function (event) {
|
||||
if (event.target === cartPopup) {
|
||||
closeCartPopup()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
document.addEventListener("keydown", function (event) {
|
||||
if (event.key === "Escape") {
|
||||
closeCartPopup()
|
||||
}
|
||||
})
|
||||
|
||||
var addToCartBtn = document.getElementById("btn-add-to-cart")
|
||||
if (addToCartBtn) {
|
||||
addToCartBtn.addEventListener("click", function () {
|
||||
showAddToCartPopup(addToCartBtn)
|
||||
})
|
||||
}
|
||||
|
||||
var buyNowBtn = document.getElementById("btn-buy-now")
|
||||
if (buyNowBtn) {
|
||||
buyNowBtn.addEventListener("click", function () {
|
||||
window.location.href = "/cart"
|
||||
})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -4,8 +4,10 @@
|
||||
<!-- 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>
|
||||
<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"></path>
|
||||
</svg>
|
||||
<span class="text-black font-medium">{{ page.current_category.name | strip }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Banner Sale -->
|
||||
@@ -19,29 +21,41 @@
|
||||
<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">
|
||||
class="relative bg-white border border-[#dcdcdc] rounded-[8px] w-[226px] h-[426px] shrink-0 px-[7px] pt-[10px] pb-[8px] flex flex-col gap-[8px] no-underline">
|
||||
<div class="absolute left-[7px] top-[8px] z-[1] flex items-center gap-[8px]">
|
||||
{% if _product.productType.isNew == 1 %}
|
||||
<span
|
||||
class="inline-flex items-center justify-center h-4 rounded-[4px] bg-[#fff1f1] px-[5px] text-[10px] leading-none tracking-[-0.2px] text-[#e40000]">Mẫu
|
||||
mới</span>
|
||||
{% endif %}
|
||||
<span
|
||||
class="inline-flex items-center justify-center h-4 rounded-[4px] bg-[#f1f1f1] px-[6px] text-[10px] leading-none tracking-[-0.2px] text-[#484848]">Trả
|
||||
chậm 0%</span>
|
||||
</div>
|
||||
|
||||
<div class="h-[173px] mt-[20px] 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>
|
||||
<span>{{ _product.label | strip | default: 'Sắm tết vô tư' }}</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 != '' %}
|
||||
_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">-{{
|
||||
_product.price_off }}%</span>
|
||||
_price_off }}%</span>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<p class="m-0 text-[18px] leading-none font-bold text-[#db0000] tracking-[-0.36px]">Liên hệ</p>
|
||||
@@ -49,12 +63,20 @@
|
||||
</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>
|
||||
_product.marketPrice | format_number }} đ</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="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="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]" />
|
||||
@@ -144,47 +166,53 @@
|
||||
{% 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">
|
||||
<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
|
||||
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>
|
||||
<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] 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] text-[#707070] text-[12px] leading-none tracking-[-0.24px] whitespace-nowrap">
|
||||
<div class="inline-flex items-center gap-1">
|
||||
<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>
|
||||
@@ -265,4 +293,4 @@
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,6 +2,9 @@
|
||||
{% assign _product = page.product_info %}
|
||||
{% assign _rating_summary = _product.review.summary %}
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5/dist/fancybox/fancybox.css" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5/dist/fancybox/fancybox.umd.js"></script>
|
||||
|
||||
<style>
|
||||
.font-inter {
|
||||
font-family: 'Inter', sans-serif;
|
||||
@@ -9,19 +12,20 @@
|
||||
|
||||
.star-row {
|
||||
display: grid;
|
||||
grid-template-columns: 10px 12px 1fr 36px;
|
||||
grid-template-columns: 10px 12px 232px 40px;
|
||||
align-items: center;
|
||||
column-gap: 9px;
|
||||
}
|
||||
|
||||
.star-bar {
|
||||
width: 232px;
|
||||
height: 6px;
|
||||
border-radius: 9999px;
|
||||
background: #e6e6e6;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.star-bar > span {
|
||||
.star-bar>span {
|
||||
display: block;
|
||||
height: 100%;
|
||||
background: #0084ff;
|
||||
@@ -36,13 +40,52 @@
|
||||
.product-description table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.product-thumbs-swiper .swiper-slide {
|
||||
opacity: 0.5;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.product-thumbs-swiper .swiper-slide-thumb-active {
|
||||
opacity: 1;
|
||||
border-color: #57aeff;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="w-[1200px] mx-auto flex flex-col gap-3 py-5">
|
||||
<div class="layout-container flex flex-col gap-3 py-5">
|
||||
<div class="flex items-center gap-2 text-[13px] text-black">
|
||||
{% assign _product_paths = _product.productPath[0].path | to_array %}
|
||||
{% if _product_paths.size > 0 %}
|
||||
{% for _path_entry in _product_paths %}
|
||||
{% assign _path = _path_entry.value %}
|
||||
{% if _path.url != '' %}
|
||||
<a href="{{ _path.url }}" class="hover:text-[#e4057c]">{{ _path.name | strip }}</a>
|
||||
{% else %}
|
||||
<span>{{ _path.name | strip }}</span>
|
||||
{% endif %}
|
||||
{% unless forloop.last %}
|
||||
<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"></path>
|
||||
</svg>
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
{% elsif _product.categoryInfo.size > 0 %}
|
||||
<a href="{{ _product.categoryInfo[0].url }}" class="hover:text-[#e4057c]">{{ _product.categoryInfo[0].name | strip
|
||||
}}</a>
|
||||
{% else %}
|
||||
<span>Chi tiết sản phẩm</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if false %}
|
||||
<div class="flex items-center gap-2 text-[13px] text-black">
|
||||
<a href="/" class="hover:text-[#e4057c]">Trang chủ</a>
|
||||
{% if _product.productPath.size > 0 %}
|
||||
{% for _path in _product.productPath[0].path %}
|
||||
{% assign _product_paths = _product.productPath[0].path | to_array %}
|
||||
{% if _product_paths.size > 0 %}
|
||||
{% for _path_entry in _product_paths %}
|
||||
{% assign _path = _path_entry.value %}
|
||||
<img src="{{ 'icon_arrow_next.svg' | asset_url }}" alt="" class="w-[10px] h-[10px]" />
|
||||
<a href="{{ _path.url }}" class="hover:text-[#e4057c]">{{ _path.name }}</a>
|
||||
{% endfor %}
|
||||
@@ -50,7 +93,10 @@
|
||||
<img src="{{ 'icon_arrow_next.svg' | asset_url }}" alt="" class="w-[10px] h-[10px]" />
|
||||
<a href="{{ _product.categoryInfo[0].url }}" class="hover:text-[#e4057c]">{{ _product.categoryInfo[0].name }}</a>
|
||||
{% endif %}
|
||||
<img src="{{ 'icon_arrow_next.svg' | asset_url }}" alt="" class="w-[10px] h-[10px]" />
|
||||
<span class="text-black line-clamp-1">{{ _product.productName }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex items-center gap-3">
|
||||
@@ -68,33 +114,60 @@
|
||||
{{ _rating_summary.avgRate | default: 0 }}
|
||||
</span>
|
||||
<a href="#product-spec" class="text-[#0084ff] flex items-center gap-1">
|
||||
<span class="inline-flex items-center justify-center w-5 h-5 rounded-full border border-[#0084ff] text-[11px]">i</span>
|
||||
<span
|
||||
class="inline-flex items-center justify-center w-5 h-5 rounded-full border border-[#0084ff] text-[11px]">i</span>
|
||||
Thông số
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-3">
|
||||
<section class="w-[796px] flex flex-col gap-3">
|
||||
<section class="flex-1 min-w-0 flex flex-col gap-3">
|
||||
<div class="bg-white rounded-[8px] px-3 py-[10px] flex flex-col gap-2">
|
||||
<div class="w-[392px] h-[392px] mx-auto rounded-[8px] overflow-hidden bg-white flex items-center justify-center">
|
||||
<img src="{{ _product.productImage.large }}" alt="{{ _product.productName }}" class="w-full h-full object-contain"
|
||||
onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
||||
<!-- Main image swiper -->
|
||||
<div
|
||||
class="swiper product-main-swiper w-full max-w-[460px] aspect-square mx-auto rounded-[8px] overflow-hidden bg-white">
|
||||
<div class="swiper-wrapper">
|
||||
{% if _product.productImageGallery.size > 0 %}
|
||||
{% for _image in _product.productImageGallery limit:13 %}
|
||||
<div class="swiper-slide flex items-center justify-center">
|
||||
<a data-fancybox="product-gallery"
|
||||
href="{{ _image.large | default: _image.original | default: _image.small }}"
|
||||
class="block w-full h-full">
|
||||
<img src="{{ _image.large | default: _image.original | default: _image.small }}"
|
||||
alt="{{ _product.productName }}" class="w-full h-full object-contain"
|
||||
onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
||||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<div class="swiper-slide flex items-center justify-center">
|
||||
<a data-fancybox="product-gallery" href="{{ _product.productImage.large }}" class="block w-full h-full">
|
||||
<img src="{{ _product.productImage.large }}" alt="{{ _product.productName }}"
|
||||
class="w-full h-full object-contain" onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
{% if _product.productImageGallery.size > 0 %}
|
||||
{% for _image in _product.productImageGallery limit:13 %}
|
||||
<button class="w-[52px] h-[52px] rounded-[2px] overflow-hidden {% if forloop.first %}border border-[#57aeff]{% else %}border border-transparent{% endif %}">
|
||||
<img src="{{ _image.large | default: _image.original | default: _image.small }}" alt="{{ _product.productName }}"
|
||||
class="w-full h-full object-cover" onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
||||
</button>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<button class="w-[52px] h-[52px] rounded-[2px] overflow-hidden border border-[#57aeff]">
|
||||
<img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}" class="w-full h-full object-cover"
|
||||
onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
||||
</button>
|
||||
{% endif %}
|
||||
<!-- Thumbnails swiper -->
|
||||
<div class="swiper product-thumbs-swiper mt-1">
|
||||
<div class="swiper-wrapper">
|
||||
{% if _product.productImageGallery.size > 0 %}
|
||||
{% for _image in _product.productImageGallery limit:13 %}
|
||||
<div class="swiper-slide !w-[52px] !h-[52px] rounded-[2px] overflow-hidden">
|
||||
<img src="{{ _image.small | default: _image.original | default: _image.large }}"
|
||||
alt="{{ _product.productName }}" class="w-full h-full object-cover"
|
||||
onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<div class="swiper-slide !w-[52px] !h-[52px] rounded-[2px] overflow-hidden">
|
||||
<img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}"
|
||||
class="w-full h-full object-cover" onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -102,37 +175,56 @@
|
||||
<h2 class="font-inter text-[16px] font-bold tracking-[-0.32px]">MIQ cam kết</h2>
|
||||
<div class="h-px bg-[#ececec]"></div>
|
||||
<div class="grid grid-cols-2 gap-x-[40px] gap-y-3 text-[13px] text-black tracking-[-0.26px]">
|
||||
<p class="flex items-start gap-2"><img src="{{ 'icon_double_next_small.svg' | asset_url }}" alt="" class="w-7 h-7 mt-[-2px]" />
|
||||
Hàng chính hãng, hỗ trợ kỹ thuật nhanh chóng.</p>
|
||||
<p class="flex items-start gap-2"><img src="{{ 'icon_certificate.svg' | asset_url }}" alt="" class="w-7 h-7 mt-[-2px]" />
|
||||
{% if _product.warranty != '' %}{{ _product.warranty }}{% else %}Bảo hành theo chính sách của nhà sản xuất.{% endif %}</p>
|
||||
<p class="flex items-start gap-2"><img src="{{ 'icon_certificate.svg' | asset_url }}" alt="" class="w-7 h-7 mt-[-2px]" />
|
||||
{% if _product.price > 0 %}Giá bán minh bạch, cập nhật theo dữ liệu sản phẩm.{% else %}Giá đang được cập nhật, vui lòng liên hệ để nhận báo giá.{% endif %}</p>
|
||||
<p class="flex items-start gap-2"><img src="{{ 'icon_customer_support.svg' | asset_url }}" alt="" class="w-7 h-7 mt-[-2px]" />
|
||||
Tư vấn trước và sau mua hàng trong giờ hành chính.</p>
|
||||
<p class="flex items-start gap-2"><img src="{{ 'icon_double_next_small.svg' | asset_url }}" alt="" class="w-7 h-7 mt-[-2px]" />
|
||||
{% if _product.package_accessory != '' %}{{ _product.package_accessory }}{% else %}Phụ kiện và quà tặng áp dụng theo từng chương trình cụ thể.{% endif %}</p>
|
||||
<p class="flex items-start gap-2">
|
||||
<img src="https://www.figma.com/api/mcp/asset/1eb5d75b-4d86-4183-afc5-4ea470d2b03a" alt=""
|
||||
class="w-7 h-7 shrink-0" />
|
||||
Hư gì đổi nấy 12 tháng tận nhà (miễn phí tháng đầu)
|
||||
</p>
|
||||
<p class="flex items-start gap-2">
|
||||
<img src="https://www.figma.com/api/mcp/asset/67ff0e18-ae1e-4a60-b2f7-7adce5447103" alt=""
|
||||
class="w-7 h-7 shrink-0" />
|
||||
{% if _product.warranty != '' %}{{ _product.warranty }}{% else %}Bảo hành chính hãng 2 năm, có người đến tận
|
||||
nhà{% endif %}
|
||||
</p>
|
||||
<p class="flex items-start gap-2">
|
||||
<img src="https://www.figma.com/api/mcp/asset/67ff0e18-ae1e-4a60-b2f7-7adce5447103" alt=""
|
||||
class="w-7 h-7 shrink-0" />
|
||||
{% if _product.price > 0 %}Giá bán minh bạch, cập nhật theo dữ liệu sản phẩm.{% else %}Giá đang được cập
|
||||
nhật, vui lòng liên hệ để nhận báo giá.{% endif %}
|
||||
</p>
|
||||
<p class="flex items-start gap-2">
|
||||
<img src="https://www.figma.com/api/mcp/asset/ad1d1545-2457-4297-9260-befa7a7ae7c3" alt=""
|
||||
class="w-7 h-7 shrink-0" />
|
||||
Nếu dùng cho hoạt động kinh doanh (nhà máy, khách sạn, giặt ủi,...) thì không được bảo hành.
|
||||
</p>
|
||||
<p class="flex items-start gap-2">
|
||||
<img src="https://www.figma.com/api/mcp/asset/8ccb7b02-0447-4725-9436-399b0fdcdea2" alt=""
|
||||
class="w-7 h-7 shrink-0" />
|
||||
{% if _product.package_accessory != '' %}{{ _product.package_accessory }}{% else %}Lắp đặt miễn phí lúc giao
|
||||
hàng{% endif %}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-[8px] p-3 flex flex-col gap-3">
|
||||
<h3 class="text-[16px] font-bold tracking-[-0.32px]">Tham khảo thêm sản phẩm đang xem</h3>
|
||||
<div class="min-h-[98px] rounded-[8px] border border-[#ebebeb] flex items-center gap-3 px-3 py-[9px]">
|
||||
<img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}" class="w-20 h-20 rounded-[2px] object-cover"
|
||||
onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
||||
<div class="w-[472px] flex flex-col gap-1">
|
||||
<img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}"
|
||||
class="w-20 h-20 rounded-[2px] object-cover" onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
||||
<div class="flex-1 min-w-0 flex flex-col gap-1">
|
||||
<p class="text-[14px] font-semibold leading-6 tracking-[-0.28px]">{{ _product.productName }}</p>
|
||||
<div class="flex items-center gap-2 flex-wrap">
|
||||
{% if _product.price > 0 %}
|
||||
<p class="text-[15px] font-bold text-[#cd0000]">{{ _product.price | number_format }}₫</p>
|
||||
<p class="text-[15px] font-bold text-[#cd0000]">{{ _product.price | format_number }}₫</p>
|
||||
{% else %}
|
||||
<p class="text-[15px] font-bold text-[#cd0000]">Liên hệ</p>
|
||||
{% endif %}
|
||||
{% if _product.marketPrice > 0 %}
|
||||
<p class="text-[13px] text-[#9d9d9d] line-through">{{ _product.marketPrice | number_format }}₫</p>
|
||||
<p class="text-[13px] text-[#9d9d9d] line-through">{{ _product.marketPrice | format_number }}₫</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
<p class="text-[13px] leading-6 tracking-[-0.26px]">{% if _product.warranty != '' %}{{ _product.warranty }}{% else %}Thông tin bảo hành đang cập nhật.{% endif %}</p>
|
||||
<p class="text-[13px] leading-6 tracking-[-0.26px]">{% if _product.warranty != '' %}{{ _product.warranty
|
||||
}}{% else %}Thông tin bảo hành đang cập nhật.{% endif %}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -140,7 +232,8 @@
|
||||
<div class="bg-white rounded-[8px] px-3 py-[15px] flex flex-col gap-2">
|
||||
<h3 class="text-[16px] font-bold tracking-[-0.32px]">Đặc điểm nổi bật</h3>
|
||||
{% if _product.productSummary != '' %}
|
||||
<div class="text-[13px] leading-[22px] tracking-[-0.26px] whitespace-pre-line">{{ _product.productSummary }}</div>
|
||||
<div class="text-[13px] leading-[22px] tracking-[-0.26px] whitespace-pre-line">{{ _product.productSummary }}
|
||||
</div>
|
||||
{% else %}
|
||||
<ul class="list-disc ps-5 text-[13px] leading-[22px] tracking-[-0.26px]">
|
||||
<li>Sản phẩm đang được cập nhật phần mô tả nổi bật.</li>
|
||||
@@ -151,78 +244,117 @@
|
||||
|
||||
<div id="product-spec" class="bg-white rounded-[8px] px-3 py-[22px] flex flex-col gap-4">
|
||||
<div class="flex items-center justify-center gap-3">
|
||||
<button class="w-[205px] h-10 rounded-[4px] border border-[#0084ff] bg-[#edf7ff] text-[16px] text-[#0084ff] font-bold tracking-[-0.32px]">Thông số kỹ thuật</button>
|
||||
<button class="w-[205px] h-10 rounded-[4px] border border-[#e6e6e6] bg-white text-[16px] text-black font-bold tracking-[-0.32px]">Thông tin sản phẩm</button>
|
||||
<button id="tab-btn-spec"
|
||||
class="w-[205px] h-10 rounded-[4px] border border-[#0084ff] bg-[#edf7ff] text-[16px] text-[#0084ff] font-bold tracking-[-0.32px]">Thông
|
||||
số kỹ thuật</button>
|
||||
<button id="tab-btn-info"
|
||||
class="w-[205px] h-10 rounded-[4px] border border-[#e6e6e6] bg-white text-[16px] text-black font-bold tracking-[-0.32px]">Thông
|
||||
tin sản phẩm</button>
|
||||
</div>
|
||||
<div class="h-10 rounded-[4px] bg-[#f2f4f7] flex items-center justify-between px-2">
|
||||
<p class="font-inter font-semibold text-[13px] tracking-[-0.26px]">Tổng quan</p>
|
||||
<img src="{{ 'icon_arrow_next.svg' | asset_url }}" alt="" class="w-5 h-5 rotate-90" />
|
||||
<!-- Tab: Thông số kỹ thuật -->
|
||||
<div id="tab-content-spec">
|
||||
<div class="h-10 rounded-[4px] bg-[#f2f4f7] flex items-center justify-between px-2">
|
||||
<p class="font-inter font-semibold text-[13px] tracking-[-0.26px]">Tổng quan</p>
|
||||
<img src="{{ 'icon_arrow_next.svg' | asset_url }}" alt="" class="w-5 h-5 rotate-90" />
|
||||
</div>
|
||||
<div class="grid grid-cols-[196px_1fr] gap-x-[88px] gap-y-[24px] px-3 mt-4 text-[13px] tracking-[-0.26px]">
|
||||
<p>Tên sản phẩm</p>
|
||||
<p>{{ _product.productName }}</p>
|
||||
<p>Danh mục</p>
|
||||
<p>{% if _product.categoryInfo.size > 0 %}{{ _product.categoryInfo[0].name }}{% else %}Đang cập nhật{% endif
|
||||
%}</p>
|
||||
<p>Thương hiệu</p>
|
||||
<p>{% if _product.brand.name != '' %}{{ _product.brand.name }}{% else %}Đang cập nhật{% endif %}</p>
|
||||
<p>Model</p>
|
||||
<p>{% if _product.productModel != '' %}{{ _product.productModel }}{% else %}Đang cập nhật{% endif %}</p>
|
||||
<p>SKU</p>
|
||||
<p>{% if _product.productSKU != '' %}{{ _product.productSKU }}{% else %}Đang cập nhật{% endif %}</p>
|
||||
<p>Bảo hành</p>
|
||||
<p>{% if _product.warranty != '' %}{{ _product.warranty }}{% else %}Đang cập nhật{% endif %}</p>
|
||||
<p>Đơn vị tính</p>
|
||||
<p>{{ _product.priceUnit }}</p>
|
||||
<p>Cập nhật</p>
|
||||
<p>{{ _product.lastUpdate }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-[196px_1fr] gap-x-[88px] gap-y-[24px] px-3 text-[13px] tracking-[-0.26px]">
|
||||
<p>Tên sản phẩm</p>
|
||||
<p>{{ _product.productName }}</p>
|
||||
<p>Danh mục</p>
|
||||
<p>{% if _product.categoryInfo.size > 0 %}{{ _product.categoryInfo[0].name }}{% else %}Đang cập nhật{% endif %}</p>
|
||||
<p>Thương hiệu</p>
|
||||
<p>{% if _product.brand.name != '' %}{{ _product.brand.name }}{% else %}Đang cập nhật{% endif %}</p>
|
||||
<p>Model</p>
|
||||
<p>{% if _product.productModel != '' %}{{ _product.productModel }}{% else %}Đang cập nhật{% endif %}</p>
|
||||
<p>SKU</p>
|
||||
<p>{% if _product.productSKU != '' %}{{ _product.productSKU }}{% else %}Đang cập nhật{% endif %}</p>
|
||||
<p>Bảo hành</p>
|
||||
<p>{% if _product.warranty != '' %}{{ _product.warranty }}{% else %}Đang cập nhật{% endif %}</p>
|
||||
<p>Đơn vị tính</p>
|
||||
<p>{{ _product.priceUnit }}</p>
|
||||
<p>Cập nhật</p>
|
||||
<p>{{ _product.lastUpdate }}</p>
|
||||
</div>
|
||||
|
||||
<div class="h-10 rounded-[4px] bg-[#f2f4f7] flex items-center justify-between px-2 mt-2">
|
||||
<p class="font-inter font-semibold text-[13px] tracking-[-0.26px]">Mô tả sản phẩm</p>
|
||||
<img src="{{ 'icon_arrow_next.svg' | asset_url }}" alt="" class="w-5 h-5 rotate-90" />
|
||||
</div>
|
||||
<div class="product-description px-3 text-[13px] leading-[22px] tracking-[-0.26px] text-black overflow-hidden">
|
||||
{% if _product.productDescription != '' %}
|
||||
{{ _product.productDescription }}
|
||||
{% else %}
|
||||
<p>Thông tin mô tả sản phẩm đang được cập nhật.</p>
|
||||
{% endif %}
|
||||
<!-- Tab: Thông tin sản phẩm -->
|
||||
<div id="tab-content-info" class="hidden">
|
||||
<div class="h-10 rounded-[4px] bg-[#f2f4f7] flex items-center justify-between px-2">
|
||||
<p class="font-inter font-semibold text-[13px] tracking-[-0.26px]">Mô tả sản phẩm</p>
|
||||
<img src="{{ 'icon_arrow_next.svg' | asset_url }}" alt="" class="w-5 h-5 rotate-90" />
|
||||
</div>
|
||||
<div class="relative mt-4 px-3">
|
||||
<div id="product-description-content"
|
||||
class="product-description text-[13px] leading-[22px] tracking-[-0.26px] text-black overflow-hidden max-h-[420px] transition-all duration-300 ease-in-out">
|
||||
{% if _product.productDescription != '' %}
|
||||
{{ _product.productDescription }}
|
||||
{% else %}
|
||||
<p>Thông tin mô tả sản phẩm đang được cập nhật.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div id="product-description-fade"
|
||||
class="pointer-events-none absolute left-3 right-3 bottom-0 h-20 bg-gradient-to-t from-white to-transparent">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 flex justify-center">
|
||||
<button id="btn-toggle-description" type="button"
|
||||
class="hidden h-10 rounded-[4px] border border-[#8c8c8c] px-6 text-[#6b6b6b] text-[13px] font-medium">
|
||||
Xem thêm
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% comment %}
|
||||
<div class="bg-white rounded-[12px] px-3 py-4 flex flex-col gap-5">
|
||||
<h3 class="text-[18px] font-semibold tracking-[-0.36px]">Đánh giá {{ _product.productName }}</h3>
|
||||
<div class="flex items-center justify-center gap-5">
|
||||
<div class="w-[112px] flex flex-col items-center gap-1">
|
||||
<p class="text-[32px] font-extrabold font-inter tracking-[-0.64px]">{{ _rating_summary.avgRate | default: 0 }}<span class="text-[13px] text-[#9d9d9d] font-normal">/5</span></p>
|
||||
<p class="text-[13px] font-inter">{{ page.product_info.comment.summary.total | default: 0 }} khách hài lòng</p>
|
||||
<p class="text-[32px] font-extrabold font-inter tracking-[-0.64px]">{{ _rating_summary.avgRate | default: 0
|
||||
}}<span class="text-[13px] text-[#9d9d9d] font-normal">/5</span></p>
|
||||
<p class="text-[13px] font-inter">{{ page.product_info.comment.summary.total | default: 0 }} khách hài lòng
|
||||
</p>
|
||||
<p class="text-[13px] text-[#9d9d9d] font-inter">{{ _rating_summary.total | default: 0 }} đánh giá</p>
|
||||
</div>
|
||||
<div class="w-[315px] flex flex-col gap-2 text-[13px]">
|
||||
<div class="star-row"><span>5</span><span>★</span><div class="star-bar"><span style="width:0%"></span></div><span>0%</span></div>
|
||||
<div class="star-row"><span>4</span><span>★</span><div class="star-bar"><span style="width:0%"></span></div><span>0%</span></div>
|
||||
<div class="star-row"><span>3</span><span>★</span><div class="star-bar"><span style="width:0%"></span></div><span>0%</span></div>
|
||||
<div class="star-row"><span>2</span><span>★</span><div class="star-bar"><span style="width:0%"></span></div><span>0%</span></div>
|
||||
<div class="star-row"><span>1</span><span>★</span><div class="star-bar"><span style="width:0%"></span></div><span>0%</span></div>
|
||||
<div class="star-row"><span>5</span><span>★</span>
|
||||
<div class="star-bar"><span style="width:0%"></span></div><span>0%</span>
|
||||
</div>
|
||||
<div class="star-row"><span>4</span><span>★</span>
|
||||
<div class="star-bar"><span style="width:0%"></span></div><span>0%</span>
|
||||
</div>
|
||||
<div class="star-row"><span>3</span><span>★</span>
|
||||
<div class="star-bar"><span style="width:0%"></span></div><span>0%</span>
|
||||
</div>
|
||||
<div class="star-row"><span>2</span><span>★</span>
|
||||
<div class="star-bar"><span style="width:0%"></span></div><span>0%</span>
|
||||
</div>
|
||||
<div class="star-row"><span>1</span><span>★</span>
|
||||
<div class="star-bar"><span style="width:0%"></span></div><span>0%</span>
|
||||
</div>
|
||||
</div>
|
||||
<img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}" class="w-20 h-20 rounded-[4px] object-cover" onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
||||
<img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}" class="w-20 h-20 rounded-[4px] object-cover" onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
||||
<img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}" class="w-20 h-20 rounded-[4px] object-cover" onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
||||
<img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}"
|
||||
class="w-20 h-20 rounded-[4px] object-cover" onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
||||
<img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}"
|
||||
class="w-20 h-20 rounded-[4px] object-cover" onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
||||
<img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}"
|
||||
class="w-20 h-20 rounded-[4px] object-cover" onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
||||
</div>
|
||||
|
||||
<div class="w-[754px] grid gap-2 text-[13px] tracking-[-0.26px]">
|
||||
<div class="w-full grid gap-2 text-[13px] tracking-[-0.26px]">
|
||||
<div class="flex items-center gap-1">
|
||||
<p class="font-bold">MIQ</p>
|
||||
<span class="text-[#35b327]">●</span>
|
||||
<p class="text-[#35b327] font-medium">Thông tin đánh giá đang được cập nhật</p>
|
||||
</div>
|
||||
<p>★★★★★ <span class="mx-2 text-[#9d9d9d]">|</span> Chưa có nội dung đánh giá hiển thị</p>
|
||||
<p>Khách hàng có thể để lại đánh giá sau khi mua hàng để hoàn thiện phần trải nghiệm thực tế cho sản phẩm này.</p>
|
||||
<p>Khách hàng có thể để lại đánh giá sau khi mua hàng để hoàn thiện phần trải nghiệm thực tế cho sản phẩm này.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="h-px bg-[#e8e8e8] w-[772px]"></div>
|
||||
<div class="h-px bg-[#e8e8e8] w-full"></div>
|
||||
|
||||
<div class="w-[754px] grid gap-2 text-[13px] tracking-[-0.26px]">
|
||||
<div class="w-full grid gap-2 text-[13px] tracking-[-0.26px]">
|
||||
<div class="flex items-center gap-1">
|
||||
<p class="font-bold">MIQ</p>
|
||||
<span class="text-[#35b327]">●</span>
|
||||
@@ -232,23 +364,144 @@
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-center gap-2">
|
||||
<button class="w-[231px] h-10 rounded-[4px] border border-[#8c8c8c] text-[#6b6b6b] text-[13px] font-medium">Xem {{ _rating_summary.total | default: 0 }} đánh giá</button>
|
||||
<button class="w-[231px] h-10 rounded-[4px] bg-[#0084ff] text-white text-[13px] font-medium">Viết đánh giá</button>
|
||||
<button
|
||||
class="w-[231px] h-10 rounded-[4px] border border-[#8c8c8c] text-[#6b6b6b] text-[13px] font-medium">Xem {{
|
||||
_rating_summary.total | default: 0 }} đánh giá</button>
|
||||
<button class="w-[231px] h-10 rounded-[4px] bg-[#0084ff] text-white text-[13px] font-medium">Viết đánh
|
||||
giá</button>
|
||||
</div>
|
||||
</div>
|
||||
{% endcomment %}
|
||||
|
||||
{% assign _rating_total = _rating_summary.total | default: 0 | plus: 0 %}
|
||||
{% assign _rating_avg = _rating_summary.avgRate | default: 0 %}
|
||||
{% assign _happy_total = page.product_info.comment.summary.total | default: _rating_total %}
|
||||
<div class="bg-white rounded-[12px] px-3 py-4 flex flex-col gap-5">
|
||||
<h3 class="text-[18px] font-semibold tracking-[-0.36px]">Đánh giá {{ _product.productName }}</h3>
|
||||
|
||||
<div class="flex items-center justify-center gap-5">
|
||||
<div class="w-[112px] flex flex-col items-center gap-1 shrink-0">
|
||||
<div class="flex items-center gap-[2px]">
|
||||
<span class="text-[#f9a000] text-[18px] leading-none">★</span>
|
||||
<p class="text-[32px] leading-none font-extrabold font-inter tracking-[-0.64px]">{{ _rating_avg }}</p>
|
||||
<p class="text-[13px] text-[#9d9d9d] font-inter">/5</p>
|
||||
</div>
|
||||
<p class="text-[13px] font-inter text-black">{{ _happy_total }} khách hài lòng</p>
|
||||
<p class="text-[13px] text-[#9d9d9d] font-inter">{{ _rating_total }} đánh giá</p>
|
||||
</div>
|
||||
|
||||
<div class="w-[315px] flex flex-col gap-2 text-[13px] shrink-0">
|
||||
{% assign _rating_keys = '5,4,3,2,1' | split: ',' %}
|
||||
{% for _star in _rating_keys %}
|
||||
{% assign _rate_point = _star | plus: 0 %}
|
||||
{% assign _rate_count = 0 %}
|
||||
{% if _rating_summary.list_rate.size > 0 %}
|
||||
{% for _rate in _rating_summary.list_rate %}
|
||||
{% assign _rate_key = _rate.rate | default: _rate.star | default: _rate.key | default: _rate.id | plus: 0 %}
|
||||
{% if _rate_key == _rate_point %}
|
||||
{% assign _rate_count = _rate.total | default: _rate.count | default: _rate.value | plus: 0 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% assign _rate_percent = 0 %}
|
||||
{% if _rating_total > 0 %}
|
||||
{% assign _rate_percent = _rate_count | times: 100.0 | divided_by: _rating_total %}
|
||||
{% endif %}
|
||||
<div class="star-row">
|
||||
<span class="text-[13px] font-medium">{{ _star }}</span>
|
||||
<span class="text-[#f9a000] text-[12px] leading-none">★</span>
|
||||
<div class="star-bar">
|
||||
<span
|
||||
style="width:{% if _rate_percent > 100 %}100{% elsif _rate_percent < 0 %}0{% else %}{{ _rate_percent }}{% endif %}%"></span>
|
||||
</div>
|
||||
<span class="text-[13px] font-medium tracking-[-0.26px]">
|
||||
{% if _rate_percent > 0 %}{{ _rate_percent | round: 1 }}%{% else %}0{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}"
|
||||
class="w-20 h-20 rounded-[4px] object-cover shrink-0"
|
||||
onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
||||
<img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}"
|
||||
class="w-20 h-20 rounded-[4px] object-cover shrink-0"
|
||||
onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
||||
<img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}"
|
||||
class="w-20 h-20 rounded-[4px] object-cover shrink-0"
|
||||
onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
||||
</div>
|
||||
|
||||
<div class="w-full grid gap-2 text-[13px] tracking-[-0.26px]">
|
||||
<div class="flex items-center gap-[6px]">
|
||||
<p class="font-bold">Nguyễn Lê Tuấn</p>
|
||||
<svg class="w-[15px] h-[15px] shrink-0" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||||
<circle cx="12" cy="12" r="9.5" stroke="#35b327" />
|
||||
<path d="M8.5 12.5L11 15L15.5 9.8" stroke="#35b327" stroke-width="1.5" stroke-linecap="round"
|
||||
stroke-linejoin="round" />
|
||||
</svg>
|
||||
<p class="text-[#35b327] font-medium">Đã mua tại MIQ</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-[#f9a000] text-[12px] leading-none tracking-[1px]">★★★★★</span>
|
||||
<span class="w-px h-[14px] bg-[#d5d5d5]"></span>
|
||||
<span class="text-[#df0000] text-[12px] leading-none">♥</span>
|
||||
<p class="font-medium">Sẽ giới thiệu cho bạn bè, người thân</p>
|
||||
</div>
|
||||
<p class="font-medium">Tủ lạnh có ngăn chứa rất rộng rãi để được nhiều thực phẩm, có app theo dõi rất tiện
|
||||
lợi,
|
||||
mua được ngay dịp sale giá rẻ, có dịp mình sẽ ủng hộ nữa</p>
|
||||
</div>
|
||||
|
||||
<div class="h-px bg-[#e8e8e8] w-full"></div>
|
||||
|
||||
<div class="w-full grid gap-2 text-[13px] tracking-[-0.26px]">
|
||||
<div class="flex items-center gap-[6px]">
|
||||
<p class="font-bold">Nguyễn Lê Tuấn</p>
|
||||
<svg class="w-[15px] h-[15px] shrink-0" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||||
<circle cx="12" cy="12" r="9.5" stroke="#35b327" />
|
||||
<path d="M8.5 12.5L11 15L15.5 9.8" stroke="#35b327" stroke-width="1.5" stroke-linecap="round"
|
||||
stroke-linejoin="round" />
|
||||
</svg>
|
||||
<p class="text-[#35b327] font-medium">Đã mua tại MIQ</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-[#f9a000] text-[12px] leading-none tracking-[1px]">★★★★★</span>
|
||||
<span class="w-px h-[14px] bg-[#d5d5d5]"></span>
|
||||
<span class="text-[#df0000] text-[12px] leading-none">♥</span>
|
||||
<p class="font-medium">Sẽ giới thiệu cho bạn bè, người thân</p>
|
||||
</div>
|
||||
<p class="font-medium">Tủ lạnh có ngăn chứa rất rộng rãi để được nhiều thực phẩm, có app theo dõi rất tiện
|
||||
lợi,
|
||||
mua được ngay dịp sale giá rẻ, có dịp mình sẽ ủng hộ nữa</p>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-center gap-2">
|
||||
<button
|
||||
class="w-[231px] h-10 rounded-[4px] border border-[#8c8c8c] text-[#6b6b6b] text-[13px] font-medium">Xem {{
|
||||
_rating_total }} đánh giá</button>
|
||||
<button class="w-[231px] h-10 rounded-[4px] bg-[#0084ff] text-white text-[13px] font-medium">Viết đánh
|
||||
giá</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<aside class="w-[392px] flex flex-col gap-3">
|
||||
<aside class="w-[392px] shrink-0 flex flex-col gap-3">
|
||||
<div class="bg-white rounded-[8px] px-3 py-[14px] flex flex-col gap-[11px]">
|
||||
<img src="{{ 'category_qc_lg.png' | asset_url }}" alt="" class="w-[367px] h-[144px] rounded-[8px] object-cover" />
|
||||
<img src="{{ 'category_qc_samsung.png' | asset_url }}" alt="" class="w-[367px] h-[144px] rounded-[8px] object-cover" />
|
||||
<img src="{{ 'category_qc_lg.png' | asset_url }}" alt="" class="w-full h-[144px] rounded-[8px] object-cover" />
|
||||
<img src="{{ 'category_qc_samsung.png' | asset_url }}" alt=""
|
||||
class="w-full h-[144px] rounded-[8px] object-cover" />
|
||||
<div class="flex items-center gap-2 flex-wrap">
|
||||
{% if _product.categoryInfo.size > 0 %}
|
||||
{% for _category in _product.categoryInfo limit:3 %}
|
||||
<a href="{{ _category.url }}" class="px-3 h-7 rounded-[4px] border {% if forloop.first %}border-[#50aaff] text-[#0084ff]{% else %}border-[#e8e8e8] text-black{% endif %} text-[13px] font-medium inline-flex items-center">{{ _category.name }}</a>
|
||||
<a href="{{ _category.url }}"
|
||||
class="px-3 h-7 rounded-[4px] border {% if forloop.first %}border-[#50aaff] text-[#0084ff]{% else %}border-[#e8e8e8] text-black{% endif %} text-[13px] font-medium inline-flex items-center">{{
|
||||
_category.name }}</a>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<span class="px-3 h-7 rounded-[4px] border border-[#50aaff] text-[#0084ff] text-[13px] font-medium inline-flex items-center">Sản phẩm</span>
|
||||
<span
|
||||
class="px-3 h-7 rounded-[4px] border border-[#50aaff] text-[#0084ff] text-[13px] font-medium inline-flex items-center">Sản
|
||||
phẩm</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -257,25 +510,79 @@
|
||||
<div class="bg-white rounded-[6px] p-[11px] flex flex-col gap-3">
|
||||
<p class="text-[13px] font-semibold tracking-[-0.26px]">Loại dịch vụ lắp đặt</p>
|
||||
{% if _product.addon.size > 0 %}
|
||||
<input type="hidden" id="selected-addon-id" value="{{ _product.addon[0].addon_id | default: '' }}">
|
||||
<div id="install-option-group" class="flex flex-col gap-2">
|
||||
{% for _addon in _product.addon limit:3 %}
|
||||
{% assign _addon_old_price = _addon.market_price | default: 0 | plus: 0 %}
|
||||
{% assign _addon_price = _addon.price | default: 0 | plus: 0 %}
|
||||
<div
|
||||
class="js-install-option relative rounded-[8px] border p-[11px] h-[65px] transition-all cursor-pointer {% if forloop.first %}border-[#e4057c] bg-[#fff6f6] is-selected{% else %}border-[#e2e2e2] bg-white{% endif %}"
|
||||
data-addon-id="{{ _addon.addon_id }}" role="radio" tabindex="0"
|
||||
aria-checked="{% if forloop.first %}true{% else %}false{% endif %}">
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<span
|
||||
class="js-install-radio w-3 h-3 rounded-full border {% if forloop.first %}border-[#a0045c]{% else %}border-[#a9a9a9]{% endif %} inline-flex items-center justify-center">
|
||||
<span
|
||||
class="js-install-radio-dot w-[5px] h-[5px] rounded-full bg-[#a0045c] {% unless forloop.first %}hidden{% endunless %}"></span>
|
||||
</span>
|
||||
<p class="text-[13px] font-semibold tracking-[-0.26px]">{{ _addon.title }}</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
{% if _addon_old_price > _addon_price and _addon_old_price > 0 %}
|
||||
<p class="text-[11px] text-[#868686] line-through">{{ _addon_old_price | format_number }}đ</p>
|
||||
{% endif %}
|
||||
{% if _addon_price > 0 %}
|
||||
<p class="text-[14px] font-bold text-[#e40000]">{{ _addon_price | format_number }}đ</p>
|
||||
{% else %}
|
||||
<p class="text-[14px] font-bold text-[#e40000]">Miễn phí</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 ps-5 mt-1">
|
||||
{% if forloop.first %}
|
||||
<svg class="w-3 h-3 shrink-0 text-[#35b327]" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||||
<circle cx="12" cy="12" r="9.5" stroke="currentColor" />
|
||||
<path d="M8.5 12.5L11 15L15.5 9.8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
|
||||
stroke-linejoin="round" />
|
||||
</svg>
|
||||
<p class="text-[12px]">Gói tiêu chuẩn</p>
|
||||
{% elsif forloop.index == 2 %}
|
||||
<span class="text-[#ff7300] text-[10px] leading-none font-semibold">VIP</span>
|
||||
<p class="text-[12px] text-[#ff7300]">Bảo hành 4 năm (2 năm chính hãng, 2 năm MIQ)</p>
|
||||
{% else %}
|
||||
<span class="text-[#ff7300] text-[10px] leading-none font-semibold">VIP</span>
|
||||
<p class="text-[12px] text-[#ff7300]">Tuỳ chọn dịch vụ đi kèm</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
<span
|
||||
class="js-install-selected-dot absolute left-[17px] bottom-[8px] w-[6px] h-[6px] rounded-full bg-[#90004b] {% unless forloop.first %}hidden{% endunless %}"></span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% comment %}
|
||||
{% for _addon in _product.addon limit:3 %}
|
||||
<div class="rounded-[8px] border {% if forloop.first %}border-[#e4057c] bg-[#fff6f6]{% else %}border-[#e2e2e2]{% endif %} p-[13px] grid grid-cols-2 gap-x-[12px] gap-y-2">
|
||||
<div
|
||||
class="rounded-[8px] border {% if forloop.first %}border-[#e4057c] bg-[#fff6f6]{% else %}border-[#e2e2e2]{% endif %} p-[13px] grid grid-cols-2 gap-x-[12px] gap-y-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-3 h-3 rounded-full border border-[#a9a9a9]"></span>
|
||||
<p class="text-[13px] font-semibold tracking-[-0.26px]">{{ _addon.title }}</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
{% if _addon.price > 0 %}
|
||||
<p class="text-[14px] font-bold text-[#e40000]">{{ _addon.price | number_format }}đ</p>
|
||||
<p class="text-[14px] font-bold text-[#e40000]">{{ _addon.price | format_number }}đ</p>
|
||||
{% else %}
|
||||
<p class="text-[14px] font-bold text-[#35b327]">Miễn phí</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="col-span-2 flex items-center gap-1 ps-5">
|
||||
<span class="text-[#35b327]">◉</span>
|
||||
<p class="text-[12px]">{% if forloop.first %}Gói tiêu chuẩn{% else %}Tuỳ chọn dịch vụ đi kèm{% endif %}</p>
|
||||
<p class="text-[12px]">{% if forloop.first %}Gói tiêu chuẩn{% else %}Tuỳ chọn dịch vụ đi kèm{% endif %}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endcomment %}
|
||||
{% else %}
|
||||
<div class="rounded-[8px] border border-[#e4057c] bg-[#fff6f6] p-[13px]">
|
||||
<p class="text-[13px] font-semibold tracking-[-0.26px]">Chưa có gói dịch vụ bổ sung</p>
|
||||
@@ -290,7 +597,9 @@
|
||||
<div class="p-[10px] flex flex-col gap-3">
|
||||
{% for _offer in _product.specialOffer.all limit:3 %}
|
||||
<p class="text-[13px] tracking-[-0.26px] flex items-start gap-2">
|
||||
<span class="inline-flex items-center justify-center w-4 h-4 rounded-full bg-[#a0045c] text-white text-[13px] shrink-0">{{ forloop.index }}</span>
|
||||
<span
|
||||
class="inline-flex items-center justify-center w-4 h-4 rounded-full bg-[#a0045c] text-white text-[13px] shrink-0">{{
|
||||
forloop.index }}</span>
|
||||
<span class="line-clamp-3">{{ _offer.title }}</span>
|
||||
</p>
|
||||
{% endfor %}
|
||||
@@ -309,7 +618,8 @@
|
||||
{% assign _gift_image = no_image_url %}
|
||||
{% endif %}
|
||||
<div class="w-[128px] h-12 rounded-[4px] border border-[#ebebeb] p-[6px] flex items-center gap-1">
|
||||
<img src="{{ _gift_image }}" alt="{{ _gift.title }}" class="w-9 h-9 rounded-[4px] object-cover" onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
||||
<img src="{{ _gift_image }}" alt="{{ _gift.title }}" class="w-9 h-9 rounded-[4px] object-cover"
|
||||
onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
||||
<p class="text-[10px] font-medium leading-[14px] line-clamp-2">{{ _gift.title }}</p>
|
||||
</div>
|
||||
{% endfor %}
|
||||
@@ -318,8 +628,30 @@
|
||||
|
||||
<div class="h-px bg-[#ececec]"></div>
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="w-[166px] h-12 rounded-[4px] border border-[#0084ff] text-[#0084ff] text-[25px] leading-4 pb-1">⍟<span class="block text-[13px] leading-4">Thêm vào giỏ</span></button>
|
||||
<button class="w-[166px] h-12 rounded-[4px] bg-[#fc7600] text-white text-[20px] font-semibold">Mua ngay</button>
|
||||
<button id="btn-add-to-cart" type="button" data-product-name="{{ _product.productName }}"
|
||||
data-product-image="{{ _product.productImage.small | default: _product.productImage.large | default: no_image_url }}"
|
||||
data-product-price="{% if _product.price > 0 %}{{ _product.price | format_number }}đ{% else %}Liên hệ{% endif %}"
|
||||
class="w-[166px] h-12 rounded-[4px] border border-[#0084ff] bg-white text-[#0084ff] flex flex-col items-center justify-center gap-1 shrink-0">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||||
<path
|
||||
d="M2.25 3.75H3.73C4.14 3.75 4.48 4.04 4.55 4.44L5.97 12.69C6.09 13.41 6.71 13.94 7.44 13.94H17.53C18.2 13.94 18.79 13.5 18.99 12.86L20.54 7.86C20.78 7.08 20.2 6.28 19.39 6.28H6.11"
|
||||
stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path
|
||||
d="M9.25 20.25C9.94 20.25 10.5 19.69 10.5 19C10.5 18.31 9.94 17.75 9.25 17.75C8.56 17.75 8 18.31 8 19C8 19.69 8.56 20.25 9.25 20.25Z"
|
||||
stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path
|
||||
d="M16.75 20.25C17.44 20.25 18 19.69 18 19C18 18.31 17.44 17.75 16.75 17.75C16.06 17.75 15.5 18.31 15.5 19C15.5 19.69 16.06 20.25 16.75 20.25Z"
|
||||
stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M12.25 8.25V11.75" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"
|
||||
stroke-linejoin="round" />
|
||||
<path d="M10.5 10H14" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"
|
||||
stroke-linejoin="round" />
|
||||
</svg>
|
||||
<span class="block text-[13px] leading-none tracking-[-0.26px]">Thêm vào giỏ</span>
|
||||
</button>
|
||||
<button id="btn-buy-now"
|
||||
class="w-[166px] h-12 rounded-[4px] bg-[#fc7600] text-white text-[13px] font-semibold tracking-[-0.26px] shrink-0">Mua
|
||||
ngay</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -327,25 +659,32 @@
|
||||
<div class="bg-white rounded-[8px] p-3 flex flex-col gap-2">
|
||||
<p class="text-[14px] font-semibold leading-6 tracking-[-0.28px]">Sản phẩm đã xem</p>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<a href="{{ _product.productUrl }}" class="h-[76px] rounded-[4px] border border-[#d9d9d9] p-2 flex items-center gap-2 no-underline">
|
||||
<img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}" class="w-[60px] h-[60px] rounded-[4px] object-cover" onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
||||
<a href="{{ _product.productUrl }}"
|
||||
class="h-[76px] rounded-[4px] border border-[#d9d9d9] p-2 flex items-center gap-2 no-underline">
|
||||
<img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}"
|
||||
class="w-[60px] h-[60px] rounded-[4px] object-cover"
|
||||
onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-[11px] leading-4 line-clamp-2 text-black">{{ _product.productName }}</p>
|
||||
{% if _product.price > 0 %}
|
||||
<p class="text-[13px] leading-6 font-semibold text-[#d90000]">{{ _product.price | number_format }}đ</p>
|
||||
<p class="text-[13px] leading-6 font-semibold text-[#d90000]">{{ _product.price | format_number }}đ</p>
|
||||
{% else %}
|
||||
<p class="text-[13px] leading-6 font-semibold text-[#d90000]">Liên hệ</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</a>
|
||||
<a href="{{ _product.productUrl }}" class="h-[76px] rounded-[4px] border border-[#d9d9d9] p-2 flex items-center gap-2 no-underline">
|
||||
<img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}" class="w-[60px] h-[60px] rounded-[4px] object-cover" onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
||||
<a href="{{ _product.productUrl }}"
|
||||
class="h-[76px] rounded-[4px] border border-[#d9d9d9] p-2 flex items-center gap-2 no-underline">
|
||||
<img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}"
|
||||
class="w-[60px] h-[60px] rounded-[4px] object-cover"
|
||||
onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-[11px] leading-4 line-clamp-2 text-black">{{ _product.productName }}</p>
|
||||
{% if _product.marketPrice > 0 %}
|
||||
<p class="text-[13px] leading-6 font-semibold text-[#d90000]">{{ _product.marketPrice | number_format }}đ</p>
|
||||
<p class="text-[13px] leading-6 font-semibold text-[#d90000]">{{ _product.marketPrice | format_number }}đ
|
||||
</p>
|
||||
{% elsif _product.price > 0 %}
|
||||
<p class="text-[13px] leading-6 font-semibold text-[#d90000]">{{ _product.price | number_format }}đ</p>
|
||||
<p class="text-[13px] leading-6 font-semibold text-[#d90000]">{{ _product.price | format_number }}đ</p>
|
||||
{% else %}
|
||||
<p class="text-[13px] leading-6 font-semibold text-[#d90000]">Liên hệ</p>
|
||||
{% endif %}
|
||||
@@ -356,76 +695,15 @@
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-[12px] h-[431px] overflow-hidden flex gap-3 px-3 py-4">
|
||||
<div class="flex flex-col gap-3 w-[885px] shrink-0 h-[399px]">
|
||||
<h2 class="text-[28px] font-bold text-black tracking-tight">TIN KHUYẾN MẠI</h2>
|
||||
<div class="flex gap-3 items-start">
|
||||
<div class="w-[481px] shrink-0">
|
||||
<div class="w-[481px] h-[300px] rounded-[4px] overflow-hidden">
|
||||
<img src="{{ 'article_main_image.png' | asset_url }}" alt="" class="w-full h-full object-cover" />
|
||||
</div>
|
||||
<p class="mt-2 text-[20px] font-bold text-black tracking-tight">Ngày hội ĐIỆN MÁY - SIÊU RẺ. Duy nhất 17h ngày 10/02 Cơ hội trúng Máy nước</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3 flex-1">
|
||||
<div class="flex gap-3 items-start">
|
||||
<img src="{{ 'article_thumb_1.png' | asset_url }}" alt="" class="w-[153px] h-[92px] rounded-[4px] object-cover shrink-0" />
|
||||
<p class="text-[14px] text-black tracking-tight overflow-hidden">Ngày hội ĐIỆN MÁY - SIÊU RẺ. Duy nhất 17h ngày 10/02 Cơ hội trúng Máy nước</p>
|
||||
</div>
|
||||
<div class="flex gap-3 items-start">
|
||||
<img src="{{ 'article_thumb_2.png' | asset_url }}" alt="" class="w-[153px] h-[92px] rounded-[4px] object-cover shrink-0" />
|
||||
<p class="text-[14px] text-black tracking-tight overflow-hidden">Ngày hội ĐIỆN MÁY - SIÊU RẺ. Duy nhất 17h ngày 10/02 Cơ hội trúng Máy nước</p>
|
||||
</div>
|
||||
<div class="flex gap-3 items-start">
|
||||
<img src="{{ 'article_thumb_3.png' | asset_url }}" alt="" class="w-[153px] h-[92px] rounded-[4px] object-cover shrink-0" />
|
||||
<p class="text-[14px] text-black tracking-tight overflow-hidden">Ngày hội ĐIỆN MÁY - SIÊU RẺ. Duy nhất 17h ngày 10/02 Cơ hội trúng Máy nước</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3 flex-1 h-[356px]">
|
||||
<h2 class="text-[28px] font-bold text-black tracking-tight">VIDEO REVIEW</h2>
|
||||
<div class="flex flex-col gap-3">
|
||||
<div class="w-full h-[159px] rounded-[4px] overflow-hidden relative">
|
||||
<img src="{{ 'video_main.png' | asset_url }}" alt="" class="w-full h-full object-cover" />
|
||||
<div class="absolute inset-0 bg-black/20 rounded-[4px]"></div>
|
||||
</div>
|
||||
<div class="flex gap-3 items-start">
|
||||
<div class="w-[107px] h-[64px] rounded-[4px] overflow-hidden relative shrink-0">
|
||||
<img src="{{ 'video_thumb_1.png' | asset_url }}" alt="" 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 overflow-hidden">Duy nhất 17h ngày 10/02 Cơ hội trúng Máy nước</p>
|
||||
</div>
|
||||
<div class="flex gap-3 items-start">
|
||||
<div class="w-[107px] h-[64px] rounded-[4px] overflow-hidden relative shrink-0">
|
||||
<img src="{{ 'video_thumb_2.png' | asset_url }}" alt="" 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 overflow-hidden">Duy nhất 17h ngày 10/02 Cơ hội trúng Máy nước</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-[12px] min-h-[231px] 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] min-h-[156px] overflow-hidden px-3 py-4 flex flex-wrap gap-5 text-[12px] text-black">
|
||||
<span>hút mùi hafele</span>
|
||||
<span>bếp từ cheft</span>
|
||||
<span>nồi cơm điện Tiger</span>
|
||||
<span>máy cạo râu Enchen</span>
|
||||
<span>mũ bảo hiểm</span>
|
||||
<span>nồi cơm điện Cuckoo</span>
|
||||
<span>iPhone 15</span>
|
||||
<span>chảo chống dính Elmich</span>
|
||||
<span>máy massage X5 Pro Omni</span>
|
||||
<span>điều hòa Samsung</span>
|
||||
<span>máy lọc nước Korihome Kangen K8</span>
|
||||
<span>tông đơ cắt tóc</span>
|
||||
<span>điều hoà Hisense</span>
|
||||
<span>Máy chạy bộ</span>
|
||||
<span>MacBook Air M4</span>
|
||||
<span>điều hòa Nagakawa</span>
|
||||
</div>
|
||||
<!-- Toast thêm vào giỏ -->
|
||||
<div id="cart-toast" class="fixed bottom-6 right-6 z-50 hidden transition-all">
|
||||
<div
|
||||
class="bg-[#35b327] text-white px-5 py-3 rounded-[8px] shadow-lg flex items-center gap-3 text-[14px] font-medium">
|
||||
<svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
Đã thêm sản phẩm vào giỏ hàng!
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user