home/index#

Trang chủ của cửa hàng.

• Tệp giao diện: home/index.html
• Đường dẫn: /
• Controller: App\Modules\Home\HomeController::homePage

Ngoài những biến dưới đây, slot này còn nhận toàn bộ biến toàn cục.

Biến của trang#

Mã đầy đủ#

Toàn bộ tệp home/index.html của bộ giao diện mặc định. Chép về templates/<bộ giao diện của bạn>/home/index.html rồi sửa theo ý muốn.

{% if banners['hero'] %}
<section class="hero-banners">
  <div class="container">
    {% for banner in banners['hero'] %}
      <a href="{{ banner.target_url | default: '#' }}" class="hero-banner">
        {% if banner.file_type == 'video' %}
          <iframe src="{{ banner.file_url }}" frameborder="0" allowfullscreen
                  class="hero-banner__video"></iframe>
        {% else %}
          <img src="{{ banner.file_url }}" alt="{{ banner.title }}"
               class="hero-banner__img" loading="lazy">
        {% endif %}
      </a>
    {% endfor %}
  </div>
</section>
{% else %}
<section class="hero">
  <div class="container hero__inner">
    <h1 class="hero__title">Chào mừng đến {{ store.name }}</h1>
    <p class="hero__subtitle">Khám phá hàng ngàn sản phẩm chất lượng cao với giá tốt nhất</p>
    <a href="/san-pham" class="btn btn--primary btn--lg">Mua sắm ngay</a>
  </div>
</section>
{% endif %}

{% if settings.show_flash_sale != false and flash_deals.size > 0 %}
<section class="section section--flash">
  <div class="container">
    <div class="section__head flash-strip__head">
      <h2 class="section__title">⚡ Flash Sale</h2>
      {% if flash_sales.size > 0 and flash_sales[0].ends_at %}
        <span class="flash-strip__countdown" data-flash-ends="{{ flash_sales[0].ends_at }}">
          Kết thúc sau <strong class="flash-countdown-value">--:--:--</strong>
        </span>
      {% endif %}
      <a href="/flash-sale" class="section__more">Xem tất cả →</a>
    </div>
    <div class="flash-strip">
      {% for product in flash_deals %}
        <div class="product-card product-card--flash flash-strip__item">
          {% if product.url %}<a href="{{ product.url }}" class="product-card__img-link">{% else %}<span class="product-card__img-link">{% endif %}
            {% if product.cover_image_url %}
              <img src="{{ product.cover_image_url }}" alt="{{ product.title }}" class="product-card__img" loading="lazy">
            {% else %}
              <div class="product-card__img-placeholder"></div>
            {% endif %}
            <span class="product-card__badge product-card__badge--flash">⚡</span>
          {% if product.url %}</a>{% else %}</span>{% endif %}
          <div class="product-card__body">
            {% if product.url %}
              <a href="{{ product.url }}" class="product-card__name">{{ product.title }}</a>
            {% else %}
              <span class="product-card__name">{{ product.title }}</span>
            {% endif %}
            <div class="product-card__price">
              <span class="price price--flash">{{ product.flash.deal_price | money }}</span>
              <span class="price price--original">{{ product.price | money }}</span>
            </div>
            {% if product.flash.remaining %}
              <div class="product-card__remaining">Còn {{ product.flash.remaining }} suất</div>
            {% endif %}
          </div>
        </div>
      {% endfor %}
    </div>
  </div>
</section>
<script>
(function () {
  function pad(n){ return String(n).padStart(2,'0'); }
  function tick(){
    var now = Date.now();
    document.querySelectorAll('.section--flash [data-flash-ends]').forEach(function(el){
      var raw = el.getAttribute('data-flash-ends'); if(!raw) return;
      var diff = Math.floor((Date.parse(raw.replace(' ','T')+'Z') - now)/1000);
      var out = el.querySelector('.flash-countdown-value'); if(!out) return;
      if(diff<=0){ out.textContent='00:00:00'; return; }
      out.textContent = pad(Math.floor(diff/3600))+':'+pad(Math.floor((diff%3600)/60))+':'+pad(diff%60);
    });
  }
  tick(); setInterval(tick, 1000);
})();
</script>
{% endif %}

{% if banners['featured_slider'] %}
<section class="section section--banners">
  <div class="container">
    <div class="banner-slider">
      {% for banner in banners['featured_slider'] %}
        <a href="{{ banner.target_url | default: '#' }}" class="banner-slide">
          <img src="{{ banner.file_url }}" alt="{{ banner.title }}"
               class="banner-slide__img" loading="lazy">
        </a>
      {% endfor %}
    </div>
  </div>
</section>
{% endif %}

{% if featured_categories.size > 0 %}
<section class="section">
  <div class="container">
    <h2 class="section__title">Danh mục nổi bật</h2>
    <div class="category-grid">
      {% for cat in featured_categories %}
      {% if cat.url %}<a href="{{ cat.url }}" class="category-card">{% else %}<span class="category-card">{% endif %}
        {% if cat.cover_image_url %}
          <img src="{{ cat.cover_image_url }}" alt="{{ cat.title }}" class="category-card__img" loading="lazy">
        {% else %}
          <div class="category-card__placeholder"></div>
        {% endif %}
        <span class="category-card__name">{{ cat.title }}</span>
      {% if cat.url %}</a>{% else %}</span>{% endif %}
      {% endfor %}
    </div>
  </div>
</section>
{% endif %}

<section class="section">
  <div class="container">
    <h2 class="section__title">Sản phẩm mới nhất</h2>
    {% if featured_products.size > 0 %}
      <div class="product-grid" style="--cols: {{ settings.product_grid_columns | default: 4 }}">
        {% for product in featured_products %}
          {% include 'components/product_item' %}
        {% endfor %}
      </div>
      <div class="section__more">
        <a href="/san-pham" class="btn btn--outline">Xem tất cả sản phẩm</a>
      </div>
    {% else %}
      <p class="empty-state">Chưa có sản phẩm nào.</p>
    {% endif %}
  </div>
</section>

{% if settings.show_recent_articles != false and recent_articles.size > 0 %}
<section class="section section--articles">
  <div class="container">
    <h2 class="section__title">Tin tức & Bài viết</h2>
    <div class="article-grid">
      {% for article in recent_articles %}
      {% if article.url %}<a href="{{ article.url }}" class="article-card">{% else %}<span class="article-card">{% endif %}
        {% if article.thumbnail_url %}
          <img src="{{ article.thumbnail_url }}" alt="{{ article.title }}"
               class="article-card__img" loading="lazy">
        {% endif %}
        <div class="article-card__body">
          <h3 class="article-card__title">{{ article.title }}</h3>
          {% if article.summary %}
            <p class="article-card__summary">{{ article.summary }}</p>
          {% endif %}
          <span class="article-card__date">{{ article.published_at }}</span>
        </div>
      {% if article.url %}</a>{% else %}</span>{% endif %}
      {% endfor %}
    </div>
    <div class="section__more">
      <a href="/bai-viet" class="btn btn--outline">Xem tất cả bài viết</a>
    </div>
  </div>
</section>
{% endif %}