Trang chủ

Giới thiệu

Trang chủ hay còn gọi là “Homepage” là trang đầu tiên khi người dùng truy cập vào website của bạn. Đây là trang web mặc định khi bạn truy cập vào địa chỉ website thì chỉ chứa tên miền đó.

Mục đích của trang chủ trên website là giúp điều hướng người dùng đến các trang khác bằng cách nhấp vào các liên kết hay các danh mục trên trang chủ hoặc gõ vào thanh tìm kiếm trên trang. Từ đó, bạn sẽ được chuyển hướng đến các trang đích.

Trang chủ của 1 website cơ bản thì sẽ bao gồm các nội dung sau:

Thẻ meta trang chủ

Thẻ Meta là các đoạn văn bản mô tả nội dung của trang, các thẻ này không xuất hiện trên chính trang mà chỉ xuất hiện trong phần mã nguồn của trang. Về cơ bản chúng giúp cho các công cụ tìm kiếm hiểu rõ hơn về nội dung của một trang web, do vậy rất tốt cho SEO.

Dưới đây là cách thức lấy thẻ meta trang chủ của website:

{% block meta %}
    {{ headTitle('Trang chủ').setSeparator(' - ').setAutoEscape(false)|raw }}
    <meta name="keywords" content="Trang chủ">
    <meta name="description" content="Trang chủ">
    <link rel="canonical" href="{{ getCurrentUrl(true) }}" />
    <meta property="og:url" content="{{ getCurrentUrl(true) }}">
    <meta property="og:image" content="{{ getBusinessLogo() }}">
    <meta property="og:type" content="website">
    <meta property="og:title" content="Trang chủ">
{% endblock %}

Banner trang chủ

Banner website có thể hiểu là những ô vuông trên đó có slogan, logo, ký hiệu và các thông điệp được đặt trên những vị trí bắt mắt của một website, giúp thu hút lượng người truy cập qua đó vào website để nâng cao doanh số bán hàng.

Dưới đây là cách thức lấy banner trang chủ của website:

{% set banner_home = getBannerByPositionCode('BANNER_HOME') %}
{% if(banner_home is not empty) %}
     {% for c in banner_home %}
        {{ c.viewLink }}
        {{ c.imageSrc }}
        {{ c.target }}
        {{ c.name }}
        {{ c.intro }}
        {{ c.description }}
    {% endfor %}
{% endif %}

Trong đó BANNER_HOME là mã vị trí của banner (có thể thay đổi tên tùy theo vị trí cũng như chức năng của từng banner) sẽ được tạo trong trang quản trị website.

Banner trang chủ

Banner danh mục sản phẩm

Để người dùng có thể chuyển hướng đến các danh mục sản phẩm mình thích được nhanh chóng hơn.

Dưới đây là cách thức lấy banner danh mục sản phẩm của website:

{% set category = getCategories() %}
{% if category is not empty %}
    {% for c in category %}
        {{ c.viewLink }}
        {{ c.name }}
        {{ c.imageUri }}
    {% endfor %}
{% endif%}

Ảnh đại diện danh mục sản phẩm

Sản phẩm mới

{% set newProduct = searchProducts({'limit':8,'showNew':1}) %}
{% if newProduct is not empty %}
      {% for np in newProduct %}
         {{ np.thumbnailUri }}
         {{ np.viewLink }}
         {{ np.name}}
         // Lấy thuộc tính cho sản phẩm
         {% set values = np.options.attrValues %}
         {% if(values is not empty) %}
           {% for v in values %}
                {% set color = v.options.attrContent %}
                {{ v.thumbnailUri }}
                {{ v.name }}
           {% endfor %}
         {% endif %}
         
         {% if(np.calcDiscountPercent > 0) %}
                {{ h.calcDiscountPercent }}%
         {% endif %}   
         {% if np.priceAfterDiscount > 0 %}
              {{ np.priceAfterDiscount | number_format(0) }}₫
              {{ np.price | number_format(0) }}₫
         {% elseif (np.oldPrice > 0) %}
                {{ np.price | number_format(0) }}₫
                {{ np.oldPrice | number_format(0) }}₫
         {% else %}
                 {{ np.price | number_format(0) }}₫
         {% endif %}
      {% endfor %}
    {% endif %}

Những sản phẩm được tích sản phẩm mới sẽ hiển thị tại đây

Sản phẩm mới

Sản phẩm hot

{% set hotProduct = searchProducts({'limit':8,'showHot':1}) %}
{% if hotProduct is not empty %}
      {% for hp in hotProduct %}
         {{ hp.thumbnailUri }}
         {{ hp.viewLink }}
         {{ hp.name}}
         // Lấy thuộc tính cho sản phẩm
         {% set values = hp.options.attrValues %}
         {% if(values is not empty) %}
           {% for v in values %}
                {% set color = v.options.attrContent %}
                {{ v.thumbnailUri }}
                {{ v.name }}
           {% endfor %}
         {% endif %}
         
         {% if(hp.calcDiscountPercent > 0) %}
                {{ hp.calcDiscountPercent }}%
         {% endif %}   
         {% if hp.priceAfterDiscount > 0 %}
              {{ hp.priceAfterDiscount | number_format(0) }}₫
              {{ hp.price | number_format(0) }}₫
         {% elseif (hp.oldPrice > 0) %}
                {{ hp.price | number_format(0) }}₫
                {{ hp.oldPrice | number_format(0) }}₫
         {% else %}
                 {{ hp.price | number_format(0) }}₫
         {% endif %}
      {% endfor %}
    {% endif %}

