Chi tiết sản phẩm

Các nội dung cơ bản của trang chi tiết sản phẩm

Trang chi tiết sản phẩm là trang chứa các thông tin chi tiết của sản phẩm như hình ảnh, thông tin về mô tả sản phẩm, chi tiết sản phẩm, các thuộc tính sản phẩm... và các thao tác mua bán sản phẩm. Trang sẽ giúp cho khách hàng có được cái nhìn cụ thể, rõ ràng nhất trước khi quyết định mua sản phẩm. Trang chi tiết sản phẩm sản phẩm của 1 website cơ bản thì sẽ bao gồm các nội dung sau:

Các thẻ meta

{% extends layout_layout %}
{% block meta %}
   {{ headTitle(product.name).setSeparator(' - ').setAutoEscape(false)|raw }}
    <meta name="keywords" content="{{ product.metaKeywords ?: product.name }}">
    <meta name="description" content="{{ product.metaDescription ?: product.name }}">
    <meta property="og:title" content="{{ product.metaTitle ?: product.name }}">
    <meta property="og:url" content="{{ product.canonicalLink }}">
    <meta property="og:image" content="{{ product.imageUri }}">
    <meta property="og:type" content="website">
    <link rel="canonical" href="{{ product.canonicalLink }}" />
{% endblock %}

Các thông tin về sản phẩm

  • Ả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 class="imglarge" data-srcset="{{ i.thumbnailUri }}"
                        media="(max-width: 767px)" srcset="{{ i.thumbnailUri }}">
                <source class="imgsmall" data-srcset="{{ i.thumbnailUri }}"
                        media="(min-width: 768px)" srcset="{{ i.thumbnailUri }}">
                <img class="img-loop lazyload" 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="req _colorSelect" column="{{ color.column }}">
                <span>Màu sắc</span>
                <div>
                    {% for attrValue in valuesColor %}
                       {% set arrColor = [] %}
                       {% set arrColor = arrColor|merge({ (color.column): attrValue.id }) %}
                       {% set img = getAttrValueImage(arrColor,false, {'return':'image','product':product}) %}
                       {% set pIdsAttrStr = getAttrValueImage(arrColor,true,{'product':product}) | json_encode() %}
                       {% set pIdsAttrStr = pIdsAttrStr | replace({'[': '', ']': ''}) %}
                        <a class="_pSelect {{ (numbCl == 1) ?'active':'' }}" data-psId="{{ pIdsAttrStr }}" data-id="{{ attrValue.id }}" data-src="{{ img }}">
                            {{ attrValue.name }}
                         </a>
                    {% endfor %}
                </div>
            </div>
        {% endif %}
    {% endif %}

    {% set size = variableAttributes['size'] %}
    {% if 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="p-line">
                <div>{{ translate('Kích cỡ') }}</div>
                <div class="req _sizeSelect" data-column="{{ size.column }}">
                   {% for attrValueC in valuesSize %}
                          <a data-id="{{ attrValueC.id }}" class="{{ ((numbS == 1) ? 'active' : '') }}">
                              {{ attrValueC.name }}
                           </a>
                    {% endfor %}
                   </div>
              </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 class="_quantityCart">
    <a class="_subtract" data-id="{{ product.id }}">
         <i class="fal fa-minus"></i>
    </a>
    <input class="_numberProduct" max="{{ product.available }}" min="1"
               type="number" value="1" psId="{{ product.id }}">
    <a class="_plus" data-id="{{ product.id }}">
          <i class="fal fa-plus"></i>
     </a>
</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) %}
    <a class="_addToCart" data-psid="{{ product.id }}">
           <i class="far fa-shopping-cart"></i>
        {{ translate('Sản phẩm tạm hết hàng') }}
    </a>
    <a class="_buyNow" data-psid="{{ product.id }}">
         {{ translate('Sản phẩm tạm hết hàng') }}
    </a>
{% else%}
     {% if (flag > 0) %}
         <a class="_addToCart" title="{{ translate('Vui lòng chọn màu sắc hoặc kích cỡ') }}!" data-ck="0" data-psid="{{ product.id }}" data-selId="{{ product.id }}" >
               <i class="far fa-shopping-cart"></i>
               {{ translate('Thêm vào giỏ hàng') }}
         </a>
         <a class="_buyNow" title="{{ translate('Vui lòng chọn màu sắc hoặc kích cỡ') }}!" data-ck="0" data-psid="{{ product.id }}" data-selId="{{ product.id }}" >
             {{ translate('Mua ngay') }}
         </a>
    {% else %}
         <a class="_addToCart" data-ck="1" data-psid="{{ product.id }}" data-selId="{{ product.id }}" >
             <i class="far fa-shopping-cart"></i>
            {{ translate('Thêm vào giỏ hàng') }}
         </a>
         <a class="_buyNow" data-ck="1" data-psid="{{ product.id }}" data-selId="{{ product.id }}" >
              {{ translate('Mua ngay') }}
         </a>
     {% endif %}
{% endif %}

  • Mô tả sản phẩm

