You've already forked wc-bootstrap
magdev
7034134678
Redesign navigation with endpoint icons, offcanvas-lg responsive pattern, and sticky sidebar. Replace flat dashboard with card-based welcome greeting (avatar) and quick-action grid. Wrap all forms (edit-account, edit-address, lost/reset-password) in card sections with icon headers. Restructure view-order with summary card and status badge component. Override WooCommerce's float-based layout and max-width constraint to let Bootstrap flex grid handle sizing. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
68 lines
2.8 KiB
Twig
68 lines
2.8 KiB
Twig
{#
|
|
# My Account Dashboard (Bootstrap 5 Override)
|
|
#
|
|
# Shows a card-based dashboard with welcome greeting and
|
|
# quick action links to each account section.
|
|
#
|
|
# Expected context:
|
|
# current_user - WP_User object
|
|
#
|
|
# WooCommerce PHP equivalent: myaccount/dashboard.php
|
|
#
|
|
# @package WcBootstrap
|
|
# @since 0.1.0
|
|
#}
|
|
|
|
{% set quick_actions = [
|
|
{ endpoint: 'orders', icon: 'bi-bag', label: __('Orders'), desc: __('View and track your orders') },
|
|
{ endpoint: 'edit-address', icon: 'bi-geo-alt', label: __('Addresses'), desc: __('Manage billing & shipping') },
|
|
{ endpoint: 'edit-account', icon: 'bi-person-gear', label: __('Account details'), desc: __('Update name, email & password') },
|
|
{ endpoint: 'downloads', icon: 'bi-download', label: __('Downloads'), desc: __('Access purchased files') },
|
|
{ endpoint: 'payment-methods', icon: 'bi-credit-card', label: __('Payment methods'), desc: __('Manage saved cards') },
|
|
] %}
|
|
|
|
<div class="card shadow-sm mb-4">
|
|
<div class="card-body d-flex align-items-center gap-3">
|
|
<div class="flex-shrink-0">
|
|
{{ get_avatar(current_user.ID, 64)|raw }}
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
<h2 class="h5 mb-1">
|
|
{{ __('Hello, %s!')|format(current_user.display_name|esc_html) }}
|
|
</h2>
|
|
<p class="text-body-secondary mb-0">
|
|
{{ __('Not %s?')|format(current_user.display_name|esc_html) }}
|
|
<a href="{{ wc_logout_url()|esc_url }}">{{ __('Log out') }}</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-3 mb-4">
|
|
{% for action in quick_actions %}
|
|
<div class="col">
|
|
<a href="{{ wc_get_endpoint_url(action.endpoint)|esc_url }}"
|
|
class="card h-100 text-decoration-none shadow-sm">
|
|
<div class="card-body d-flex align-items-start gap-3">
|
|
<div class="flex-shrink-0">
|
|
<span class="d-inline-flex align-items-center justify-content-center
|
|
bg-primary-subtle text-primary rounded-3"
|
|
style="width: 3rem; height: 3rem;"
|
|
aria-hidden="true">
|
|
<i class="bi {{ action.icon }} fs-4"></i>
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<h3 class="h6 mb-1 text-body">{{ action.label }}</h3>
|
|
<p class="text-body-secondary small mb-0">{{ action.desc }}</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
{{ do_action('woocommerce_account_dashboard') }}
|
|
{{ do_action('woocommerce_before_my_account') }}
|
|
{{ do_action('woocommerce_after_my_account') }}
|