Forem

Cover image for Desarrollo de Ecommerce con Django (parte 2)
Gabriel Villacis
Gabriel Villacis

Posted on • Edited on

Desarrollo de Ecommerce con Django (parte 2)

#webdev #django #csv #python

En esta parte del tutorial aprenderás a:

  • Utilizar variables de entorno para manejar datos sensibles (por ejemplo, SECRET_KEY, credenciales de base de datos, etc.).

  • Cargar tus datos iniciales (categorías, productos, etc.) usando un fixture.

  • Crear rutas y vistas para tu ecommerce, incluyendo una página principal y un menú que enlace a secciones como Productos, Carrito, Contacto, etc.

  • Implementar herencia de plantillas de Django para un diseño coherente y fácil de mantener.

  • Usar archivos estáticos (CSS, favicon) para mejorar la apariencia de tu sitio.

Paso 1: Configuración de Variables de Entorno con django-environ

Para manejar valores sensibles o variables que cambian según el entorno (desarrollo, producción, etc.), es recomendable usar variables de entorno. En Django, podemos apoyarnos en el paquete django-environ.

Instalar django-environ

En la raíz de tu proyecto, ejecuta:

poetry add django-environ
Enter fullscreen mode Exit fullscreen mode

Esto agregará la dependencia en tu archivo pyproject.toml.

Crear un archivo .env

En la misma carpeta donde se encuentra tu archivo manage.py, crea un archivo llamado .env y define las variables de entorno que desees utilizar. Por ejemplo:

SECRET_KEY=mi-clave-secreta-12345
DEBUG=True
DATABASE_HOST=localhost
DATABASE_PORT=5432
DATABASE_NAME=ecommerce
DATABASE_USER=postgres
DATABASE_PASS=mipassword
Enter fullscreen mode Exit fullscreen mode

Importante: Añade el archivo .env al archivo .gitignore para evitar subir información sensible a tu repositorio. Para generar una SECRET_KEY puedes utilizar el sitio: Djecrety

Configurar settings.py para leer las variables

En tu archivo ecommerce/settings.py, justo al inicio, agrega:

import environ

# Inicializa django-environ
env = environ.Env()
env_file = BASE_DIR / '.env'
if env_file.exists():
    environ.Env.read_env(str(env_file))

# Ahora, reemplazamos los valores "hardcodeados" con variables de entorno:
SECRET_KEY = env('SECRET_KEY')
DEBUG = env.bool('DEBUG', default=True)

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql',
        'NAME': env('DATABASE_NAME'),
        'USER': env('DATABASE_USER'),
        'PASSWORD': env('DATABASE_PASS'),
        'HOST': env('DATABASE_HOST', default='localhost'),
        'PORT': env('DATABASE_PORT', default='5432'),
    }
}

# Resto de la configuración permanece igual...
Enter fullscreen mode Exit fullscreen mode

Con esta configuración, si .env existe, Django tomará los valores de ahí; si no existe o alguna variable no se define, usará los valores default.

¡Listo! Con esto, tu proyecto estará leyendo variables de entorno.

Paso 2: Carga de Datos Iniciales mediante Fixtures

Django permite poblar la base de datos con datos iniciales a través de fixtures. Un fixture es un archivo (por defecto, JSON o YAML) que contiene una lista de objetos con sus campos.

Descargar datos iniciales

Descarga los datos iniciales (fixture y archivos de imágenes) desde el siguiente enlace: Datos iniciales

Estructura de archivos
Al descomprimir, encontrarás una carpeta con los archivos de imágenes y el fixture. Por ejemplo, el archivo del fixture se llamará initial_data.json. Organiza tu proyecto de manera que el directorio quede más o menos así:

ecommerce/
├── store/
│   ├── fixtures/
│   │   └── initial_data.json
│   ├── templates/
│   └── ...
├── media/
│   └── imagenes_prod/
│       ├── producto1.jpg
│       ├── producto2.jpg
│       └── ...
├── manage.py
├── poetry.lock
├── pyproject.toml
Enter fullscreen mode Exit fullscreen mode

Cargar el fixture

Para cargar los datos en la base de datos, utiliza el comando:

   poetry run python manage.py loaddata initial_data.json
Enter fullscreen mode Exit fullscreen mode

Esto buscará el archivo en la carpeta store/fixtures y creará los registros (por ejemplo, categorías, productos) en tu base de datos.

