Files
wc-bootstrap/templates/archive-product.html.twig
magdev c9c99a6b88 Implement Phase 2: product archive and shop loop templates (Bootstrap 5)
Add 15 Twig template overrides for the product archive and shop loop:
- archive-product: 3+9 grid layout with optional filter sidebar
- content-product: card component with hook-based content injection
- content-product-cat: category card with thumbnail
- product-searchform: input-group with search icon button
- loop/loop-start, loop-end: responsive row-cols grid
- loop/header: archive title with description hook
- loop/result-count: showing X-Y of Z with aria-relevant
- loop/orderby: form-select-sm sort dropdown
- loop/pagination: delegates to components/pagination.html.twig
- loop/no-products-found: alert-info empty state
- loop/add-to-cart: btn-primary-sm with AJAX data attributes
- loop/price: fw-semibold with sale/regular markup
- loop/rating: Bootstrap Icon stars (full, half, empty)
- loop/sale-flash: badge bg-danger positioned overlay

CSS additions: product card hover, sale badge z-index, star rating sizing,
price del/ins styling, WooCommerce grid reset.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-28 10:23:09 +01:00

65 lines
1.9 KiB
Twig

{#
# Product Archive / Shop Page (Bootstrap 5 Override)
#
# Main template for the shop page, product category, tag, and attribute archives.
# Uses a 3+9 column layout with a filter sidebar and product grid.
#
# Expected context:
# page_title - Archive page title
# has_products - Whether the loop has products
# products - Array of product objects for the loop
# sidebar_content - Pre-rendered sidebar HTML
#
# WooCommerce PHP equivalent: archive-product.php
#
# @package WcBootstrap
# @since 0.1.0
#}
{% extends "base.html.twig" %}
{% block breadcrumbs %}
{{ do_action('woocommerce_before_main_content') }}
{% endblock %}
{% block content %}
{{ do_action('woocommerce_shop_loop_header') }}
{% if has_products is defined and has_products %}
{{ do_action('woocommerce_before_shop_loop') }}
<div class="row">
{# Sidebar with filters #}
{% if sidebar_content is defined and sidebar_content %}
<aside class="col-lg-3 mb-4 mb-lg-0">
{% include 'global/sidebar.html.twig' %}
</aside>
<div class="col-lg-9">
{% else %}
<div class="col-12">
{% endif %}
{{ woocommerce_product_loop_start() }}
{% if products is defined %}
{% for product in products %}
{% include 'content-product.html.twig' with { product: product } %}
{% endfor %}
{% endif %}
{{ woocommerce_product_loop_end() }}
{{ do_action('woocommerce_after_shop_loop') }}
</div>
</div>
{% else %}
{{ do_action('woocommerce_no_products_found') }}
{% endif %}
{{ do_action('woocommerce_after_main_content') }}
{% endblock %}
{% block sidebar %}
{{ do_action('woocommerce_sidebar') }}
{% endblock %}