agent_test/template/product/category.html

{% assign no_image_url = 'no-image.png' | asset_url %}
<div class="w-[1200px] mx-auto flex flex-col gap-4 py-4">

    <!-- Breadcrumb -->
    <div class="flex items-center gap-2 text-[13px]">
        <a href="/" class="text-black cursor-pointer hover:text-[#e4057c]">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"></path>
        </svg>
        <span class="text-black font-medium">{{ page.current_category.name | strip }}</span>
    </div>

    <!-- Banner Sale -->
    <div class="relative w-full rounded-[12px] overflow-hidden" style="background:#6e0000; height:651px">
        <!-- Top banner image -->
        <div class="absolute top-0 left-0 w-full h-[187px] rounded-t-[12px] overflow-hidden">
            <img src="{{ 'category_banner_sale_top.png' | asset_url }}" alt=""
                class="w-full h-full object-cover rounded-t-[12px]" />
        </div>
        <!-- 5 sale product cards -->
        <div class="absolute bottom-[23px] left-[12px] right-[12px] flex gap-3">
            {% for _product in page.product_list limit:5 %}
            <a href="/product/detail?id={{ _product.productId }}"
                class="relative bg-white border border-[#dcdcdc] rounded-[8px] w-[226px] h-[426px] shrink-0 px-[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>

                <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>

                <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 | 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 %}
                    {% else %}
                    <p class="m-0 text-[18px] leading-none font-bold text-[#db0000] tracking-[-0.36px]">Liên hệ</p>
                    {% endif %}
                </div>
                {% if _product.marketPrice > 0 %}
                <p class="m-0 text-[12px] leading-none text-[#c5c5c5] tracking-[-0.24px] line-through">{{
                    _product.marketPrice | 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="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]" />
                        <span>{{ _product.rating }}</span>
                        <span class="w-[2px] h-[2px] rounded-full bg-[#707070]"></span>
                        <span>Đã bán {{ _product.reviewCount }}</span>
                    </div>
                    <button type="button"
                        class="w-6 h-6 rounded-full bg-[#c1c1c1] flex items-center justify-center shrink-0"
                        aria-label="Add to cart">
                        <img src="{{ 'icon_cart_circle.svg' | asset_url }}" alt="" class="w-4 h-4" />
                    </button>
                </div>
            </a>
            {% endfor %}
        </div>
    </div>

    <!-- Banner QC -->
    <div class="flex gap-3">
        <div class="w-[594px] h-[236px] rounded-[8px] overflow-hidden shrink-0">
            <img src="{{ 'category_qc_samsung.png' | asset_url }}" alt="" class="w-full h-full object-cover" />
        </div>
        <div class="w-[594px] h-[236px] rounded-[8px] overflow-hidden shrink-0">
            <img src="{{ 'category_qc_lg.png' | asset_url }}" alt="" class="w-full h-full object-cover" />
        </div>
    </div>

    <!-- Product List -->
    <div class="bg-white rounded-[12px] px-3 py-5 flex flex-col gap-4">
        <!-- Filter bar -->
        <div class="flex items-center gap-2">
            <!-- Filter button -->
            <button
                class="flex items-center gap-2 border border-[#dcdcdc] rounded-[8px] h-10 px-4 shrink-0 hover:bg-gray-50">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                    <path d="M2 5h16M5 10h10M8 15h4" stroke="#333" stroke-width="1.5" stroke-linecap="round" />
                </svg>
                <span class="text-[13px] text-black font-medium">Lọc</span>
            </button>
            <!-- Brand filter dropdown -->
            <button
                class="flex items-center gap-1 border border-[#dcdcdc] rounded-[8px] h-10 px-3 text-[13px] text-black hover:bg-gray-50">
                <svg width="10" height="10" viewBox="0 0 10 10">
                    <path d="M2 3.5l3 3 3-3" stroke="#333" stroke-width="1.2" stroke-linecap="round"
                        stroke-linejoin="round" />
                </svg>
                <span>Thương hiệu</span>
            </button>
            <!-- Price filter dropdown -->
            <button
                class="flex items-center gap-1 border border-[#dcdcdc] rounded-[8px] h-10 px-3 text-[13px] text-black hover:bg-gray-50">
                <svg width="10" height="10" viewBox="0 0 10 10">
                    <path d="M2 3.5l3 3 3-3" stroke="#333" stroke-width="1.2" stroke-linecap="round"
                        stroke-linejoin="round" />
                </svg>
                <span>Giá</span>
            </button>
            <!-- Attribute filter dropdowns -->
            {% for _attr in page.attribute_filter_list %}
            <button
                class="flex items-center gap-1 border border-[#dcdcdc] rounded-[8px] h-10 px-3 text-[13px] text-black hover:bg-gray-50">
                <svg width="10" height="10" viewBox="0 0 10 10">
                    <path d="M2 3.5l3 3 3-3" stroke="#333" stroke-width="1.2" stroke-linecap="round"
                        stroke-linejoin="round" />
                </svg>
                <span>{{ _attr.name }}</span>
            </button>
            {% endfor %}
        </div>
        <!-- Sort bar -->
        <div class="flex items-center gap-3 text-[13px]">
            <span class="text-[#707070]">Sắp xếp theo:</span>
            {% for _sort in page.sort_by_collection %}
            {% if forloop.first %}
            <span class="text-[#e4057c] font-medium cursor-pointer">{{ _sort.name }}</span>
            {% else %}
            <span class="text-[#c0c0c0]">·</span>
            <span class="text-black cursor-pointer hover:text-[#e4057c]">{{ _sort.name }}</span>
            {% endif %}
            {% endfor %}
        </div>
        <!-- Product count -->
        <div class="text-[13px] text-[#707070]">{{ page.product_count }} sản phẩm</div>
        <!-- Product grid -->
        <div class="grid grid-cols-5 gap-3">
            {% for _product in page.product_list %}
            <div
                class="relative bg-white border border-[#dcdcdc] rounded-[8px] p-[9px] pt-[10px] flex flex-col gap-[10px] h-full">
                <a href="/product/detail?id={{ _product.productId }}" class="block">
                    <img src="{{ _product.productImage.large }}" alt="{{ _product.productName }}"
                        class="w-full aspect-square rounded-[4px] object-cover"
                        onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
                </a>
                <div class="inline-flex w-fit h-5 items-center gap-1 rounded-full pl-1 pr-[10px] text-white text-[10px] font-medium tracking-[-0.2px]"
                    style="background:linear-gradient(89.82deg,#ff0000 2.38%,#cc0003 94.82%)">
                    <span class="w-4 h-4 rounded-full bg-white flex items-center justify-center overflow-hidden"><img
                            src="{{ 'icon_gift.png' | asset_url }}" alt=""
                            class="w-[11px] h-[11px] object-contain" /></span>
                    <span>{{ _product.label | strip | default: 'Sắm tết vô tư' }}</span>
                </div>
                {% if _product.price > 0 %}
                <div class="flex items-center gap-[6px]">
                    <p class="text-[18px] leading-none font-bold text-[#db0000] tracking-[-0.36px]">{{ _product.price |
                        format_number }} <span class="underline">đ</span></p>
                    {% assign _price_off = _product.price_off | strip %}
                    {% if _price_off != '' and _price_off != '0' %}
                    <span
                        class="min-w-[35px] h-4 px-[7px] rounded-full bg-[#ffeef0] text-[#dc0d28] text-[10px] leading-none font-medium tracking-[-0.2px] inline-flex items-center justify-center">-{{
                        _price_off }}%</span>
                    {% endif %}
                </div>
                {% if _product.marketPrice > 0 %}
                <p class="text-[12px] leading-none text-[#c5c5c5] tracking-[-0.24px] line-through">{{
                    _product.marketPrice | format_number }} đ</p>
                {% endif %}
                {% else %}
                <p class="text-[18px] leading-none font-bold text-[#db0000] tracking-[-0.36px]">Liên hệ</p>
                {% endif %}
                <a href="/product/detail?id={{ _product.productId }}"
                    class="h-[32px] overflow-hidden text-[13px] leading-[16px] font-bold tracking-[-0.26px] text-black hover:text-[#e4057c]">{{
                    _product.productName
                    }}</a>
                <div class="flex items-center gap-2">
                    <img src="{{ 'product_badge_1.png' | asset_url }}" alt="" class="w-8 h-8 rounded-full object-cover"
                        onerror="this.style.display='none'">
                    <img src="{{ 'product_badge_2.png' | asset_url }}" alt="" class="w-8 h-8 rounded-full object-cover"
                        onerror="this.style.display='none'">
                </div>
                <div
                    class="mt-auto flex items-center justify-between gap-[6px] 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>
            </div>
            {% endfor %}
        </div>
        <!-- Pagination -->
        <div class="flex justify-center mt-2">
            {{ page.paging.html }}
        </div>
    </div>

    <!-- Box Article + Video -->
    {% assign _articles = page.current_category.related['article-article'] %}
    {% assign _videos = page.current_category.related['article-video'] %}
    {% if _articles.size > 0 or _videos.size > 0 %}
    <div class="bg-white rounded-[12px] flex gap-3 px-3 py-4">
        {% if _articles.size > 0 %}
        <!-- Tin khuyến mãi -->
        <div class="flex flex-col gap-3 w-[885px] shrink-0">
            <h2 class="text-[28px] font-bold text-black tracking-tight">TIN KHUYẾN MÃI</h2>
            <div class="flex gap-3 items-start">
                {% assign _main_article = _articles[0] %}
                <div class="w-[481px] shrink-0">
                    <a href="{{ _main_article.url }}" class="block w-[481px] h-[300px] rounded-[4px] overflow-hidden">
                        <img src="{{ _main_article.image.large }}" alt="{{ _main_article.title }}"
                            class="w-full h-full object-cover" />
                    </a>
                    <p class="mt-2 text-[20px] font-bold text-black tracking-tight">{{ _main_article.title }}</p>
                </div>
                <div class="flex flex-col gap-3 flex-1">
                    {% for _article in _articles offset:1 limit:3 %}
                    <a href="{{ _article.url }}" class="flex gap-3 items-start no-underline">
                        <img src="{{ _article.image.thum }}" alt="{{ _article.title }}"
                            class="w-[153px] h-[92px] rounded-[4px] object-cover shrink-0" />
                        <p class="text-[14px] text-black tracking-tight line-clamp-3">{{ _article.title }}</p>
                    </a>
                    {% endfor %}
                </div>
            </div>
        </div>
        {% endif %}
        {% if _videos.size > 0 %}
        <!-- Video Review -->
        <div class="flex flex-col gap-3 flex-1">
            <h2 class="text-[28px] font-bold text-black tracking-tight">VIDEO REVIEW</h2>
            <div class="flex flex-col gap-3">
                {% assign _main_video = _videos[0] %}
                <a href="{{ _main_video.url }}" class="block w-full h-[159px] rounded-[4px] overflow-hidden relative">
                    <img src="{{ _main_video.image.large }}" alt="{{ _main_video.title }}"
                        class="w-full h-full object-cover" />
                    <div class="absolute inset-0 bg-black/20 rounded-[4px]"></div>
                </a>
                {% for _video in _videos offset:1 limit:2 %}
                <a href="{{ _video.url }}" class="flex gap-3 items-start no-underline">
                    <div class="w-[107px] h-[64px] rounded-[4px] overflow-hidden relative shrink-0">
                        <img src="{{ _video.image.thum }}" alt="{{ _video.title }}"
                            class="w-full h-full object-cover" />
                        <div class="absolute inset-0 bg-black/20 rounded-[4px]"></div>
                    </div>
                    <p class="text-[14px] text-black tracking-tight line-clamp-3">{{ _video.title }}</p>
                </a>
                {% endfor %}
            </div>
        </div>
        {% endif %}
    </div>
    {% endif %}

    <!-- Key Search -->
    {% if page.current_category.tags.size > 0 %}
    <div class="bg-white rounded-[12px] flex flex-col gap-3 px-3 py-4">
        <h2 class="text-[24px] font-bold text-black tracking-tight">Mọi người cũng tìm kiếm</h2>
        <div class="bg-[#f3f4f7] rounded-[12px] px-3 py-5 flex flex-wrap gap-5 text-[12px] text-black">
            {% for _tag in page.current_category.tags %}
            <a href="{{ _tag.url }}" class="text-black hover:text-[#e4057c]">{{ _tag.name }}</a>
            {% endfor %}
        </div>
    </div>
    {% endif %}
</div>