Mô tả sản phẩm là phần mô tả ngắn của sản phẩm sẽ được thêm trong trang quản trị của khách hàng.

Mô tả sản phẩm được gọi ra như sau:

{{ product.description | raw }}

  • Chi tiết sản phẩm

Chi tiết sản phẩm là phần bài viết chi tiết của sản phẩm sẽ được thêm trong trang quản trị của khách hàng.

Chi tiết sản phẩm được gọi ra như sau:

{{ product.content| raw }}

  • Sản phẩm tương tự

Là những sản phẩm thuộc cùng 1 danh mục

{% set productRelated = searchProducts({'limit':5, 'categoryId':product.categoryId,'excludedIds': product.id}) %}

  • Sản phẩm đã xem

Là lịch sử những sản phẩm người dùng đã xem

{% set lastProduct = getHistory({'limit':5}) %}

Ví dụ box sản phẩm

{% set productRelated = searchProducts({'limit':5, 'categoryId':product.categoryId,'excludedIds': product.id}) %}
        {% if(productRelated is not empty) %}
        <div>
            {% for n in productRelated %}
                {% set priceDiscount = n.priceAfterDiscount %}
                {% set percent = n.calcDiscountPercent %}
                <div>
                    <a href="{{ n.viewLink }}">
                        <picture>
                            <source data-srcset="{{ n.thumbnailUri }}" media="(max-width: 767px)">
                            <source data-srcset="{{ n.thumbnailUri }}" media="(min-width: 768px)">
                            <img class="lazyload"
                                 src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"
                                 alt="{{ n.name | raw }}"/>
                        </picture>
                    </a>
                    {% if(percent > 0) %}
                        <div>- {{percent }}%</div>
                    {% endif %}
                    <a href="{{ n.viewLink }}">{{ n.name | raw }}</a>
                    <div>
                        {% if p.priceAfterDiscount > 0 %}
                        <p>{{ p.priceAfterDiscount | number_format(0) }}₫
                        <del>{{ p.price | number_format(0) }}₫</del></p>
                        {% elseif (p.oldPrice > 0) %}
                            <p>{{ p.price | number_format(0) }}₫
                            <del>{{ p.oldPrice | number_format(0) }}₫</del></p>
                        {% else %}
                            <span>{{ p.price | number_format(0) }}₫</span>
                        {% endif %}
                    </div>
                </div>
            {% endfor %}
        </div>
    {% endif %}

  • Đánh giá sản phẩm

Là những đánh giá của người dùng về sản phẩm đấy (sao + bình luận + tên người bình luận ...).

Lấy trung bình đánh giá của người dùng (Đã làm tròn lên).

{% set rateprd = getSummaryRating({'itemId':product.id}).rate %}

Lấy số lượt đánh giá

{% set rating = countRating({'itemId':product.id,'type':1}) %}

Lấy ra các comment đánh giá

{% set rate = getProductRates({'productId':product.id}) %}
PreviousDanh mục sản phẩmNextTag

Last updated