Verificar datos

Inicia el servidor de desarrollo y verifica en http://localhost:8000/admin si los datos fueron cargados correctamente:

   poetry run python manage.py runserver
Enter fullscreen mode Exit fullscreen mode

Paso 3: Gestión de URLs y Páginas con Menú de Navegación

Ahora configuraremos varias rutas para tu ecommerce, cada una renderizando su propia plantilla. Además, crearemos una plantilla base para la herencia y un menú de navegación que aparecerá en todas las páginas.

Estructura de plantillas

Dentro de la aplicación store, crea una carpeta templates/.

Vamos a tener las siguientes plantillas:

  • base.html (plantilla base con el encabezado, menú, footer, y un bloque para contenido).
  • index.html (página de inicio).
  • catalog.html (listado de productos).
  • cart.html (carrito de compras).
  • contact.html (formulario de contacto).
  • signup.html (registro de usuario).
  • signin.html (inicio de sesión).

Plantilla base.html 

{% load static %}
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EELA Ecommerce - {% block title %}{% endblock %}</title>
    <meta name="keywords" content="Tienda en línea, Ecuador">
    <meta name="author" content="Gabriel Villacis">
    <link rel="stylesheet" href="{% static 'styles.css' %}">
    <link rel="shortcut icon" href="{% static 'img/favicon.ico' %}" type="image/x-icon">
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
</head>
<body>
   <header class="main-header">
        <div class="container">
            <div id="brand">
                <h1>EELA Ecommerce</h1>
            </div>
            <nav>
                <ul>
                    <li><a href="{% url 'home' %}">Inicio</a></li>
                    <li><a href="{% url 'catalog' %}">Productos</a></li>
                    <li><a href="{% url 'cart' %}">Carrito</a></li>
                    <li><a href="{% url 'contact' %}">Contacto</a></li>
                    <li><a href="{% url 'signup' %}">Registrarse</a></li>
                    <li><a href="{% url 'signin' %}">Iniciar Sesión</a></li>
                </ul>
            </nav>
        </div>
   </header> 
   <main>
       <div class="container">
           {% block main_content %}
           {% endblock %}
       </div>
   </main>
   <footer>
       <p>&copy; 2025 EELA Ecommerce - Todos los derechos reservados</p>
   </footer>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Observa que:

  • Usamos {% load static %} para poder incluir archivos estáticos (CSS, favicon).
  • Definimos dos bloques: {% block title %} y {% block main_content %}.
    • title permitirá cambiar el título de la pestaña en cada página.
    • main_content contendrá el contenido específico de cada página.

Páginas que heredan de base.html

index.html (Inicio)

{% 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">
          <div class="product-card">
              <img src="https://placehold.jp/ffffff/000000/150x150.png" alt="Producto destacado 1">
              <h3>Producto destacado 1</h3>
              <p>$9.99</p>
              <button class="btn">Añadir al carrito</button>
          </div>
          <div class="product-card">
              <img src="https://placehold.jp/ffffff/000000/150x150.png" alt="Producto destacado 2">
              <h3>Producto destacado 2</h3>
              <p>$89.05</p>
              <button class="btn">Añadir al carrito</button>
          </div>
          <div class="product-card">
              <img src="https://placehold.jp/ffffff/000000/150x150.png" alt="Producto destacado 3">
              <h3>Producto destacado 3</h3>
              <p>$199.85</p>
              <button class="btn">Añadir al carrito</button>
          </div>
      </div>
  </section>
{% endblock %}
Enter fullscreen mode Exit fullscreen mode

catalog.html (Productos)

{% extends 'base.html' %}

{% block title %}Catálogo{% endblock %}

{% block main_content %}
  <h2>Nuestro Catálogo de Productos</h2>
  <p>Aquí listaremos los productos que obtengamos desde la base de datos.</p>
{% endblock %}
Enter fullscreen mode Exit fullscreen mode

cart.html (Carrito)

{% extends 'base.html' %}

{% block title %}Carrito{% endblock %}

{% block main_content %}
  <h2>Carrito de Compras</h2>
  <p>Aquí mostraremos los productos que el usuario ha agregado a su carrito.</p>
{% endblock %}
Enter fullscreen mode Exit fullscreen mode

contact.html (Contacto)

{% extends 'base.html' %}

{% block title %}Contacto{% endblock %}

{% block main_content %}
  <h2>Contacto</h2>
  <p>Aquí mostraremos el formulario de contacto.</p>
{% endblock %}
Enter fullscreen mode Exit fullscreen mode

signup.html (Registrarse)

{% extends 'base.html' %}

{% block title %}Registrarse{% endblock %}

{% block main_content %}
  <h2>Formulario de Registro</h2>
  <p>Aquí mostraremos el formulario de registro.</p>
{% endblock %}
Enter fullscreen mode Exit fullscreen mode

signin.html (Iniciar Sesión)

{% extends 'base.html' %}

{% block title %}Iniciar Sesión{% endblock %}

{% block main_content %}
  <h2>Inicio de Sesión</h2>
  <p>Aquí mostraremos el formulario de inicio de sesión.</p>
{% endblock %}
Enter fullscreen mode Exit fullscreen mode

Configurar las rutas en urls.py

En store/urls.py, define las rutas para cada una de estas páginas:

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'),
]
Enter fullscreen mode Exit fullscreen mode

