Header

Các nội dung cơ bản của Header

Header là phần trên cùng (đỉnh) của trang web. Nó là khu vực giới thiệu về trang web, nơi mọi người nhìn thấy đầu tiên trước khi tìm hiểu sâu hơn. Header được xem như “lời mời gọi” với nhiệm vụ cung cấp thông tin cốt lõi về sản phẩm, website để người dùng có thể nắm bắt thông tin chỉ trong vài giây. Header của 1 website cơ bản thì sẽ bao gồm các nội dung sau:

Logo

Logo là một nhân tố quan trọng để thể hiện được bản sắc của doanh nghiệp và giúp xây dựng thương hiệu. Dưới đây là các thức lấy logo của website

<img src="{{ getBusinessLogo() }}" alt="logo">

Logo của doanh nghiệp

Home link

Home link là thành phần cơ bản của website đóng vai trò quan trọng vì đây chính là đường dẫn liên kết đến trang chủ. Khi nhấn vào link này thì bạn sẽ được chuyển đến trang chủ của website.

Danh mục này có thể sẽ được thực hiện bằng hai cách:

• Được gắn trực tiếp vào biểu tượng logo của website.

• Gắn vào một đoạn chữ mà người dùng dễ nhìn thấy. Ví dụ: “Home”, “Trang chủ”.

Search box ( Hộp tìm kiếm )

Search box là thành phần cơ bản của website giúp người truy cập dùng để tìm kiếm thông tin họ muốn một cách nhanh chóng.

  <form action="/search" id="_searchForm">
     <button type="submit"><i class="fal fa-search"></i></button>
      <input aria-label="tìm kiếm" type="text" placeholder="Tìm kiếm" name="q">
 </form>

• Khung search autocomplete

Thêm đoạn code này bên trong thẻ form

<div class="_searchFolding"></div>

Là thanh gợi ý sản phẩm liên quan đến từ khóa tìm kiếm

Tìm kiếm sản phẩm và thanh gợi ý tìm kiếm

Thanh menu điều hướng

Danh mục thanh menu điều hướng là khu vực tập hợp các link dẫn đến các trang mục khác của website, bao gồm các kiểu menu (danh mục sản phẩm, tin tức, album). Danh mục menu điều hướng này sẽ chia ra làm 2 loại danh mục menu:

Danh mục menu theo dạng mặc định

• Danh mục sản phẩm

{% set categories = getCategories() %}
{% if(categories is not empty) %}
    // Danh mục cấp 1
    {% for c in categories %}
       	<a href="{{c.viewLink}}" title="{{c.name}}">{{c.name}}</a>
       	{% if(c.childs) is not empty %}
            // Danh mục cấp 2
           {% for child in c.childs %}
               <a href="{{child.viewLink}}" title="{{child.name}}">{{child.name}}</a>
           {% endfor %}
       	{% endif %}
    {% endfor %}
{% endif %}

Danh mục sản phẩm

• Danh mục tin tức

{% set newsCategory = getNewsCategories() %}
{% if(newsCategory is not empty) %}
    // Danh mục cấp 1
    {% for c in categories %}
       	<a href="{{c.viewLink}}" title="{{c.name}}">{{c.name}}</a>
       	{% if(c.childs) is not empty %}
            // Danh mục cấp 2
           {% for child in c.childs %}
               <a href="{{child.viewLink}}" title="{{child.name}}">{{child.name}}</a>
           {% endfor %}
       	{% endif %}
    {% endfor %}
{% endif %}

Danh mục tin tức

• Danh mục album

{% set albumCategory = getAlbumCategories() %}
{% if(albumCategory is not empty) %}
    {% for album in albumCategory %}
       	<a href="{{album.viewLink}}" title="{{album.name}}">{{album.name}}</a>       	
    {% endfor %}
{% endif %}

Danh mục album

Danh mục menu tự tạo

{% set menuCustom = getMenus({'type':'header'}) %}
{% if(menuCustom is not empty) %}
    {% for m in menuCustom %}
        {% set arrTypeCate =  m.typeCates %}
        {% set category = getCategoryTypeMenu(m.type) %}
        {% if m.type in arrTypeCate %} // danh mục menu tự tạo khi thêm danh mục có sẵn
           {% if(category is not empty) %}
               {% for c in category %}
                  <a href="{{c.viewLink}}" title="{{c.name}}">{{c.name}}</a>
               {% endfor %}
           {% endif %}
        {% else %}  // Danh mục menu tự tạo khi tạo mới danh mục menu
         <a href="{{m.viewLink}}" title="{{m.name}}">{{m.name}}</a>
        {% endif %}
    {% endfor %}
{% endif %}

Giỏ hàng

Giỏ hàng là thành phần cơ bản của website bán hàng, khi bạn để ý các danh mục website sẽ thấy một biểu tượng chiếc giỏ hàng được đặt ở phía trên góc phải website. Giỏ hàng có thể hiển thị các thông tin như: số sản phẩm bạn đã chọn, tổng số tiền bạn phải trả. Lúc nhấn vào biểu tượng giỏ hàng, người dùng sẽ di chuyển đến giỏ hàng để kiểm tra chi tiết các sản phẩm đã lựa chọn để mua.

• Lấy ra số lượng sản phẩm trong giỏ hàng

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

• Lấy ra tổng tiền của đơn hàng

{% set totalCartMoney = serviceCart().totalMoney %}

• Lấy ra danh sách sản phẩm trong giỏ hàng

{% set products = serviceCart().productList %}
{% if(products is not empty) %}
    {% for p in products %}
    {% set priceDiscount = p.priceAfterDiscount %}
        <a href="{{p.viewLink}}">
            <img src="{{p.thumbnailUri}}" alt="{{p.name}}">
          {% if (p.price == 0 || p.contactPrice is not null) %}
             <p>Liên hệ</p>
          {% elseif (priceDiscount > 0) %}
              <p>{{ priceDiscount|number_format(0) }}<span> đ</span></p>
          {% elseif (p.oldprice > 0) %}
              <p>{{ p.price|number_format(0) }}<span> đ</span></p>
          {% else %}
               <p>{{ p.price|number_format(0) }}<span> đ</span></p>
          {% endif %}
        </a>    
    {% endfor %}
{% endif %}

Danh sách sản phẩm - Số lượng - Đơn giá - Tổng tiền

Ngôn ngữ

Module này cho phép chuyển đổi ngôn ngữ website thành ngôn ngữ mà người dùng truy cập có thể hiểu được. Điều này góp phần không nhỏ hỗ trợ các doanh nghiệp vượt qua rào cản ngôn ngữ để kinh doanh quốc tế, tiến tới mở rộng thị trường cũng như tiếp cận với khách hàng nước ngoài hiệu quả hơn.

• Liệt kê ra danh sách ngôn ngữ khi cài đặt trên hệ thống

{{ getTranslate() | raw }}

• Dịch text đang fix cứng (Còn các text được load tự động ra web thì sẽ vào hệ thống để cài đặt tự dịch)

{{translate('Tìm kiếm')}}

Ngôn ngữ