Desarrollo de Ecommerce con Django (parte 2)

Este tutorial cubre los siguientes puntos:

• Carga de datos mediante archivos csv para las tablas existentes del ecommerce.
• Mostrar el catálogo de productos mediante plantilla de Django.

Paso 1: Carga de datos

• Descarga los datos iniciales (csv de categorías y productos, así como imágenes de productos) desde el siguiente enlace: Datos iniciales

• Una vez descargado el archivo zip, descomprímelo y copia la carpeta data/ en la raíz del directorio del proyecto. Del mismo modo copia las imágenes de los productos en la subcarpeta media/imagenes_prod/ del proyecto.

La estructura de directorios debería verse así:

ecommerce/
data/
├── categories.csv
├── products.csv
media/imagenes_prod
├── .jpg
├── .jpg
├── .jpg
├── ....
├── .jpg
store/
manage.py
poetry.lock
pyproject.toml

A continuación, crea una carpeta scripts/ en la raíz del directorio del proyecto. Puedes crear esta carpeta manualmente o hacerlo ejecutando el siguiente comando en tu terminal:

mkdir scripts

Vamos a hacer que la carpeta scripts/ sea un paquete de Python y luego crearemos los scripts para importar los datos a los modelos de Categoría y Producto mediante los archivos csv descargados.

• Dentro del directorio "scripts", crea el archivo especial __init__.py para convertir el directorio en un paquete.

• Luego, dentro del paquete "scripts", crea dos archivos Python: categoria_feeder.py y producto_feeder.py.

• Abre el archivo categoria_feeder.py y pega el siguiente código:
  

import csv
from store.models import Categoria

def feed_categorias():
    Categoria.objects.all().delete()

    with open('data/categories.csv') as csv_file:
        csv_dict_reader = csv.DictReader(csv_file, delimiter=';')
        for item in csv_dict_reader:
            categoria = Categoria(nombre=item['name'])
            categoria.save()
            print(f'Categoria creada: {categoria}')


def run():
    feed_categorias()

• Después, abre el archivo producto_feeder.py y pega el siguiente código:

import csv
from store.models import Producto, Categoria

def feed_productos():
    Producto.objects.all().delete()    

    with open('data/products.csv') as csv_file:
        csv_dict_reader = csv.DictReader(csv_file, delimiter=';')

        for item in csv_dict_reader:
            producto = Producto(nombre=item['name'],
                                descripcion=item['description'],
                                precio=item['price'],
                                imagen= 'imagenes_prod/' + item['image'],
                                activo=(True if item['is_active']=='VERDADERO' else False)
                                )
            producto.save()
            categoria = Categoria.objects.get(nombre=item['category_name'])
            producto.categorias.add(categoria)
            producto.save()
            print(f'Producto creado: {producto}')

def run():
    feed_productos()

Para poder ejecutar estos scripts debemos instalar el paquete "django-extensions". Debemos hacerlo ejecutando en la terminal del comando:

poetry add django-extensions

"django-extensions" es un complemento para el framework Django y por ello debemos agregarlo en la configuración de INSTALLED_APPS del proyecto. Abre el archivo ecommerce/settings.py y busca la lista INSTALLED_APPS. Añade la aplicación al final de esta lista. Debería verse así:

INSTALLED_APPS = [
    ...
    'django_extensions'
]

Una vez concluidos estos pasos procederemos a ejecutar los scripts para cargar los datos iniciales. En la terminal vamos a ejecutar:

poetry run python manage.py runscript categoria_feeder

poetry run python manage.py runscript producto_feeder

Si todo va bien deberíamos tener cargados los registros de categorías y productos en la base de datos PostgreSQL. Verifiquémoslo ejecutando el proyecto con:

poetry run python manage.py runserver

Y accede al administrador de Django en http://localhost:8000/admin.

Paso 2: Configuración de ruta raíz para renderizar los productos mediante una plantilla

• En la carpeta de la aplicación store vamos a crear el archivo para las rutas de la aplicación store/urls.py. Una vez creado procedemos a crear la ruta raíz:

from django.urls import path
from . import views

urlpatterns = [
    path('', views.home, name='home')
]

• Las rutas de la aplicación deben incorporarse a las rutas del proyecto. Por ello en el archivo ecommerce/urls.py incluiremos las rutas de la aplicación, así:

...
...

from django.urls import path, include

urlpatterns = [
    ...
    ...
    path('', include('store.urls'))
]

• Ahora procederemos a crear la función de vista "home". Para ellos en el archivo de vistas store/views.py, incorporamos:

from django.shortcuts import render
from store.models import Producto

def home(request):
    productos = Producto.objects.all()
    return render(request, 'index.html', {'productos': productos})

Esta función lo que hace es consultar en la base de datos todos los productos y luego los pasa a la plantilla index.html.

Para que la presentación de los productos surta efecto debemos crear la plantilla. Dentro del directorio de la aplicación crearemos una carpeta templates la cual será para manejar las plantillas. Podemos crear esta carpeta manualmente o hacerlo ejecutando el siguiente comando en tu terminal:

mkdir store\templates

Dentro de esta carpeta crearemos la plantilla (archivo) index.html con el siguiente código base:

{% load static %}
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Django Ecommerce</title>
    <link rel="shortcut icon" href="{% static 'img/icon.png' %}" type="image/x-icon">
</head>
<body>
  <h1>Lista de Productos</h1>
  <ul>
    {% for producto in productos %}
      <li>Producto: {{ producto.nombre }} - Precio: {{ producto.precio }}</li>
    {% endfor %}
  </ul>
</body>
</html>

Este layout está incorporando el uso de archivos estáticos, por lo cual debemos configurarlo en el proyecto.

Creemos la carpeta static en el directorio del proyecto.
Vamos a ir a ecommerce/settings.py para registrar la variable STATICFILES_DIRSde la siguiente manera:
STATICFILES_DIRS = (BASE_DIR / 'static',)

Para probar agreguemos una subcarpeta img donde guardemos imágenes como el favicon de la web.

Cuando necesitemos usar los archivos estáticos en una plantilla debemos incluir la directiva {% load static %} al inicio de la plantilla y para un archivo específico usamos {% static 'path_del_archivo' %}.

Finalmente procederemos a personalizar la presentación de la plantilla.

Da clic aquí para ir a la tercera parte de este tutorial.