Desarrollo de Ecommerce con Django (parte 3)

A continuación se presenta un tutorial completo y detallado que te guiará paso a paso en la implementación de tres funcionalidades en tu ecommerce:

1. Página de inicio (index.html): Se mostrarán los productos destacados.
2. Catálogo de productos (catalog.html): Se listarán todos los productos activos con paginación mejorada (botones para ir al inicio, anterior, siguiente y fin), y también se aplicará el formateo de precios.
3. Página de detalle del producto (product_detail.html): Se mostrará la información completa de un producto específico, utilizando una vista dedicada, su URL y una plantilla que hereda del layout base. Además, se incluirá el estilo CSS para el detalle del producto.

Cada sección se explica de forma didáctica para que puedas implementarla paso a paso.

---

1. Página de Inicio – Productos Destacados

1.1. Definir la Vista Home

En el archivo store/views.py, actualiza la función home para que consulte los productos que están activos y marcados como destacados. Esta consulta se realiza directamente sobre el modelo Producto.

from django.shortcuts import render
from .models import Producto

def home(request):
    # Filtramos los productos activos y que están marcados como destacados
    featured_products = Producto.objects.filter(activo=True, destacado=True)
    context = {'featured_products': featured_products}
    return render(request, 'index.html', context)

1.2. Actualizar la Plantilla index.html

En la carpeta store/templates/, edita el archivo index.html para que herede del layout base (base.html). En este ejemplo se utiliza el módulo humanize de Django para formatear los precios; por ello, es necesario cargarlo en la plantilla.

{% extends 'base.html' %}
{% block title %}Inicio{% endblock %}
{% block main_content %}
    <section>
        <h2>Sobre nosotros</h2>
        <p>
            Somos una tienda en línea de productos electrónicos, dedicada a ofrecer productos de calidad y un servicio al cliente excepcional.
        </p>
    </section>
    <section>
        <h2>Productos destacados</h2>
        <div class="product-grid">
            {% for producto in featured_products %}
                <div class="product-card">
                    <!-- Se asume que 'imagen' es un ImageField -->
                    <img src="{{ producto.imagen.url }}" alt="{{ producto.nombre }}">
                    <h3>{{ producto.nombre }}</h3>
                    <p>
                        ${{ producto.precio|floatformat:2 }}
                    </p>
                    <button class="btn">Añadir al carrito</button>
                </div>
            {% empty %}
                <p>No hay productos destacados disponibles.</p>
            {% endfor %}
        </div>
    </section>
{% endblock %}

Detalles a tener en cuenta:

• El filtro floatformat:2 asegura que el precio se muestre con dos decimales.

---

2. Catálogo de Productos con Paginación

2.1. Actualizar la Vista Catalog

En store/views.py, edita la función catalog que consultará los productos activos y aplicará paginación. Utilizaremos el objeto Paginator de Django para dividir el listado en páginas.

from django.core.paginator import Paginator

def catalog(request):
    # Consultamos todos los productos activos
    products = Producto.objects.filter(activo=True)
    # Configuramos la paginación: 6 productos por página
    paginator = Paginator(products, 6)
    page_number = request.GET.get('page')
    page_obj = paginator.get_page(page_number)
    context = {'page_obj': page_obj}
    return render(request, 'catalog.html', context)

2.2. Actualizar la Plantilla catalog.html

Edita el archivo store/templates/catalog.html para que muestre los productos de la página actual y agregue controles de paginación. La plantilla incluye botones para ir al inicio, a la página anterior, a la siguiente y al final.

{% extends 'base.html' %}
{% block title %}Catálogo de Productos{% endblock %}
{% block main_content %}
    <h2>Catálogo de Productos</h2>
    <div class="product-grid">
        {% for producto in page_obj %}
            <div class="product-card">
                <img src="{{ producto.imagen.url }}" alt="{{ producto.nombre }}">
                <h3>{{ producto.nombre }}</h3>
                <p>${{ producto.precio|floatformat:2 }}</p>
                <input type="number" min="1" value="1">
                <button class="btn" onclick="agregarAlCarrito(this)">Añadir al carrito</button>
            </div>
        {% empty %}
            <p>No hay productos disponibles.</p>
        {% endfor %}
    </div>
    <!-- Controles de paginación -->
    <div class="pagination">
        {% if page_obj.has_previous %}
            <a class="btn-secondary" href="?page=1">Inicio</a>
            <a class="btn-secondary" href="?page={{ page_obj.previous_page_number }}">Anterior</a>
        {% endif %}
        <span>Página {{ page_obj.number }} de {{ page_obj.paginator.num_pages }}</span>
        {% if page_obj.has_next %}
            <a class="btn-secondary" href="?page={{ page_obj.next_page_number }}">Siguiente</a>
            <a class="btn-secondary" href="?page={{ page_obj.paginator.num_pages }}">Fin</a>
        {% endif %}
    </div>
{% endblock %}

