Files
wc-bootstrap/templates/components/rating.html.twig
magdev 49b1d52701 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>
2026-02-28 10:53:44 +01:00

38 lines
1.2 KiB
Twig

{#
# 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 %}