You've already forked wc-bootstrap
Implement Phase 9 & reusable components; skip Phase 8 (emails)
Phase 8 (Emails) skipped: WooCommerce email rendering uses wc_get_template_html() which bypasses the Twig pipeline entirely. Email customization deferred to plugins or block email editor. Phase 9 - Supplementary (7 templates): - Brand description with thumbnail, taxonomy archive delegate - Brands A-Z shortcode with alphabetical index navigation - Single brand thumbnail shortcode - REST API OAuth login and grant-access forms - Back-in-stock notification form with email input Reusable Components (6 templates): - price: product price display with sale handling - rating: star rating with Bootstrap Icons (filled/half/empty) - address-card: billing/shipping address card with edit link - status-badge: contextual order status badges - quantity-input: +/- input group widget - form-field: universal form field renderer (text/select/textarea/checkbox) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
54
PLAN.md
54
PLAN.md
@@ -624,45 +624,29 @@ Track completion per file. Mark with `[x]` when done.
|
||||
- [x] `order/form-tracking.html.twig`
|
||||
- [x] `order/order-again.html.twig`
|
||||
|
||||
### Phase 8 -- Emails
|
||||
### Phase 8 -- Emails (SKIPPED)
|
||||
|
||||
- [ ] `emails/email-header.html.twig`
|
||||
- [ ] `emails/email-footer.html.twig`
|
||||
- [ ] `emails/email-styles.html.twig`
|
||||
- [ ] `emails/email-order-details.html.twig`
|
||||
- [ ] `emails/email-order-items.html.twig`
|
||||
- [ ] `emails/email-customer-details.html.twig`
|
||||
- [ ] `emails/email-addresses.html.twig`
|
||||
- [ ] `emails/email-downloads.html.twig`
|
||||
- [ ] `emails/customer-processing-order.html.twig`
|
||||
- [ ] `emails/customer-completed-order.html.twig`
|
||||
- [ ] `emails/customer-on-hold-order.html.twig`
|
||||
- [ ] `emails/customer-new-account.html.twig`
|
||||
- [ ] `emails/customer-reset-password.html.twig`
|
||||
- [ ] `emails/customer-invoice.html.twig`
|
||||
- [ ] `emails/customer-note.html.twig`
|
||||
- [ ] `emails/customer-refunded-order.html.twig`
|
||||
- [ ] `emails/customer-cancelled-order.html.twig`
|
||||
- [ ] `emails/customer-failed-order.html.twig`
|
||||
- [ ] `emails/admin-new-order.html.twig`
|
||||
- [ ] `emails/admin-cancelled-order.html.twig`
|
||||
- [ ] `emails/admin-failed-order.html.twig`
|
||||
Skipped: WooCommerce email templates use `wc_get_template_html()` which bypasses
|
||||
the Twig rendering pipeline. Email overrides would require traditional PHP files
|
||||
in `woocommerce/emails/`, breaking the Twig-only pattern. Default WooCommerce
|
||||
email templates are sufficient; email customization can be handled via plugins
|
||||
(e.g., Kadence WooCommerce Email Designer) or the WooCommerce block email editor.
|
||||
|
||||
### Phase 9 -- Supplementary
|
||||
|
||||
- [ ] `brands/brand-description.html.twig`
|
||||
- [ ] `brands/taxonomy-product_brand.html.twig`
|
||||
- [ ] `brands/shortcodes/brands-a-z.html.twig`
|
||||
- [ ] `brands/shortcodes/single-brand.html.twig`
|
||||
- [ ] `auth/form-login.html.twig`
|
||||
- [ ] `auth/form-grant-access.html.twig`
|
||||
- [ ] `single-product/back-in-stock-form.html.twig`
|
||||
- [x] `brands/brand-description.html.twig`
|
||||
- [x] `brands/taxonomy-product_brand.html.twig`
|
||||
- [x] `brands/shortcodes/brands-a-z.html.twig`
|
||||
- [x] `brands/shortcodes/single-brand.html.twig`
|
||||
- [x] `auth/form-login.html.twig`
|
||||
- [x] `auth/form-grant-access.html.twig`
|
||||
- [x] `single-product/back-in-stock-form.html.twig`
|
||||
|
||||
### Reusable Components
|
||||
|
||||
- [ ] `components/price.html.twig`
|
||||
- [ ] `components/rating.html.twig`
|
||||
- [ ] `components/address-card.html.twig`
|
||||
- [ ] `components/status-badge.html.twig`
|
||||
- [ ] `components/quantity-input.html.twig`
|
||||
- [ ] `components/form-field.html.twig`
|
||||
- [x] `components/price.html.twig`
|
||||
- [x] `components/rating.html.twig`
|
||||
- [x] `components/address-card.html.twig`
|
||||
- [x] `components/status-badge.html.twig`
|
||||
- [x] `components/quantity-input.html.twig`
|
||||
- [x] `components/form-field.html.twig`
|
||||
|
||||
72
templates/auth/form-grant-access.html.twig
Normal file
72
templates/auth/form-grant-access.html.twig
Normal file
@@ -0,0 +1,72 @@
|
||||
{#
|
||||
# REST API Auth Grant Access Form (Bootstrap 5 Override)
|
||||
#
|
||||
# Confirmation page for granting third-party app access via OAuth.
|
||||
# Rendered outside the WordPress theme (standalone page).
|
||||
#
|
||||
# Expected context:
|
||||
# app_name - Name of the requesting application
|
||||
# scope - Access scope (read, write, read_write)
|
||||
# permissions - Array of permission description strings
|
||||
# callback_url - Callback URL for the application
|
||||
# return_url - URL to return to on deny
|
||||
# granted_url - URL to redirect to on approve
|
||||
# logout_url - URL to log out
|
||||
# user - WP_User object of the logged-in user
|
||||
#
|
||||
# WooCommerce PHP equivalent: auth/form-grant-access.php
|
||||
#
|
||||
# @package WcBootstrap
|
||||
# @since 0.1.0
|
||||
#}
|
||||
|
||||
{{ do_action('woocommerce_auth_page_header') }}
|
||||
|
||||
<h1 class="h3 mb-4">
|
||||
{{ __('%s would like to connect to your store')|format(app_name|esc_html) }}
|
||||
</h1>
|
||||
|
||||
{{ wc_print_notices() }}
|
||||
|
||||
<p class="mb-3">
|
||||
{{ __('This will give "%1$s" %2$s access which will allow it to:')|format(
|
||||
'<strong>' ~ app_name|esc_html ~ '</strong>',
|
||||
'<strong>' ~ scope|esc_html ~ '</strong>'
|
||||
)|wp_kses_post }}
|
||||
</p>
|
||||
|
||||
<ul class="list-group mb-4">
|
||||
{% for permission in permissions %}
|
||||
<li class="list-group-item">
|
||||
<i class="bi bi-check-lg text-success me-2" aria-hidden="true"></i>
|
||||
{{ permission|esc_html }}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
<div class="alert alert-warning mb-4" role="alert">
|
||||
<i class="bi bi-exclamation-triangle me-2" aria-hidden="true"></i>
|
||||
{{ __('Approving will share credentials with %s. Do not proceed if this looks suspicious in any way.')|format(
|
||||
'<strong>' ~ wp_parse_url(callback_url, constant('PHP_URL_HOST'))|esc_html ~ '</strong>'
|
||||
)|wp_kses_post }}
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center gap-3 mb-4 p-3 bg-body-tertiary rounded">
|
||||
{{ get_avatar(user.ID, 48)|raw }}
|
||||
<div>
|
||||
<span class="fw-semibold">{{ __('Logged in as %s')|format(user.display_name|esc_html) }}</span>
|
||||
<a href="{{ logout_url|esc_url }}" class="d-block small">{{ __('Logout') }}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex gap-2">
|
||||
<a href="{{ granted_url|esc_url }}" class="btn btn-primary">
|
||||
<i class="bi bi-check-lg me-1" aria-hidden="true"></i>
|
||||
{{ __('Approve') }}
|
||||
</a>
|
||||
<a href="{{ return_url|esc_url }}" class="btn btn-outline-secondary">
|
||||
{{ __('Deny') }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{{ do_action('woocommerce_auth_page_footer') }}
|
||||
69
templates/auth/form-login.html.twig
Normal file
69
templates/auth/form-login.html.twig
Normal file
@@ -0,0 +1,69 @@
|
||||
{#
|
||||
# REST API Auth Login Form (Bootstrap 5 Override)
|
||||
#
|
||||
# Login form for third-party app OAuth authentication.
|
||||
# Rendered outside the WordPress theme (standalone page).
|
||||
#
|
||||
# Expected context:
|
||||
# app_name - Name of the requesting application
|
||||
# return_url - URL to return to on cancel
|
||||
# redirect_url - URL to redirect to after login
|
||||
#
|
||||
# WooCommerce PHP equivalent: auth/form-login.php
|
||||
#
|
||||
# @package WcBootstrap
|
||||
# @since 0.1.0
|
||||
#}
|
||||
|
||||
{{ do_action('woocommerce_auth_page_header') }}
|
||||
|
||||
<h1 class="h3 mb-4">
|
||||
{{ __('%s would like to connect to your store')|format(app_name|esc_html) }}
|
||||
</h1>
|
||||
|
||||
{{ wc_print_notices() }}
|
||||
|
||||
<p class="mb-4">
|
||||
{{ __('To connect to %1$s you need to be logged in. Log in to your store below, or <a href="%2$s">cancel and return to %1$s</a>')|format(app_name|esc_html, return_url|esc_url)|wp_kses_post }}
|
||||
</p>
|
||||
|
||||
<form method="post" class="wc-auth-login">
|
||||
<div class="mb-3">
|
||||
<label for="username" class="form-label">
|
||||
{{ __('Username or email address') }} <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"
|
||||
required
|
||||
aria-required="true" />
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="password" class="form-label">
|
||||
{{ __('Password') }} <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"
|
||||
required
|
||||
aria-required="true" />
|
||||
</div>
|
||||
|
||||
<div class="mt-3">
|
||||
{{ wp_nonce_field('woocommerce-login', 'woocommerce-login-nonce') }}
|
||||
<button type="submit"
|
||||
class="btn btn-primary btn-lg"
|
||||
name="login"
|
||||
value="{{ __('Login') }}">
|
||||
{{ __('Login') }}
|
||||
</button>
|
||||
<input type="hidden" name="redirect" value="{{ redirect_url|esc_url }}" />
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{{ do_action('woocommerce_auth_page_footer') }}
|
||||
29
templates/brands/brand-description.html.twig
Normal file
29
templates/brands/brand-description.html.twig
Normal file
@@ -0,0 +1,29 @@
|
||||
{#
|
||||
# Brand Description (Bootstrap 5 Override)
|
||||
#
|
||||
# Renders a brand's description with optional thumbnail.
|
||||
#
|
||||
# Expected context:
|
||||
# thumbnail - URL of brand thumbnail image (or empty)
|
||||
#
|
||||
# WooCommerce PHP equivalent: brands/brand-description.php
|
||||
#
|
||||
# @package WcBootstrap
|
||||
# @since 0.1.0
|
||||
#}
|
||||
|
||||
{% set image_size = wc_get_image_size('shop_catalog') %}
|
||||
|
||||
<div class="term-description brand-description d-flex gap-4 mb-4">
|
||||
{% if thumbnail %}
|
||||
<img src="{{ thumbnail|esc_url }}"
|
||||
alt="{{ single_term_title('', false)|esc_attr }}"
|
||||
class="rounded flex-shrink-0"
|
||||
width="{{ image_size.width|esc_attr }}"
|
||||
style="max-width: {{ image_size.width }}px; height: auto;" />
|
||||
{% endif %}
|
||||
|
||||
<div class="text">
|
||||
{{ term_description()|wptexturize|wpautop|do_shortcode }}
|
||||
</div>
|
||||
</div>
|
||||
56
templates/brands/shortcodes/brands-a-z.html.twig
Normal file
56
templates/brands/shortcodes/brands-a-z.html.twig
Normal file
@@ -0,0 +1,56 @@
|
||||
{#
|
||||
# Brands A-Z Listing (Bootstrap 5 Override)
|
||||
#
|
||||
# Alphabetical index of product brands used by [product_brand_list] shortcode.
|
||||
#
|
||||
# Expected context:
|
||||
# index - Array of index characters (A-Z, 0-9)
|
||||
# product_brands - Array keyed by character, each containing brand term objects
|
||||
# show_empty - Whether to show empty index letters
|
||||
# show_top_links - Whether to show "Top" links after each section
|
||||
#
|
||||
# WooCommerce PHP equivalent: brands/shortcodes/brands-a-z.php
|
||||
#
|
||||
# @package WcBootstrap
|
||||
# @since 0.1.0
|
||||
#}
|
||||
|
||||
<div id="brands_a_z">
|
||||
<nav class="mb-4" aria-label="{{ __('Brand index') }}">
|
||||
<ul class="list-inline brands_index">
|
||||
{% for i in index %}
|
||||
{% if product_brands[i] is defined %}
|
||||
<li class="list-inline-item">
|
||||
<a href="#brands-{{ i|esc_attr }}" class="btn btn-sm btn-outline-primary">{{ i|esc_html }}</a>
|
||||
</li>
|
||||
{% elseif show_empty %}
|
||||
<li class="list-inline-item">
|
||||
<span class="btn btn-sm btn-outline-secondary disabled">{{ i|esc_html }}</span>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
{% for i in index %}
|
||||
{% if product_brands[i] is defined %}
|
||||
<h3 id="brands-{{ i|esc_attr }}" class="h5 border-bottom pb-2 mt-4 mb-3">{{ i|esc_html }}</h3>
|
||||
|
||||
<ul class="list-unstyled brands row row-cols-1 row-cols-sm-2 row-cols-md-3 g-2 mb-3">
|
||||
{% for brand in product_brands[i] %}
|
||||
<li class="col">
|
||||
<a href="{{ get_term_link(brand.slug, 'product_brand')|esc_url }}">
|
||||
{{ brand.name|esc_html }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
{% if show_top_links %}
|
||||
<a class="btn btn-sm btn-link" href="#brands_a_z">
|
||||
<i class="bi bi-arrow-up me-1" aria-hidden="true"></i>{{ __('Top') }}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
24
templates/brands/shortcodes/single-brand.html.twig
Normal file
24
templates/brands/shortcodes/single-brand.html.twig
Normal file
@@ -0,0 +1,24 @@
|
||||
{#
|
||||
# Single Brand Thumbnail (Bootstrap 5 Override)
|
||||
#
|
||||
# Renders a single brand image link, used by [product_brand] shortcode.
|
||||
#
|
||||
# Expected context:
|
||||
# term - WP_Term object for the brand
|
||||
# thumbnail - URL to brand thumbnail image
|
||||
# class - CSS class for the image
|
||||
# width - Image width
|
||||
# height - Image height
|
||||
#
|
||||
# WooCommerce PHP equivalent: brands/shortcodes/single-brand.php
|
||||
#
|
||||
# @package WcBootstrap
|
||||
# @since 0.1.0
|
||||
#}
|
||||
|
||||
<a href="{{ get_term_link(term, 'product_brand')|esc_url }}" class="d-inline-block">
|
||||
<img src="{{ thumbnail|esc_url }}"
|
||||
alt="{{ term.name|esc_attr }}"
|
||||
class="{{ class|esc_attr }}"
|
||||
style="width: {{ width|esc_attr }}; height: {{ height|esc_attr }};" />
|
||||
</a>
|
||||
12
templates/brands/taxonomy-product_brand.html.twig
Normal file
12
templates/brands/taxonomy-product_brand.html.twig
Normal file
@@ -0,0 +1,12 @@
|
||||
{#
|
||||
# Brand Taxonomy Archive (Bootstrap 5 Override)
|
||||
#
|
||||
# Delegates to the standard archive-product template.
|
||||
#
|
||||
# WooCommerce PHP equivalent: brands/taxonomy-product_brand.php
|
||||
#
|
||||
# @package WcBootstrap
|
||||
# @since 0.1.0
|
||||
#}
|
||||
|
||||
{% include 'archive-product.html.twig' %}
|
||||
58
templates/components/address-card.html.twig
Normal file
58
templates/components/address-card.html.twig
Normal file
@@ -0,0 +1,58 @@
|
||||
{#
|
||||
# Address Card Component (Bootstrap 5)
|
||||
#
|
||||
# Reusable address display card with optional edit link.
|
||||
#
|
||||
# Expected context:
|
||||
# title - Card header title (e.g., "Billing address")
|
||||
# address - Formatted address HTML string
|
||||
# phone - Phone number (optional)
|
||||
# email - Email address (optional)
|
||||
# edit_url - URL to edit this address (optional)
|
||||
#
|
||||
# Usage:
|
||||
# {% include 'components/address-card.html.twig' with {
|
||||
# title: 'Billing address',
|
||||
# address: order.get_formatted_billing_address(),
|
||||
# phone: order.get_billing_phone(),
|
||||
# email: order.get_billing_email(),
|
||||
# edit_url: wc_get_endpoint_url('edit-address', 'billing')
|
||||
# } %}
|
||||
#
|
||||
# @package WcBootstrap
|
||||
# @since 0.1.0
|
||||
#}
|
||||
|
||||
<div class="card h-100">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h3 class="h6 mb-0">{{ title|esc_html }}</h3>
|
||||
{% if edit_url is defined and edit_url %}
|
||||
<a href="{{ edit_url|esc_url }}" class="btn btn-sm btn-outline-primary">
|
||||
<i class="bi bi-pencil me-1" aria-hidden="true"></i>{{ __('Edit') }}
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<address class="mb-0" style="font-style: normal; line-height: 1.6;">
|
||||
{% if address %}
|
||||
{{ address|wp_kses_post }}
|
||||
{% else %}
|
||||
<span class="text-body-secondary">{{ __('N/A') }}</span>
|
||||
{% endif %}
|
||||
|
||||
{% if phone is defined and phone %}
|
||||
<p class="mt-2 mb-0">
|
||||
<i class="bi bi-telephone me-1" aria-hidden="true"></i>
|
||||
{{ phone|esc_html }}
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
{% if email is defined and email %}
|
||||
<p class="mt-1 mb-0">
|
||||
<i class="bi bi-envelope me-1" aria-hidden="true"></i>
|
||||
{{ email|esc_html }}
|
||||
</p>
|
||||
{% endif %}
|
||||
</address>
|
||||
</div>
|
||||
</div>
|
||||
114
templates/components/form-field.html.twig
Normal file
114
templates/components/form-field.html.twig
Normal file
@@ -0,0 +1,114 @@
|
||||
{#
|
||||
# Form Field Component (Bootstrap 5)
|
||||
#
|
||||
# Reusable form field wrapper with label, input, and validation.
|
||||
# Renders different input types based on the field configuration.
|
||||
#
|
||||
# Expected context:
|
||||
# field_key - Field name/key
|
||||
# field - Field configuration array with:
|
||||
# .type - Input type (text, email, password, tel, select, textarea, checkbox, radio)
|
||||
# .label - Field label
|
||||
# .required - Whether field is required (boolean)
|
||||
# .placeholder - Placeholder text (optional)
|
||||
# .options - Array of options for select/radio (optional)
|
||||
# .value - Current value (optional)
|
||||
# .description - Help text (optional)
|
||||
# .class - Additional CSS classes (optional)
|
||||
#
|
||||
# Usage:
|
||||
# {% include 'components/form-field.html.twig' with {
|
||||
# field_key: 'billing_email',
|
||||
# field: { type: 'email', label: 'Email', required: true }
|
||||
# } %}
|
||||
#
|
||||
# @package WcBootstrap
|
||||
# @since 0.1.0
|
||||
#}
|
||||
|
||||
{% set field_type = field.type|default('text') %}
|
||||
{% set field_id = field_key|replace({'_': '-', '[': '-', ']': ''}) %}
|
||||
{% set is_required = field.required|default(false) %}
|
||||
|
||||
{% if field_type == 'checkbox' %}
|
||||
<div class="form-check mb-3">
|
||||
<input type="checkbox"
|
||||
class="form-check-input {{ field.class|default('') }}"
|
||||
name="{{ field_key|esc_attr }}"
|
||||
id="{{ field_id|esc_attr }}"
|
||||
value="1"
|
||||
{% if field.value|default(false) %}checked{% endif %}
|
||||
{% if is_required %}required aria-required="true"{% endif %} />
|
||||
<label class="form-check-label" for="{{ field_id|esc_attr }}">
|
||||
{{ field.label }}
|
||||
{% if is_required %}<span class="text-danger" aria-hidden="true">*</span>{% endif %}
|
||||
</label>
|
||||
</div>
|
||||
{% elseif field_type == 'textarea' %}
|
||||
<div class="mb-3">
|
||||
<label for="{{ field_id|esc_attr }}" class="form-label">
|
||||
{{ field.label }}
|
||||
{% if is_required %}
|
||||
<span class="text-danger" aria-hidden="true">*</span>
|
||||
<span class="visually-hidden">{{ __('Required') }}</span>
|
||||
{% endif %}
|
||||
</label>
|
||||
<textarea class="form-control {{ field.class|default('') }}"
|
||||
name="{{ field_key|esc_attr }}"
|
||||
id="{{ field_id|esc_attr }}"
|
||||
rows="{{ field.rows|default(3) }}"
|
||||
{% if field.placeholder is defined %}placeholder="{{ field.placeholder|esc_attr }}"{% endif %}
|
||||
{% if is_required %}required aria-required="true"{% endif %}>{{ field.value|default('')|esc_html }}</textarea>
|
||||
{% if field.description is defined and field.description %}
|
||||
<div class="form-text">{{ field.description }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% elseif field_type == 'select' %}
|
||||
<div class="mb-3">
|
||||
<label for="{{ field_id|esc_attr }}" class="form-label">
|
||||
{{ field.label }}
|
||||
{% if is_required %}
|
||||
<span class="text-danger" aria-hidden="true">*</span>
|
||||
<span class="visually-hidden">{{ __('Required') }}</span>
|
||||
{% endif %}
|
||||
</label>
|
||||
<select class="form-select {{ field.class|default('') }}"
|
||||
name="{{ field_key|esc_attr }}"
|
||||
id="{{ field_id|esc_attr }}"
|
||||
{% if is_required %}required aria-required="true"{% endif %}>
|
||||
{% if field.placeholder is defined %}
|
||||
<option value="">{{ field.placeholder|esc_html }}</option>
|
||||
{% endif %}
|
||||
{% for option_value, option_label in field.options|default({}) %}
|
||||
<option value="{{ option_value|esc_attr }}"
|
||||
{% if field.value|default('') == option_value %}selected{% endif %}>
|
||||
{{ option_label|esc_html }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
{% if field.description is defined and field.description %}
|
||||
<div class="form-text">{{ field.description }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="mb-3">
|
||||
<label for="{{ field_id|esc_attr }}" class="form-label">
|
||||
{{ field.label }}
|
||||
{% if is_required %}
|
||||
<span class="text-danger" aria-hidden="true">*</span>
|
||||
<span class="visually-hidden">{{ __('Required') }}</span>
|
||||
{% endif %}
|
||||
</label>
|
||||
<input type="{{ field_type|esc_attr }}"
|
||||
class="form-control {{ field.class|default('') }}"
|
||||
name="{{ field_key|esc_attr }}"
|
||||
id="{{ field_id|esc_attr }}"
|
||||
value="{{ field.value|default('')|esc_attr }}"
|
||||
{% if field.placeholder is defined %}placeholder="{{ field.placeholder|esc_attr }}"{% endif %}
|
||||
{% if field.autocomplete is defined %}autocomplete="{{ field.autocomplete|esc_attr }}"{% endif %}
|
||||
{% if is_required %}required aria-required="true"{% endif %} />
|
||||
{% if field.description is defined and field.description %}
|
||||
<div class="form-text">{{ field.description }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
20
templates/components/price.html.twig
Normal file
20
templates/components/price.html.twig
Normal file
@@ -0,0 +1,20 @@
|
||||
{#
|
||||
# Price Component (Bootstrap 5)
|
||||
#
|
||||
# Reusable price display with sale/regular price handling.
|
||||
#
|
||||
# Expected context:
|
||||
# product - WC_Product object
|
||||
#
|
||||
# Usage:
|
||||
# {% include 'components/price.html.twig' with { product: product } %}
|
||||
#
|
||||
# @package WcBootstrap
|
||||
# @since 0.1.0
|
||||
#}
|
||||
|
||||
{% if product.get_price_html() %}
|
||||
<span class="price">
|
||||
{{ product.get_price_html()|raw }}
|
||||
</span>
|
||||
{% endif %}
|
||||
52
templates/components/quantity-input.html.twig
Normal file
52
templates/components/quantity-input.html.twig
Normal file
@@ -0,0 +1,52 @@
|
||||
{#
|
||||
# Quantity Input Component (Bootstrap 5)
|
||||
#
|
||||
# Reusable quantity input with +/- buttons using Bootstrap input-group.
|
||||
# Works with the quantity.js script for increment/decrement.
|
||||
#
|
||||
# Expected context:
|
||||
# input_name - Input name attribute (default: 'quantity')
|
||||
# input_id - Input id attribute (optional)
|
||||
# input_value - Current quantity value (default: 1)
|
||||
# min_value - Minimum quantity (default: 1)
|
||||
# max_value - Maximum quantity (default: '')
|
||||
# step - Step increment (default: 1)
|
||||
# classes - Additional CSS classes (optional)
|
||||
#
|
||||
# Usage:
|
||||
# {% include 'components/quantity-input.html.twig' with {
|
||||
# input_name: 'quantity',
|
||||
# input_value: 1,
|
||||
# min_value: 1,
|
||||
# max_value: product.get_max_purchase_quantity()
|
||||
# } %}
|
||||
#
|
||||
# @package WcBootstrap
|
||||
# @since 0.1.0
|
||||
#}
|
||||
|
||||
{% set qty_name = input_name|default('quantity') %}
|
||||
{% set qty_id = input_id|default('quantity_' ~ random()) %}
|
||||
{% set qty_value = input_value|default(1) %}
|
||||
{% set qty_min = min_value|default(1) %}
|
||||
{% set qty_max = max_value|default('') %}
|
||||
{% set qty_step = step|default(1) %}
|
||||
|
||||
<div class="quantity input-group input-group-sm {{ classes|default('') }}" style="max-width: 140px;">
|
||||
<button type="button" class="btn btn-outline-secondary qty-minus" aria-label="{{ __('Decrease quantity') }}">
|
||||
<i class="bi bi-dash" aria-hidden="true"></i>
|
||||
</button>
|
||||
<input type="number"
|
||||
class="form-control text-center"
|
||||
name="{{ qty_name|esc_attr }}"
|
||||
id="{{ qty_id|esc_attr }}"
|
||||
value="{{ qty_value|esc_attr }}"
|
||||
min="{{ qty_min|esc_attr }}"
|
||||
{% if qty_max %}max="{{ qty_max|esc_attr }}"{% endif %}
|
||||
step="{{ qty_step|esc_attr }}"
|
||||
inputmode="numeric"
|
||||
aria-label="{{ __('Quantity') }}" />
|
||||
<button type="button" class="btn btn-outline-secondary qty-plus" aria-label="{{ __('Increase quantity') }}">
|
||||
<i class="bi bi-plus" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
37
templates/components/rating.html.twig
Normal file
37
templates/components/rating.html.twig
Normal file
@@ -0,0 +1,37 @@
|
||||
{#
|
||||
# Rating Component (Bootstrap 5)
|
||||
#
|
||||
# Reusable star rating display using Bootstrap Icons.
|
||||
#
|
||||
# Expected context:
|
||||
# rating - Numeric rating (0-5)
|
||||
# review_count - Number of reviews (optional, for display)
|
||||
#
|
||||
# Usage:
|
||||
# {% include 'components/rating.html.twig' with { rating: 4.5, review_count: 12 } %}
|
||||
#
|
||||
# @package WcBootstrap
|
||||
# @since 0.1.0
|
||||
#}
|
||||
|
||||
{% if rating is defined and rating > 0 %}
|
||||
<div class="wc-star-rating d-inline-flex align-items-center gap-1"
|
||||
role="img"
|
||||
aria-label="{{ __('%s out of 5')|format(rating) }}">
|
||||
{% for i in 1..5 %}
|
||||
{% if rating >= i %}
|
||||
<i class="bi bi-star-fill text-warning" aria-hidden="true"></i>
|
||||
{% elseif rating >= (i - 0.5) %}
|
||||
<i class="bi bi-star-half text-warning" aria-hidden="true"></i>
|
||||
{% else %}
|
||||
<i class="bi bi-star text-warning" aria-hidden="true"></i>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if review_count is defined and review_count > 0 %}
|
||||
<small class="text-body-secondary ms-1">
|
||||
({{ review_count }})
|
||||
</small>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
30
templates/components/status-badge.html.twig
Normal file
30
templates/components/status-badge.html.twig
Normal file
@@ -0,0 +1,30 @@
|
||||
{#
|
||||
# Status Badge Component (Bootstrap 5)
|
||||
#
|
||||
# Reusable order/payment status badge with contextual colors.
|
||||
#
|
||||
# Expected context:
|
||||
# status - Status slug (e.g., 'completed', 'processing', 'on-hold', 'cancelled', 'failed', 'refunded', 'pending')
|
||||
# label - Display label (optional, defaults to status name via wc_get_order_status_name)
|
||||
#
|
||||
# Usage:
|
||||
# {% include 'components/status-badge.html.twig' with { status: order.get_status() } %}
|
||||
# {% include 'components/status-badge.html.twig' with { status: 'completed', label: 'Done' } %}
|
||||
#
|
||||
# @package WcBootstrap
|
||||
# @since 0.1.0
|
||||
#}
|
||||
|
||||
{% set display_label = label|default(wc_get_order_status_name(status)) %}
|
||||
|
||||
{% if status == 'completed' %}
|
||||
<span class="badge text-bg-success">{{ display_label|esc_html }}</span>
|
||||
{% elseif status == 'processing' %}
|
||||
<span class="badge text-bg-primary">{{ display_label|esc_html }}</span>
|
||||
{% elseif status == 'on-hold' or status == 'pending' %}
|
||||
<span class="badge text-bg-warning">{{ display_label|esc_html }}</span>
|
||||
{% elseif status == 'cancelled' or status == 'failed' or status == 'refunded' %}
|
||||
<span class="badge text-bg-danger">{{ display_label|esc_html }}</span>
|
||||
{% else %}
|
||||
<span class="badge text-bg-secondary">{{ display_label|esc_html }}</span>
|
||||
{% endif %}
|
||||
65
templates/single-product/back-in-stock-form.html.twig
Normal file
65
templates/single-product/back-in-stock-form.html.twig
Normal file
@@ -0,0 +1,65 @@
|
||||
{#
|
||||
# Back in Stock Form (Bootstrap 5 Override)
|
||||
#
|
||||
# Notification signup form shown on out-of-stock product pages.
|
||||
#
|
||||
# Expected context:
|
||||
# product_id - Product ID
|
||||
# is_visible - Whether the form is visible (not hidden)
|
||||
# show_email_field - Whether to show the email input
|
||||
# show_checkbox - Whether to show the privacy opt-in checkbox
|
||||
# button_class - CSS class for the submit button
|
||||
#
|
||||
# WooCommerce PHP equivalent: single-product/back-in-stock-form.php
|
||||
#
|
||||
# @package WcBootstrap
|
||||
# @since 0.1.0
|
||||
#}
|
||||
|
||||
<div class="wc_bis_form card{% if not is_visible %} d-none{% endif %} mt-3"
|
||||
data-bis-product-id="{{ product_id }}">
|
||||
<div class="card-body">
|
||||
<h3 id="wc_bis_form_heading_{{ product_id }}" class="h6 mb-3">
|
||||
{{ __('Want to be notified when this product is back in stock?') }}
|
||||
</h3>
|
||||
|
||||
<form method="post" novalidate aria-labelledby="wc_bis_form_heading_{{ product_id }}">
|
||||
<div class="d-flex gap-2 mb-3">
|
||||
{% if show_email_field %}
|
||||
<label for="wc_bis_email_{{ product_id }}" class="visually-hidden">
|
||||
{{ __('Email address to be notified when this product is back in stock') }}
|
||||
</label>
|
||||
<input type="email"
|
||||
name="wc_bis_email"
|
||||
class="form-control"
|
||||
placeholder="{{ __('Enter your e-mail') }}"
|
||||
id="wc_bis_email_{{ product_id }}"
|
||||
required
|
||||
aria-required="true" />
|
||||
{% endif %}
|
||||
|
||||
<button type="submit"
|
||||
name="wc_bis_register"
|
||||
class="btn btn-primary flex-shrink-0">
|
||||
<i class="bi bi-bell me-1" aria-hidden="true"></i>
|
||||
{{ __('Notify me') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{% if show_checkbox %}
|
||||
<div class="form-check">
|
||||
<input type="checkbox"
|
||||
class="form-check-input"
|
||||
name="wc_bis_opt_in"
|
||||
id="wc_bis_opt_in_{{ product_id }}" />
|
||||
<label class="form-check-label small" for="wc_bis_opt_in_{{ product_id }}">
|
||||
{{ wc_replace_policy_page_link_placeholders(wc_get_privacy_policy_text('registration'))|wp_kses_post }}
|
||||
</label>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{{ wp_nonce_field('wc_bis_signup', 'wc_bis_nonce') }}
|
||||
<input type="hidden" name="wc_bis_product_id" value="{{ product_id }}" />
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user