Aspectos destacados:

• El objeto page_obj contiene los productos de la página actual y propiedades útiles para la navegación.
• Los botones "Inicio" y "Fin" permiten saltar a la primera y última página, respectivamente.

---

3. Página de Detalle de Producto

La página de detalle mostrará la información completa de un producto específico.

3.1. Definir la Vista product_detail

En store/views.py, crea la función product_detail que reciba un identificador (pk) para obtener el producto. Utiliza get_object_or_404 para manejar casos en que el producto no exista o no esté activo.

from django.shortcuts import get_object_or_404

def product_detail(request, pk):
    # Obtiene el producto con la clave primaria especificada y que esté activo
    producto = get_object_or_404(Producto, pk=pk, activo=True)
    context = {'producto': producto}
    return render(request, 'product_detail.html', context)

3.2. Configurar la URL del Detalle

En store/urls.py, añade la ruta correspondiente para la vista del detalle del producto. Esto permite acceder a la página mediante una URL que incluya el identificador del producto.

from django.urls import path
from . import views

urlpatterns = [
    path('', views.home, name='home'),
    path('catalog/', views.catalog, name='catalog'),
    path('cart/', views.cart, name='cart'),
    path('contact/', views.contact, name='contact'),
    path('signup/', views.signup, name='signup'),
    path('signin/', views.signin, name='signin'),
    path('product/<int:pk>/', views.product_detail, name='product_detail'),
]

3.3. Crear la Plantilla product_detail.html

Crea el archivo store/templates/product_detail.html para mostrar los detalles del producto. La plantilla utiliza herencia para mantener el diseño global y define una sección especial para el contenido del detalle del producto. Incluiremos además estilos específicos para el detalle.

{% extends 'base.html' %}
{% block title %}Detalle del Producto{% endblock %}
{% block main_content %}
    <div class="product-detail">
        <h2>{{ producto.nombre }}</h2>
        <img src="{{ producto.imagen.url }}" alt="{{ producto.nombre }}">
        <p><strong>Precio:</strong> ${{ producto.precio|floatformat:2 }}</p>
        <p><strong>Descripción:</strong> {{ producto.descripcion }}</p>
        <!-- Puedes agregar más campos de detalle si los tienes -->
        <button class="btn">Añadir al carrito</button>
        <br>
        <a class="btn-secondary" href="{% url 'catalog' %}">Volver al Catálogo</a>
    </div>
{% endblock %}

3.4. Estilos para product_detail

Agrega al archivo CSS (por ejemplo, en static/styles.css) el siguiente bloque para darle un estilo adecuado a la sección de detalle del producto:

/* Estilos para la vista de detalle del producto */
.product-detail {
    border: 1px solid var(--color-primary);
    padding: 20px;
    text-align: center;
    margin: 20px auto;
    max-width: 600px;
    background-color: var(--color-secondary);
}

.product-detail img {
    max-width: 100%;
    height: auto;
    margin-bottom: 15px;
}

.product-detail h2 {
    margin-bottom: 10px;
}

.product-detail p {
    margin: 10px 0;
    font-size: 18px;
}

---

Conclusión

En este tutorial has aprendido a:

• Mostrar productos destacados en la página de inicio:
  
  Se consultan los productos activos y destacados y se renderizan en index.html con los precios formateados a dos decimales y con separador de miles.

• Implementar un catálogo de productos con paginación mejorada:
  
  La vista catalog utiliza el objeto Paginator para dividir el listado de productos en páginas, y la plantilla catalog.html incluye botones para navegar hasta la primera y última página, además de los controles estándar.

• Crear una página de detalle de producto:
  
  Se ha implementado la vista product_detail junto con su URL y plantilla, para mostrar la información completa de un producto específico. Se ha añadido además un estilo específico para mejorar la presentación.

Estos pasos permiten que tu sitio de ecommerce ofrezca una experiencia de usuario dinámica, facilitando la navegación entre productos y proporcionando detalles completos de cada uno. ¡Sigue implementando mejoras para que tu proyecto sea cada vez más robusto y profesional!