256 lines
10 KiB
HTML
256 lines
10 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block styles %}
|
||
<link rel="stylesheet" href="{{ url_for('static', filename='css/products.css') }}">
|
||
{% endblock %}
|
||
|
||
{% block scripts %}
|
||
<script src="{{ url_for('static', filename='js/products.js') }}" defer></script>
|
||
{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="products-page">
|
||
<aside class="filters-sidebar">
|
||
<div class="filters-header">
|
||
<h3>Filters</h3>
|
||
{% if search_query or selected_category or selected_size or selected_color or selected_type or selected_material
|
||
or selected_company or min_price or max_price or in_stock_only %}
|
||
<a href="{{ url_for('main.products') }}" class="clear-filters">Clear All</a>
|
||
{% endif %}
|
||
</div>
|
||
|
||
<form method="GET" action="{{ url_for('main.products') }}" class="filters-form">
|
||
|
||
<div class="filter-group">
|
||
<label for="search">Search</label>
|
||
<input type="text" id="search" name="q" value="{{ search_query }}" placeholder="Search products..."
|
||
class="filter-input">
|
||
</div>
|
||
|
||
<div class="filter-group">
|
||
<label for="category">Category</label>
|
||
<select id="category" name="category" class="filter-select">
|
||
<option value="">All Categories</option>
|
||
{% for c in categories %}
|
||
<option value="{{ c.id }}" {% if selected_category==c.id|string %}selected{% endif %}>
|
||
{{ c.name }}
|
||
</option>
|
||
{% endfor %}
|
||
</select>
|
||
</div>
|
||
|
||
<div class="filter-group">
|
||
<label for="size">Size</label>
|
||
<select id="size" name="size" class="filter-select">
|
||
<option value="">All Sizes</option>
|
||
{% for size in sizes %}
|
||
<option value="{{ size }}" {% if selected_size==size %}selected{% endif %}>
|
||
{{ size }}
|
||
</option>
|
||
{% endfor %}
|
||
</select>
|
||
</div>
|
||
|
||
<div class="filter-group">
|
||
<label for="color">Color</label>
|
||
<select id="color" name="color" class="filter-select">
|
||
<option value="">All Colors</option>
|
||
{% for color in colors %}
|
||
<option value="{{ color }}" {% if selected_color==color %}selected{% endif %}>
|
||
{{ color }}
|
||
</option>
|
||
{% endfor %}
|
||
</select>
|
||
</div>
|
||
|
||
<div class="filter-group">
|
||
<label for="material">Material</label>
|
||
<select id="material" name="material" class="filter-select">
|
||
<option value="">All Materials</option>
|
||
{% for material in materials %}
|
||
<option value="{{ material }}" {% if selected_material==material %}selected{% endif %}>
|
||
{{ material }}
|
||
</option>
|
||
{% endfor %}
|
||
</select>
|
||
</div>
|
||
|
||
<div class="filter-group">
|
||
<label for="company">Brand</label>
|
||
<select id="company" name="company" class="filter-select">
|
||
<option value="">All Brands</option>
|
||
{% for company in companies %}
|
||
<option value="{{ company }}" {% if selected_company==company %}selected{% endif %}>
|
||
{{ company }}
|
||
</option>
|
||
{% endfor %}
|
||
</select>
|
||
</div>
|
||
|
||
<div class="filter-group">
|
||
<label>Price Range ($)</label>
|
||
<div class="price-range">
|
||
<input type="number" name="min_price" value="{{ min_price }}" placeholder="Min" class="price-input" min="0"
|
||
step="0.01">
|
||
<span class="price-separator">-</span>
|
||
<input type="number" name="max_price" value="{{ max_price }}" placeholder="Max" class="price-input" min="0"
|
||
step="0.01">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="filter-group">
|
||
<label class="checkbox-label">
|
||
<input type="checkbox" name="in_stock" value="1" {% if in_stock_only %}checked{% endif %}>
|
||
In Stock Only
|
||
</label>
|
||
</div>
|
||
|
||
<button type="submit" class="btn-apply-filters">Apply Filters</button>
|
||
</form>
|
||
</aside>
|
||
|
||
<main class="products-main">
|
||
<div class="products-header">
|
||
<div class="results-info">
|
||
<h1>Clothing</h1>
|
||
<p class="results-count">{{ products|length }} products found</p>
|
||
{% if search_query or selected_category or selected_size or selected_color or selected_type or selected_material
|
||
or selected_company or min_price or max_price or in_stock_only %}
|
||
<div class="active-filters">
|
||
{% if search_query %}
|
||
<span class="filter-tag">Search: "{{ search_query }}"
|
||
<a
|
||
href="{{ url_for('main.products', q='', category=selected_category, size=selected_size, color=selected_color, type=selected_type, material=selected_material, company=selected_company, min_price=min_price, max_price=max_price, in_stock=in_stock_only, sort=sort_by) }}">×</a>
|
||
</span>
|
||
{% endif %}
|
||
{% if selected_category_name %}
|
||
<span class="filter-tag">Category: {{ selected_category_name }}
|
||
<a
|
||
href="{{ url_for('main.products', q=search_query, category='', size=selected_size, color=selected_color, type=selected_type, material=selected_material, company=selected_company, min_price=min_price, max_price=max_price, in_stock=in_stock_only, sort=sort_by) }}">×</a>
|
||
</span>
|
||
{% endif %}
|
||
{% if selected_size %}
|
||
<span class="filter-tag">Size: {{ selected_size }}
|
||
<a
|
||
href="{{ url_for('main.products', q=search_query, category=selected_category, size='', color=selected_color, type=selected_type, material=selected_material, company=selected_company, min_price=min_price, max_price=max_price, in_stock=in_stock_only, sort=sort_by) }}">×</a>
|
||
</span>
|
||
{% endif %}
|
||
{% if selected_color %}
|
||
<span class="filter-tag">Color: {{ selected_color }}
|
||
<a
|
||
href="{{ url_for('main.products', q=search_query, category=selected_category, size=selected_size, color='', type=selected_type, material=selected_material, company=selected_company, min_price=min_price, max_price=max_price, in_stock=in_stock_only, sort=sort_by) }}">×</a>
|
||
</span>
|
||
{% endif %}
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
<div class="sort-controls">
|
||
<label for="sort">Sort by:</label>
|
||
<select id="sort" name="sort" class="sort-select" onchange="this.form.submit()">
|
||
<option value="newest" {% if sort_by=='newest' %}selected{% endif %}>Newest</option>
|
||
<option value="price_low" {% if sort_by=='price_low' %}selected{% endif %}>Price: Low to High</option>
|
||
<option value="price_high" {% if sort_by=='price_high' %}selected{% endif %}>Price: High to Low</option>
|
||
<option value="name" {% if sort_by=='name' %}selected{% endif %}>Name: A-Z</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
{% if products %}
|
||
<div class="products-grid">
|
||
{% for product in products %}
|
||
<div class="product-card">
|
||
<a href="{{ url_for('main.product_detail', id=product.id) }}" class="product-link">
|
||
<div class="product-image">
|
||
<img src="{{ product.get_image_url() }}" alt="{{ product.name }}">
|
||
{% if product.stock <= 0 %} <div class="out-of-stock">Out of Stock
|
||
</div>
|
||
{% elif product.stock <= 5 %} <div class="low-stock">Only {{ product.stock }} left
|
||
</div>
|
||
{% endif %}
|
||
{% if product.average_rating > 0 %}
|
||
<div class="product-rating">
|
||
<span class="rating-stars">★★★★★</span>
|
||
<span class="rating-value">{{ product.average_rating }}</span>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
|
||
<div class="product-info">
|
||
<h3 class="product-name">{{ product.name }}</h3>
|
||
|
||
<div class="product-meta">
|
||
{% if product.color %}
|
||
<span class="meta-item">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||
<circle cx="12" cy="12" r="10"></circle>
|
||
</svg>
|
||
{{ product.color }}
|
||
</span>
|
||
{% endif %}
|
||
|
||
{% if product.size %}
|
||
<span class="meta-item">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||
<path d="M20 7h-9"></path>
|
||
<path d="M14 17H5"></path>
|
||
<circle cx="17" cy="17" r="3"></circle>
|
||
<circle cx="7" cy="7" r="3"></circle>
|
||
</svg>
|
||
{{ product.size }}
|
||
</span>
|
||
{% endif %}
|
||
|
||
{% if product.company %}
|
||
<span class="meta-item">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
|
||
</svg>
|
||
{{ product.company }}
|
||
</span>
|
||
{% endif %}
|
||
</div>
|
||
|
||
<div class="product-footer">
|
||
<div class="product-price">${{ "%.2f"|format(product.price) }}</div>
|
||
|
||
<div class="product-actions">
|
||
{% if current_user.is_authenticated and product.stock > 0 %}
|
||
<a href="{{ url_for('cart.add_to_cart', product_id=product.id) }}" class="btn-add-to-cart"
|
||
onclick="event.stopPropagation();">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||
<circle cx="9" cy="21" r="1"></circle>
|
||
<circle cx="20" cy="21" r="1"></circle>
|
||
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
|
||
</svg>
|
||
Add to Cart
|
||
</a>
|
||
{% elif current_user.is_authenticated %}
|
||
<button class="btn-out-of-stock" disabled>
|
||
Out of Stock
|
||
</button>
|
||
{% else %}
|
||
<a href="{{ url_for('auth.login') }}" class="btn-login-to-buy" onclick="event.stopPropagation();">
|
||
Login to Buy
|
||
</a>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
{% else %}
|
||
<div class="no-products">
|
||
<div class="no-products-icon">👕</div>
|
||
<h3>No products found</h3>
|
||
<p>Try adjusting your filters or search criteria</p>
|
||
<a href="{{ url_for('main.products') }}" class="btn-view-all">
|
||
View All Products
|
||
</a>
|
||
</div>
|
||
{% endif %}
|
||
</main>
|
||
</div>
|
||
{% endblock %}
|