account/addresses#

Sổ địa chỉ giao hàng của khách.

• Tệp giao diện: account/addresses.html
• Đường dẫn: /tai-khoan/dia-chi
• Controller: App\Modules\Account\AccountController::addressesPage

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

<div class="container page-content">
  <h1 class="page-title">Địa chỉ giao hàng</h1>
  <div class="account-layout">
    {% assign active_page = 'addresses' %}
    {% include 'account/_sidebar' %}
    <div class="account-main">
      {% if success_message %}
        <div class="alert alert--success">{{ success_message }}</div>
      {% endif %}
      {% if error_message %}
        <div class="alert alert--error">{{ error_message }}</div>
      {% endif %}

      <section class="account-section">
        <h2 class="account-section__title">Địa chỉ đã lưu</h2>
        {% if addresses.size > 0 %}
          <div class="address-list">
            {% for addr in addresses %}
            <div class="address-card{% if addr.is_default %} address-card--default{% endif %}">
              {% if addr.is_default %}
                <span class="address-default-badge">Mặc định</span>
              {% endif %}
              <p class="address-name">{{ addr.first_name }} {{ addr.last_name }}</p>
              <p class="address-line">{{ addr.address1 }}</p>
              {% if addr.address2 %}
                <p class="address-line">{{ addr.address2 }}</p>
              {% endif %}
              <p class="address-line">{{ addr.city }}{% if addr.province %}, {{ addr.province }}{% endif %}</p>
              <p class="address-line">{{ addr.country_code }}</p>
              {% if addr.phone %}
                <p class="address-line">{{ addr.phone }}</p>
              {% endif %}

              <div class="address-actions">
                {% unless addr.is_default %}
                <form action="/tai-khoan/dia-chi/{{ addr.id }}/mac-dinh" method="post" class="address-action-form">
                  <button type="submit" class="btn btn--secondary btn--sm">Đặt mặc định</button>
                </form>
                {% endunless %}
                <form action="/tai-khoan/dia-chi/{{ addr.id }}/xoa" method="post" class="address-action-form"
                      onsubmit="return confirm('Bạn có chắc muốn xóa địa chỉ này?')">
                  <button type="submit" class="btn btn--danger btn--sm">Xóa</button>
                </form>
              </div>
            </div>
            {% endfor %}
          </div>
        {% else %}
          <p class="empty-state">Bạn chưa có địa chỉ nào được lưu.</p>
        {% endif %}
      </section>

      <section class="account-section">
        <h2 class="account-section__title">Thêm địa chỉ mới</h2>
        <form action="/tai-khoan/dia-chi/them" method="post" class="account-form">
          <div style="position:absolute;left:-9999px;top:-9999px" aria-hidden="true">
            <label for="_hp">Leave this field empty</label>
            <input type="text" id="_hp" name="_hp" tabindex="-1" autocomplete="off">
          </div>

          <div class="form-row">
            <div class="form-group">
              <label for="addr_first_name">Họ *</label>
              <input type="text" id="addr_first_name" name="first_name" required class="form-input">
            </div>
            <div class="form-group">
              <label for="addr_last_name">Tên *</label>
              <input type="text" id="addr_last_name" name="last_name" required class="form-input">
            </div>
          </div>

          <div class="form-group">
            <label for="address1">Địa chỉ *</label>
            <input type="text" id="address1" name="address1" required class="form-input"
                   placeholder="Số nhà, tên đường">
          </div>

          <div class="form-group">
            <label for="address2">Địa chỉ bổ sung</label>
            <input type="text" id="address2" name="address2" class="form-input"
                   placeholder="Căn hộ, tòa nhà, phường/xã…">
          </div>

          <div class="form-row">
            <div class="form-group">
              <label for="city">Thành phố *</label>
              <input type="text" id="city" name="city" required class="form-input">
            </div>
            <div class="form-group">
              <label for="province">Tỉnh/Thành</label>
              <input type="text" id="province" name="province" class="form-input">
            </div>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label for="country_code">Quốc gia *</label>
              <input type="text" id="country_code" name="country_code" required class="form-input"
                     value="VN" maxlength="2">
            </div>
            <div class="form-group">
              <label for="addr_phone">Số điện thoại</label>
              <input type="tel" id="addr_phone" name="phone" class="form-input">
            </div>
          </div>

          <div class="form-group form-group--checkbox">
            <label class="checkbox-label">
              <input type="checkbox" name="is_default" value="1">
              Đặt làm địa chỉ mặc định
            </label>
          </div>

          <button type="submit" class="btn btn--primary">Thêm địa chỉ</button>
        </form>
      </section>
    </div>
  </div>
</div>