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,75 @@
{#
# Order Details Customer (Bootstrap 5 Override)
#
# Displays billing and shipping addresses for a completed order.
# HPOS compatible: uses WC_Order methods only.
#
# Expected context:
# order - WC_Order object
#
# WooCommerce PHP equivalent: order/order-details-customer.php
#
# @package WcBootstrap
# @since 0.1.0
#}
{% set show_shipping = not wc_ship_to_billing_address_only() and order.needs_shipping_address() %}
<section class="woocommerce-customer-details mt-4">
<div class="row g-4">
<div class="{{ show_shipping ? 'col-md-6' : 'col-12' }}">
<div class="card h-100">
<div class="card-header">
<h3 class="h6 mb-0">{{ __('Billing address') }}</h3>
</div>
<div class="card-body">
<address class="mb-0">
{{ order.get_formatted_billing_address(__('N/A'))|wp_kses_post }}
{% if order.get_billing_phone() %}
<p class="woocommerce-customer-details--phone mt-2 mb-0">
<i class="bi bi-telephone me-1" aria-hidden="true"></i>
{{ order.get_billing_phone()|esc_html }}
</p>
{% endif %}
{% if order.get_billing_email() %}
<p class="woocommerce-customer-details--email mt-1 mb-0">
<i class="bi bi-envelope me-1" aria-hidden="true"></i>
{{ order.get_billing_email()|esc_html }}
</p>
{% endif %}
{{ do_action('woocommerce_order_details_after_customer_address', 'billing', order) }}
</address>
</div>
</div>
</div>
{% if show_shipping %}
<div class="col-md-6">
<div class="card h-100">
<div class="card-header">
<h3 class="h6 mb-0">{{ __('Shipping address') }}</h3>
</div>
<div class="card-body">
<address class="mb-0">
{{ order.get_formatted_shipping_address(__('N/A'))|wp_kses_post }}
{% if order.get_shipping_phone() %}
<p class="woocommerce-customer-details--phone mt-2 mb-0">
<i class="bi bi-telephone me-1" aria-hidden="true"></i>
{{ order.get_shipping_phone()|esc_html }}
</p>
{% endif %}
{{ do_action('woocommerce_order_details_after_customer_address', 'shipping', order) }}
</address>
</div>
</div>
</div>
{% endif %}
</div>
{{ do_action('woocommerce_order_details_after_customer_details', order) }}
</section>