account/order-detail#

Chi tiết một đơn hàng.

• Tệp giao diện: account/order-detail.html
• Đường dẫn: /tai-khoan/don-hang/{orderId}
• Controller: App\Modules\Account\AccountController::orderDetailPage

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 account/order-detail.html của bộ giao diện mặc định. Chép về templates/<bộ giao diện của bạn>/account/order-detail.html rồi sửa theo ý muốn.

<div class="container page-content">
  <h1 class="page-title">Chi tiết đơn hàng</h1>
  <div class="account-layout">
    {% assign active_page = 'orders' %}
    {% include 'account/_sidebar' %}
    <div class="account-main">
      <section class="account-section order-info">
        <h2 class="account-section__title">Thông tin đơn hàng</h2>
        <div class="order-meta">
          <div class="order-meta__row">
            <span class="order-meta__label">Mã đơn:</span>
            <span class="order-meta__value">#{{ order.code | default: order.id }}</span>
          </div>
          <div class="order-meta__row">
            <span class="order-meta__label">Trạng thái:</span>
            <span class="order-meta__value">
              <span class="status-badge">{{ order.current_status }}</span>
            </span>
          </div>
          <div class="order-meta__row">
            <span class="order-meta__label">Ngày đặt:</span>
            <span class="order-meta__value">{{ order.created_at | date_vi }}</span>
          </div>
          <div class="order-meta__row">
            <span class="order-meta__label">Tổng tiền:</span>
            <span class="order-meta__value order-total">{{ order.total_amount | money }}</span>
          </div>
        </div>
      </section>

      {% if order.shipping_address %}
      <section class="account-section order-shipping">
        <h2 class="account-section__title">Địa chỉ giao hàng</h2>
        <div class="shipping-address">
          <p class="address-name">{{ order.shipping_address.first_name }} {{ order.shipping_address.last_name }}</p>
          <p class="address-line">{{ order.shipping_address.address1 }}</p>
          {% if order.shipping_address.address2 %}
            <p class="address-line">{{ order.shipping_address.address2 }}</p>
          {% endif %}
          <p class="address-line">
            {{ order.shipping_address.city }}{% if order.shipping_address.province %}, {{ order.shipping_address.province }}{% endif %}
          </p>
          {% if order.shipping_address.phone %}
            <p class="address-line">{{ order.shipping_address.phone }}</p>
          {% endif %}
        </div>
      </section>
      {% endif %}

      {% if order.items %}
      <section class="account-section order-items">
        <h2 class="account-section__title">Sản phẩm</h2>
        <table class="order-items-table">
          <thead>
            <tr>
              <th>Sản phẩm</th>
              <th>Số lượng</th>
              <th>Đơn giá</th>
              <th>Thành tiền</th>
            </tr>
          </thead>
          <tbody>
            {% for item in order.items %}
            <tr>
              <td class="order-item__name">
                {{ item.product_name }}
                {% if item.variant_title %}
                  <small class="order-item__variant">{{ item.variant_title }}</small>
                {% endif %}
              </td>
              <td class="order-item__qty">{{ item.quantity }}</td>
              <td class="order-item__price">{{ item.unit_price | money }}</td>
              <td class="order-item__subtotal">{{ item.subtotal | money }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </section>
      {% endif %}

      <div class="order-detail__back">
        <a href="/tai-khoan/don-hang" class="btn btn--secondary">← Quay lại danh sách đơn hàng</a>
      </div>
    </div>
  </div>
</div>