105 lines
4.4 KiB
HTML
105 lines
4.4 KiB
HTML
{% extends "tienda/base.html" %}
|
|
{% load static %}
|
|
{% load vat_filters %}
|
|
|
|
{% block head %}
|
|
<style>
|
|
.search-container {
|
|
margin: 30px 0;
|
|
}
|
|
.search-title {
|
|
margin-bottom: 30px;
|
|
}
|
|
.product-card {
|
|
transition: transform 0.3s ease;
|
|
}
|
|
.product-card:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
.no-results {
|
|
text-align: center;
|
|
padding: 60px 20px;
|
|
}
|
|
.no-results i {
|
|
font-size: 4rem;
|
|
color: #ccc;
|
|
margin-bottom: 20px;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="search-container">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="search-title">
|
|
{% if query %}
|
|
<h2>Resultados de búsqueda para: <strong>"{{ query }}"</strong></h2>
|
|
<p class="text-muted">Se encontraron {{ products.count }} resultado(s)</p>
|
|
{% else %}
|
|
<h2>Búsqueda de productos</h2>
|
|
<p class="text-muted">Ingresa un término de búsqueda para encontrar productos</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if products %}
|
|
<div class="row g-4">
|
|
{% for product in products %}
|
|
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
|
|
<div class="card product-card h-100">
|
|
{% if product.primary_image %}
|
|
<img src="{{ product.primary_image.image.url }}" class="card-img-top" alt="{{ product.primary_image.alt|default:product.name }}" style="height: 250px; object-fit: cover;">
|
|
{% else %}
|
|
<div class="card-img-top bg-light d-flex align-items-center justify-content-center" style="height: 250px;">
|
|
<span class="text-muted">Sin imagen</span>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="card-body d-flex flex-column">
|
|
<h5 class="card-title">{{ product.name }}</h5>
|
|
|
|
{% if product.briefdesc %}
|
|
<p class="card-text text-muted small">{{ product.briefdesc|truncatewords:15 }}</p>
|
|
{% endif %}
|
|
|
|
<div class="mt-auto">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div class="price-info">
|
|
<small class="text-muted d-block">€{{ product.price|format_price }}</small>
|
|
<span class="h5 mb-0 text-primary">€{{ product.get_price_with_vat|format_price }}</span>
|
|
</div>
|
|
{% if product.creator %}
|
|
<small class="text-muted">{{ product.creator.first_name|default:product.creator.username }}</small>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="mt-3 gap-2 d-flex">
|
|
<a href="{% url 'producto' product.id %}" class="btn btn-primary btn-sm flex-grow-1">
|
|
Ver detalles
|
|
</a>
|
|
<a href="{% url 'add_to_cart' product.id %}" class="btn btn-outline-primary btn-sm">
|
|
🛒
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% elif query %}
|
|
<div class="no-results">
|
|
<h3 class="text-muted">No se encontraron productos</h3>
|
|
<p class="text-muted">Intenta con otros términos de búsqueda o <a href="{% url 'index' %}">vuelve al inicio</a></p>
|
|
</div>
|
|
{% else %}
|
|
<div class="no-results">
|
|
<h3 class="text-muted">Realiza una búsqueda</h3>
|
|
<p class="text-muted">Usa la barra de búsqueda superior para encontrar productos</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endblock %}
|