# Mini Cart

## Giới thiệu

Load ra danh sách sản phẩm đã thêm vào giỏ hàng để hiện popup trên header\\

## Cách tạo 1 popup giỏ hàng

#### B1: Tạo 1 file có tên mini\_cart trong thư mục other

#### B2: Thêm class để chứa block show ra danh sách giỏ hàng ở header khi có sự hiện hover hoặc thêm sp

* Khi thêm 1 sp vào giỏ hàng hoặc hover vào icon giỏ hàng ở header thì sẽ tự động show list đó

```
{% set quantity = serviceCart().totalQuantities %}

<div class="_miniCart" title="{{ translate('Giỏ hàng') }}">
    <a href="/cart" class="icon">
        <i class="fa-light fa-bag-shopping"></i>
    </a>
    <div class="quantity _totalQuantity">
        {{ quantity }}
    </div>
</div>
```

#### B4: Xử lý content trong file mini\_cart

```
{% set quantity = serviceCart().totalQuantities %}
<a href="/cart" class="icon">
    <i class="fa-light fa-bag-shopping"></i>
</a>
<div class="quantity _totalQuantity">
    {{ quantity }}
</div>
{% set products = serviceCart().productList %}
{% set totalCartMoney = serviceCart().totalMoney %}
<div class="box-cart">
    <div class="top-cart ">
        {% if products is not empty %}
            <div class="list overflow-y-auto">
                {% for p in products %}
                    {% set price = p.price %}
                    {% if p.priceAfterDiscount > 0 %}
                        {% set price = p.priceAfterDiscount %}
                    {% endif %}
                    {% set textUnit = '' %}
                    {% if p.productUnit %}
                        {% set textUnit = '(' ~ p.productUnit.name ~ ')' %}
                    {% endif %}
                    <div class="item-top-cart d-flex align-items-start">
                        <a href="{{ p.viewLink }}"
                           class="d-block overflow-hidden img">
                           <img loading="lazy"
                                    class="w-100 h-100 object-fit-contain"
                                    src="{{ p.thumbnailUri }}" alt="{{ p.name }}"></a>
                        <div class="info position-relative">
                            <a href="{{ p.viewLink }}"
                               class="w-100 fw-medium">{{ p.name }}</a>
                            <div class="_removeCart"
                                 data-id="{{ p.id }}"><i
                                        class="fa-light fa-circle-xmark"></i></div>
                            <span class="d-block w-100">{{ textUnit }}</span>
                            <div class="quantity-price w-100 d-flex align-items-center justify-content-between">
                                <div class="quantity-pro d-flex align-items-stretch justify-content-center">
                                    <button class="_subtract"
                                            data-id="{{ p.id }}">
                                        -
                                    </button>
                                    <input aria-label="quantity"
                                           class="_productQtt_{{ p.id }} text-center"
                                           data-id="{{ p.id }}"
                                           data-max="{{ p.inventory.available }}"
                                           value="{{ p.quantity }}">
                                    <button class="_plus"
                                            data-id="{{ p.id }}">
                                        +
                                    </button>
                                </div>
                                <div class="price fw-medium">
                                    {{ price | number_format(0, ',', '.') }}₫
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
            <div class="total">
                <div class="d-flex justify-content-between">
                    <p class="fw-medium">{{ translate('Tổng tiền') }}</p>
                    <p class="price fw-semibold">
                        {% if domainShowPrice() == 'Liên hệ' %}
                            {{ translate('Liên hệ') }}
                        {% else %}
                            {{ totalCartMoney | number_format(0, ',', '.') }}₫
                        {% endif %}
                    </p>
                </div>
                <a href="/cart/checkout"
                   class="btn-payment text-uppercase d-flex align-items-center justify-content-center w-100 rounded-2">
                    {{ translate('Thanh toán') }}
                </a>
            </div>
        {% else %}
            <div class="cart-null w-100 d-flex align-items-center justify-content-center flex-column">
                <i class="far fa-shopping-cart"></i>
                <p class="text-nowrap text-center">{{ translate('Không có sản phẩm nào trong giỏ hàng của bạn') }}</p>
            </div>
        {% endif %}
    </div>
</div>
```

<figure><img src="/files/SlCkAd3NpBypYu2cmGpO" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://webdocs.nhanh.vn/page/trang-khac/loadview.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.