feat: añadir sistema de valoraciones con formulario, vistas y templates
This commit is contained in:
@@ -0,0 +1,112 @@
|
||||
{% extends "tienda/base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container py-4">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="{% url 'index' %}">Inicio</a></li>
|
||||
<li class="breadcrumb-item"><a href="{% url 'producto' product.id %}">{{ product.name }}</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Valorar Producto</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">
|
||||
{% if existing_review %}Actualizar{% else %}Añadir{% endif %} valoración: {{ product.name }}
|
||||
</h4>
|
||||
|
||||
<form method="post" enctype="multipart/form-data">
|
||||
{% csrf_token %}
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="form-label">Puntuación</label>
|
||||
<div class="star-rating d-flex gap-2" id="star-rating">
|
||||
{% for i in "12345" %}
|
||||
<i class="bi bi-star fs-2 {% if form.initial.rating|default:0 >= i|add:0 %}text-warning{% else %}text-secondary{% endif %}" data-value="{{ i }}" style="cursor: pointer;"></i>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<input type="hidden" name="rating" id="rating-input" value="{{ form.initial.rating|default:1 }}">
|
||||
{% if form.rating.errors %}
|
||||
<div class="text-danger small">{{ form.rating.errors }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="title" class="form-label">Título</label>
|
||||
{{ form.title }}
|
||||
{% if form.title.errors %}
|
||||
<div class="text-danger small">{{ form.title.errors }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="content" class="form-label">Descripción</label>
|
||||
{{ form.content }}
|
||||
{% if form.content.errors %}
|
||||
<div class="text-danger small">{{ form.content.errors }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="images" class="form-label">Imágenes (opcional)</label>
|
||||
{{ form.images }}
|
||||
<div class="form-text">Puedes subir hasta 5 imágenes</div>
|
||||
</div>
|
||||
|
||||
<div class="d-grid gap-2">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
{% if existing_review %}Actualizar{% else %}Enviar{% endif %} valoración
|
||||
</button>
|
||||
<a href="{% url 'producto' product.id %}" class="btn btn-outline-secondary">Cancelar</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const stars = document.querySelectorAll('#star-rating i');
|
||||
const ratingInput = document.getElementById('rating-input');
|
||||
|
||||
function updateStars(value) {
|
||||
stars.forEach((star, index) => {
|
||||
if (index < value) {
|
||||
star.classList.remove('text-secondary');
|
||||
star.classList.add('text-warning');
|
||||
} else {
|
||||
star.classList.remove('text-warning');
|
||||
star.classList.add('text-secondary');
|
||||
}
|
||||
});
|
||||
ratingInput.value = value;
|
||||
}
|
||||
|
||||
stars.forEach(star => {
|
||||
star.addEventListener('click', function() {
|
||||
const value = parseInt(this.dataset.value);
|
||||
updateStars(value);
|
||||
});
|
||||
|
||||
star.addEventListener('mouseenter', function() {
|
||||
const value = parseInt(this.dataset.value);
|
||||
stars.forEach((s, index) => {
|
||||
if (index < value) {
|
||||
s.classList.remove('text-secondary');
|
||||
s.classList.add('text-warning');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
star.addEventListener('mouseleave', function() {
|
||||
updateStars(parseInt(ratingInput.value));
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -62,4 +62,83 @@
|
||||
{{ product.description }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mt-4">
|
||||
<div class="col-md-12">
|
||||
<h4 class="mb-3">Valoraciones</h4>
|
||||
<div id="reviews-summary" class="mb-4">
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<div class="fs-4" id="average-rating">0.0</div>
|
||||
<div>
|
||||
<div id="stars-display"></div>
|
||||
<small class="text-muted" id="reviews-count">0 valoraciones</small>
|
||||
</div>
|
||||
{% if can_review %}
|
||||
<a href="{% url 'add_review' product.id %}" class="btn btn-sm btn-outline-primary ms-auto">Valorar este producto</a>
|
||||
{% elif user.is_authenticated %}
|
||||
<span class="text-muted ms-auto">Ya has valorado este producto</span>
|
||||
{% else %}
|
||||
<a href="{% url 'login' %}?next={% url 'producto' product.id %}" class="btn btn-sm btn-outline-primary ms-auto">Inicia sesión para valorar</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div id="reviews-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
async function loadReviews() {
|
||||
try {
|
||||
const response = await fetch("{% url 'product_reviews' product.id %}");
|
||||
const data = await response.json();
|
||||
|
||||
document.getElementById('average-rating').textContent = data.average_rating;
|
||||
document.getElementById('reviews-count').textContent = data.reviews_count + ' valoraciones';
|
||||
|
||||
let starsHtml = '';
|
||||
for (let i = 1; i <= 5; i++) {
|
||||
starsHtml += `<span class="${i <= Math.round(data.average_rating) ? 'text-warning' : 'text-secondary'}">★</span>`;
|
||||
}
|
||||
document.getElementById('stars-display').innerHTML = starsHtml;
|
||||
|
||||
const reviewsList = document.getElementById('reviews-list');
|
||||
if (data.reviews.length === 0) {
|
||||
reviewsList.innerHTML = '<p class="text-muted">Aún no hay valoraciones para este producto.</p>';
|
||||
} else {
|
||||
let reviewsHtml = '';
|
||||
data.reviews.forEach(review => {
|
||||
let imagesHtml = '';
|
||||
if (review.images && review.images.length > 0) {
|
||||
imagesHtml = '<div class="mt-2">';
|
||||
review.images.forEach(img => {
|
||||
imagesHtml += `<img src="${img.image}" class="img-thumbnail me-1" style="max-width: 80px; max-height: 80px;" alt="">`;
|
||||
});
|
||||
imagesHtml += '</div>';
|
||||
}
|
||||
reviewsHtml += `
|
||||
<div class="card mb-3">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-start">
|
||||
<div>
|
||||
<strong>${review.user}</strong>
|
||||
<span class="text-warning ms-1">${'★'.repeat(review.rating)}</span>
|
||||
</div>
|
||||
<small class="text-muted">${new Date(review.created_at).toLocaleDateString('es-ES')}</small>
|
||||
</div>
|
||||
<h6 class="mt-2">${review.title}</h6>
|
||||
<p class="mb-1">${review.content}</p>
|
||||
${imagesHtml}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
reviewsList.innerHTML = reviewsHtml;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading reviews:', error);
|
||||
}
|
||||
}
|
||||
|
||||
loadReviews();
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user