Những sản phẩm được tích sản phẩm hot sẽ hiển thị tại đây

Sản phẩm hot

Sản phẩm trang chủ

{% set homeProduct = searchProducts({'limit':8,'showHome':1}) %}
{% if homeProduct is not empty %}
      {% for n in homeProduct %}
         {{ n.thumbnailUri }}
         {{ n.viewLink }}
         {{ n.name}}
         // Lấy thuộc tính cho sản phẩm
         {% set values = n.options.attrValues %}
         {% if(values is not empty) %}
           {% for v in values %}
                {% set color = v.options.attrContent %}
                {{ v.thumbnailUri }}
                {{ v.name }}
           {% endfor %}
         {% endif %}
         
         {% if(n.calcDiscountPercent > 0) %}
                {{ n.calcDiscountPercent }}%
         {% endif %}   
         {% if n.priceAfterDiscount > 0 %}
              {{ n.priceAfterDiscount | number_format(0) }}₫
              {{ n.price | number_format(0) }}₫
         {% elseif (n.oldPrice > 0) %}
                {{ n.price | number_format(0) }}₫
                {{ n.oldPrice | number_format(0) }}₫
         {% else %}
                 {{ n.price | number_format(0) }}₫
         {% endif %}
      {% endfor %}
    {% endif %}

Những sản phẩm được tích trang chủ sẽ hiển thị tại đây

Sản phẩm được tick trang chủ

Sản phẩm giảm giá

{% set discountProduct = searchProducts({'limit':8,'discount':1}) %}
{% if discountProduct is not empty %}
      {% for ds in discountProduct %}
         {{ ds.thumbnailUri }}
         {{ ds.viewLink }}
         {{ ds.name}}
         // Lấy thuộc tính cho sản phẩm
         {% set values = ds.options.attrValues %}
         {% if(values is not empty) %}
           {% for v in values %}
                {% set color = v.options.attrContent %}
                {{ v.thumbnailUri }}
                {{ v.name }}
           {% endfor %}
         {% endif %}
         
         {% if(ds.calcDiscountPercent > 0) %}
                {{ ds.calcDiscountPercent }}%
         {% endif %}   
         {% if ds.priceAfterDiscount > 0 %}
              {{ ds.priceAfterDiscount | number_format(0) }}₫
              {{ ds.price | number_format(0) }}₫
         {% elseif (ds.oldPrice > 0) %}
                {{ ds.price | number_format(0) }}₫
                {{ ds.oldPrice | number_format(0) }}₫
         {% else %}
                 {{ ds.price | number_format(0) }}₫
         {% endif %}
      {% endfor %}
    {% endif %}

Những sản phẩm được nhập giá mới và giá cũ sẽ hiển thị tại đây

Ví dụ một block hoàn chỉnh lấy sản phẩm:

{% set newProduct = searchProducts({'limit':8,'showNew':1}) %}
{% if newProduct is not empty %}
      {% for nw in newProduct %}
         {{ nw.thumbnailUri }}
         {{ nw.viewLink }}
         {{ nw.name}}
         // Lấy thuộc tính cho sản phẩm
         {% set values = nw.options.attrValues %}
         {% if(values is not empty) %}
           {% for v in values %}
                {% set color = v.options.attrContent %}
                {{ v.thumbnailUri }}
                {{ v.name }}
           {% endfor %}
         {% endif %}
         
         {% if(nw.calcDiscountPercent > 0) %}
                {{ nw.calcDiscountPercent }}%
         {% endif %}   
         {% if nw.priceAfterDiscount > 0 %}
              {{ nw.priceAfterDiscount | number_format(0) }}₫
              {{ nw.price | number_format(0) }}₫
         {% elseif (nw.oldPrice > 0) %}
                {{ nw.price | number_format(0) }}₫
                {{ nw.oldPrice | number_format(0) }}₫
         {% else %}
                 {{ nw.price | number_format(0) }}₫
         {% endif %}
      {% endfor %}
    {% endif %}

Tạo nút yêu thích cho sản phẩm

<div class="_addWishList" data-id="{{ productId }}">
    <i class="fa-thin fa-heart"></i>
</div>

Nút yêu thích và thuộc tính màu sắc của sản phẩm

Banner bộ sưu tập

Là nơi để chuyển hướng nhanh đến bộ sưu tập sản phẩm mà người dùng yêu thích

Dưới đây là cách thức lấy banner bộ sưu tập của website:

{% set albumHome = searchAlbum({'limit': 1}) %}
    {% if(albumHome is not null or albumHome is not empty) %}
        {% for a in albumHome %}
           {{ a.name }}
           {{ a.description |raw }}   
           {{ a.viewLink }}
           {{ a.thumbnailUri }}   
           {% set albumItems = getAlbumItems(a.id,{'limit': 4}) %}
           {% if(albumItems is not null or albumItems is not empty) %}
                {% for b in albumItems %}
                    {{ a.viewLink }}
                    {{ b.imageUri }} 
                    {{ b.description | striptags }}
                {% endfor %}
           {% endif %}
        {% endfor %}
    {% endif %}

Bộ sưu tập

Tin tức

Luôn cập nhật những tin tức mới nhất lên trang web của bạn

Dưới đây là cách thức lấy tin tức của website:

{% set lastestNews= getHotNews({'limit':5}) %}
{% if(lastestNews is not empty) %}
    {% for i in lastestNews %}
        {{ i.viewLink }}
        {{ i.imageUri }}
        {{ i.title  | striptags }}
        {{ i.intro | striptags  }}
        {{ i.createdDateTime }}
    {% endfor %}
{% endif %}

Tin tức