Implement Phase 6 & 7: My Account and Order Details templates (Bootstrap 5, HPOS)

Phase 6 - My Account (15 templates):
- Account layout with sidebar navigation (list-group) and content area
- Orders table with status badges, pagination, and responsive design
- View order with order notes as list-group items
- Address cards with edit/add buttons
- Login/Register side-by-side card layout
- Account edit, password change, downloads, payment methods forms
- Lost/reset password forms and confirmation

Phase 7 - Order Details (5 templates):
- Order details table with items, totals, and customer note
- Line item rows with refund quantity display
- Customer billing/shipping address cards
- Order tracking form
- Order again button

All order templates use WC_Order object methods only (HPOS compatible).
Bootstrap 5 components: cards, tables, list-groups, badges, forms, alerts.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-28 10:43:30 +01:00
parent 594d810439
commit 8b1793097c
22 changed files with 1377 additions and 20 deletions

View File

@@ -0,0 +1,169 @@
{#
# My Account Login / Register Form (Bootstrap 5 Override)
#
# Login and optional registration form for the My Account page.
# This is distinct from global/form-login.html.twig (inline checkout login).
#
# WooCommerce PHP equivalent: myaccount/form-login.php
#
# @package WcBootstrap
# @since 0.1.0
#}
{{ do_action('woocommerce_before_customer_login_form') }}
{% set registration_enabled = get_option('woocommerce_enable_myaccount_registration') == 'yes' %}
<div class="row g-4" id="customer_login">
<div class="{{ registration_enabled ? 'col-lg-6' : 'col-12' }}">
<div class="card h-100">
<div class="card-header">
<h2 class="h5 mb-0">{{ __('Login') }}</h2>
</div>
<div class="card-body">
<form class="woocommerce-form woocommerce-form-login login" method="post" novalidate>
{{ do_action('woocommerce_login_form_start') }}
<div class="mb-3">
<label for="username" class="form-label">
{{ __('Username or email address') }}&nbsp;<span class="text-danger" aria-hidden="true">*</span>
<span class="visually-hidden">{{ __('Required') }}</span>
</label>
<input type="text"
class="form-control"
name="username"
id="username"
autocomplete="username"
required
aria-required="true" />
</div>
<div class="mb-3">
<label for="password" class="form-label">
{{ __('Password') }}&nbsp;<span class="text-danger" aria-hidden="true">*</span>
<span class="visually-hidden">{{ __('Required') }}</span>
</label>
<input type="password"
class="form-control"
name="password"
id="password"
autocomplete="current-password"
required
aria-required="true" />
</div>
{{ do_action('woocommerce_login_form') }}
<div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-3">
<div class="form-check">
<input class="form-check-input"
type="checkbox"
name="rememberme"
id="rememberme"
value="forever" />
<label class="form-check-label" for="rememberme">
{{ __('Remember me') }}
</label>
</div>
{{ wp_nonce_field('woocommerce-login', 'woocommerce-login-nonce') }}
<button type="submit"
class="btn btn-primary"
name="login"
value="{{ __('Log in') }}">
{{ __('Log in') }}
</button>
</div>
<p class="mb-0">
<a href="{{ wp_lostpassword_url()|esc_url }}">{{ __('Lost your password?') }}</a>
</p>
{{ do_action('woocommerce_login_form_end') }}
</form>
</div>
</div>
</div>
{% if registration_enabled %}
<div class="col-lg-6">
<div class="card h-100">
<div class="card-header">
<h2 class="h5 mb-0">{{ __('Register') }}</h2>
</div>
<div class="card-body">
<form method="post" class="woocommerce-form woocommerce-form-register register" {{ do_action('woocommerce_register_form_tag') }}>
{{ do_action('woocommerce_register_form_start') }}
{% if get_option('woocommerce_registration_generate_username') == 'no' %}
<div class="mb-3">
<label for="reg_username" class="form-label">
{{ __('Username') }}&nbsp;<span class="text-danger" aria-hidden="true">*</span>
<span class="visually-hidden">{{ __('Required') }}</span>
</label>
<input type="text"
class="form-control"
name="username"
id="reg_username"
autocomplete="username"
required
aria-required="true" />
</div>
{% endif %}
<div class="mb-3">
<label for="reg_email" class="form-label">
{{ __('Email address') }}&nbsp;<span class="text-danger" aria-hidden="true">*</span>
<span class="visually-hidden">{{ __('Required') }}</span>
</label>
<input type="email"
class="form-control"
name="email"
id="reg_email"
autocomplete="email"
required
aria-required="true" />
</div>
{% if get_option('woocommerce_registration_generate_password') == 'no' %}
<div class="mb-3">
<label for="reg_password" class="form-label">
{{ __('Password') }}&nbsp;<span class="text-danger" aria-hidden="true">*</span>
<span class="visually-hidden">{{ __('Required') }}</span>
</label>
<input type="password"
class="form-control"
name="password"
id="reg_password"
autocomplete="new-password"
required
aria-required="true" />
</div>
{% else %}
<p class="text-body-secondary mb-3">{{ __('A link to set a new password will be sent to your email address.') }}</p>
{% endif %}
{{ do_action('woocommerce_register_form') }}
<div class="mt-3">
{{ wp_nonce_field('woocommerce-register', 'woocommerce-register-nonce') }}
<button type="submit"
class="btn btn-primary"
name="register"
value="{{ __('Register') }}">
{{ __('Register') }}
</button>
</div>
{{ do_action('woocommerce_register_form_end') }}
</form>
</div>
</div>
</div>
{% endif %}
</div>
{{ do_action('woocommerce_after_customer_login_form') }}