Mini Cart

Giỏ hàng nhỏ trên header

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>