Luego, en ecommerce/urls.py, incluye las rutas de store:

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('store.urls')),  # Ruta raíz
]
Enter fullscreen mode Exit fullscreen mode

Crear las vistas en views.py

En store/views.py, define las funciones que renderizarán cada plantilla:

from django.shortcuts import render

def home(request):
    return render(request, 'index.html')

def catalog(request):
    return render(request, 'catalog.html')

def cart(request):
    return render(request, 'cart.html')

def contact(request):
    return render(request, 'contact.html')

def signup(request):
    return render(request, 'signup.html')

def signin(request):
    return render(request, 'signin.html')
Enter fullscreen mode Exit fullscreen mode

Cada vista retorna la plantilla correspondiente.

Paso 4: Archivos Estáticos (CSS, favicon)

  • Crear carpeta static Dentro de la carpeta principal del proyecto, crea una carpeta llamada static. Por ejemplo: 
   ecommerce/
   ├── static/
   │   ├── img/
   │   │   └── favicon.ico
   │   └── styles.css
   ...
Enter fullscreen mode Exit fullscreen mode
  • Registrar STATICFILES_DIRS en settings.py Asegúrate de tener algo como esto en tu settings.py: 
   STATIC_URL = 'static/'
   STATICFILES_DIRS = [
       BASE_DIR / 'static',
   ]
Enter fullscreen mode Exit fullscreen mode
  • Crear tu archivo styles.css En la carpeta static/, crea styles.css con tus estilos: 
   /* CSS Variables */
   :root {
     --color-primary: #2c3e50; /* Deep Navy */
     --color-secondary: #f9f7f7; /* Soft White */
     --color-accent: #e67e22;
   }

   /* Reset default styles*/
   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }

   /* etc... */
Enter fullscreen mode Exit fullscreen mode
  • Uso del favicon Coloca tu favicon (favicon.ico) dentro de static/img/. La referencia en base.html ya está configurada: 
   <link rel="shortcut icon" href="{% static 'img/favicon.ico' %}" type="image/x-icon">
Enter fullscreen mode Exit fullscreen mode

Recuerda: Para que Django sirva estos archivos en modo desarrollo, necesitas incluir django.contrib.staticfiles en INSTALLED_APPS (que ya viene por defecto).

Conclusión

En este tutorial has aprendido:

  1. Cómo configurar variables de entorno usando django-environ para que tu aplicación sea más segura y flexible.

  2. Cómo cargar datos iniciales a través de fixtures (loaddata) en lugar de scripts personalizados.

  3. Cómo gestionar múltiples páginas en tu ecommerce usando rutas (urls.py) y vistas (views.py), implementando un menú de navegación.

  4. Cómo aplicar herencia de plantillas (base.html) para mantener un diseño coherente en todas las páginas.

  5. Cómo configurar y utilizar archivos estáticos (CSS, favicon) para darle estilo a tu aplicación.

Top comments (0)

Read next

jhk_info profile image

Next JS vs React Performance: A Comprehensive Comparison

JHK infotech -

dpc profile image

Daily JavaScript Challenge #JS-73: Validate Palindrome Permutation

DPC -

midhunkrishnan profile image

Installing your react.js local package registry to your project

Midhun Krishnan R -

chris_devto profile image

Scandinavian Airlines were fined $100,000 for accessibility bugs

Chris -