Quickview

Giới thiệu

Dùng để xem mà mua nhanh chóng các sản phẩm

Cách gọi 1 quickview

B1: Thêm 1 block modal của quickview dạng html ở footer

<div class="modal fade" id="_quickViewModal" tabindex="-1" aria-labelledby="_quickViewModalLabel" >
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
        </div>
    </div>
</div>

B2: Tạo 1 file có tên quickview ở trong folder other

B3: Xử lý click hiện quickview

{% set product = searchProducts({'limit':10}) %}
    {% if product is not empty %}
        {% for p in product %}
            <div class="_productItem col-lg-3 col-12" data-id="{{ p.id }}" data-type="{{ p.typeId }}">
                <div class="img">
                    <a class="d-block" href="{{ p.viewLink }}" title="{{ p.name }}">
                        <img loading="lazy" src="{{ p.imageUri }}" alt="{{ p.name }}">
                    </a>
                    <a title="{{ p.name }}" data-id="{{ p.id }}" data-bs-toggle="modal"
                       data-bs-target="#_quickViewModal"
                       class="_quickView">{{ translate('Xem nhanh') }}
                    </a>
                </div>
            </div>
        {% endfor %}
    {% endif %}

B4: Thử click để chạy quickview

Tương tự như trang chi tiết sản phẩm, thì trang quickview cũng có những phần sau đây:

• Ảnh sản phẩm

Ảnh sản phẩm sẽ thường nằm ở vị trí đầu tiên của trang và sẽ được gọi ra như sau:

{% if (product.images) %}
    {% for i in product.images %}
        <a href="javascript:void(0)" data-attr="{{ i.thumbnailUri }}" class="image-frame" >
            <picture >
                <source data-srcset="{{ i.thumbnailUri }}">
                <img class="img-loop" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" alt="{{ product.name }}">
            </picture>
        </a>
    {% endfor %}
{% endif %}

• Tên sản phẩm

Tên sản phẩm sẽ được đặt trong thẻ h1 như sau:

<h1>{{ product.name }}</h1>

• Giá sản phẩm

Giá sản phẩm thường sẽ bao gồm giá mới, giá cũ và số phần trăm giảm giá (nếu có) của sản phẩm và sẽ được gọi ra như sau:

<div>
    <span>
        <strong>Giá:</strong>
    </span>
{% if (product.priceAfterDiscount > 0) %}
        <p>{{ product.priceAfterDiscount|number_format(0) }}đ</p>
        <del>{{product.price|number_format(0) }}đ</del>

    {% elseif (product.oldprice() > 0) %}
        <p>{{ product.price|number_format(0) }}đ</p>
        <del>{{ product.oldPrice|number_format(0) }}đ</del>
    {% else %}
        <p>{{ product.price|number_format(0) }}đ</p>
    {% endif %}
    {% if product.calcDiscountPercent > 0 %}
        <span>
            -{{ product.calcDiscountPercent}}%
        </span>
    {% endif %}

</div>

• Thuộc tính sản phẩm

Thuộc tính của sản phẩm sẽ gồm 2 thuộc tính chính là màu và size, sẽ được gọi ra như sau:

{% set variableAttributes = product.variableAttributes %}
<div class="swatch-wrapper">
    {% set color = variableAttributes['color'] %}
    {% set flag=0 %}
    {% if color is not null or color is not empty %}
        {% set valuesColor = color.childValues %}
        {% set numbC =  (valuesColor | length) %}
        {% if(valuesColor is not null and numbC>0) %}
            {% set flag = flag + 1 %}
            <div class="swatch-colo color req swatch" column="{{ color.column }}">
                <span>Màu sắc</span>
                <ul>
                    {% for val in valuesColor %}
                        {% set arrColor = [] %}
                        {% set arrColor = arrColor|merge({ (color.column): val.Id }) %}
                        {% set returnImg = {'return':'image'} %}
                        {% set img = product.attrValueImage(arrColor) %}
                        {% set pIdsAttrStr =  product.attrValueImage(arrColor,true) | json_encode() %}
                        {% set pIdsAttrStr = pIdsAttrStr | replace({'[': '', ']': ''}) %}
                        <li class="swatch-element available {{ (numbC==1) ? 'active' : '' }}"
                            title="{{ val.name }}" value="{{ val.id }}"
                            data-pIds="{{ pIdsAttrStr }}">
                            <label style="background: {{ '#' ~ val.content }}"></label>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        {% endif %}
    {% endif %}

    {% set size = variableAttributes['size'] %}
    {% if size is not null or size is not empty %}
        {% set valuesSize = size.childValues %}
        {% set numbS =  (valuesSize | length) %}
        {% if(valuesSize is not null and numbS>0) %}
            {% set flag = flag + 1 %}
            <div class="swatch req size swatch-size" column="{{ size.column }}">
                <span>Kích cỡ</span>
                <ul>
                    {% for attrValue in valuesSize %}
                        <li class="swatch-element available {{ (numbS==1)?'active':'' }}"
                            value="{{ attrValue.id }}">{{ attrValue.name }}</li>
                    {% endfor %}
                </ul>
            </div>
        {% endif %}
    {% endif %}

    {% if((flag==0) and (product.childs)) %}
        {% set flagchilds= product.childs|length %}
        <p>
            <span>Chọn sản phẩm</span>
            <select class=" childProducts">
                <option value="1">Chọn sản phẩm</option>
                {% set name_parent =product.name %}
                {% for cp in product.childs %}
                    <option value="{{ cp.id }}, {{ cp.price }}"
                            href="{{ cp.imageUri }}"
                            data-src="{{ cp.imageUri }}">
                        {{ cp.name|replace({ name_parent :''}) }}
                    </option>
                {% endfor %}
            </select>
        </p>
    {% endif %}

</div>

• Số lượng sản phẩm

Số lượng sản phẩm sẽ được tùy chỉnh theo ý muốn của khách hàng và sẽ thường gồm nút tăng, giảm, ô để nhập số lượng. Số lượng sản phẩm sẽ được gọi ra như sau:

<div>
    <div>
        <strong>Số lượng:</strong>
    </div>
    <div>
        <input class="minus" type="button" value="-">
        <input id="quantity"  aria-label="quantity" class="input-qty" max="{{ ivt }}" min="1"
               type="number" value="1" psId="{{ product.id }}">
        <input class="plus" type="button" value="+">
    </div>
</div>

• Nút thêm sản phẩm vào giỏ hàng và nút mua ngay

Nút thêm sản phẩm vào giỏ hàng và nút mua ngay sẽ được gọi ra như sau:

{% if (ivt <= 0) %}
        <button data-original-title="Sản phẩm tạm thời hết hàng!" selId="{{ product.id }}"
        psid="{{ product.id }}" disabled >TẠM HẾT HÀNG</button>
{% elseif (flag or flagchilds) %}
        <button data-original-title="Vui lòng chọn màu sắc hoặc kích cỡ!"
        selId="{{ product.id }}" psid="{{ product.id }}" ck="0">THÊM VÀO GIỎ HÀNG</button>
        <button data-original-title="Vui lòng chọn màu sắc hoặc kích cỡ!!"
        selId="{{ product.id }}" ck="0" psid="{{ product.id }}" >Mua ngay</button>
{% else %}
        <button selId="{{ product.id }}" psid="{{ product.id }}" ck="1">THÊM VÀO GIỎ HÀNG</button>
        <button selId="{{ product.id }}" ck="1" psid="{{ product.id }}" >Mua ngay</button>
{% endif %}