Django-Oscar Bootstrap5

About

This is a personal project I have been doing for some months to build from scratch an online shop. I did a lots of work and I am not going to use it finally. For this reason, although is still unfinished, I public it here if someone is starting and want to use it.

You will need a few more months to finish all the development, configuration and have a very powerful online store.

In the following text I will explain what changes I did to the base project of Django Oscar and which funcionalities I added. At the end, you will find the things that still need to be done.

---

This project is an online shop, built with Django, leveraging the powerful e-commerce framework Django Oscar. Developed over several months, this project focuses on a highly customized user experience and robust backend functionality.

While django-oscar provides a solid foundation, significant effort has been invested in a complete visual redesign and front-end modernization:

[Django Cookie Cutter]

• Front-end Migration: Migrated the entire visual design from Bootstrap 4 to Bootstrap 5.
• Dashboard Redesign: All dashboard content has been meticulously redesigned for an improved administrative experience.
• JavaScript Refactoring: Completely removed all jQuery dependencies and refactored the entire JavaScript logic for a cleaner, more performant, and modern codebase.

The project adheres to best practices in Django development, utilizing a Django Cookiecutter structure for a well-organized and scalable foundation. It's built with containerization in mind, using Docker Compose for easy setup and deployment, and relies on PostgreSQL for robust data management.

A key feature implemented is the integration of django-modeltrans for internationalization of database content. This allows for translations of all customer-facing database values. To automate this process, a custom functionality has been developed: changes to _i18n values within the dashboard automatically trigger a signal that enqueues a task in Celery to translate these values into all configured languages using the DeepL API.

Features

• Full e-commerce functionality powered by Django Oscar.
• Modern, responsive design with Bootstrap 5. Dark mode available
• Completely jQuery-free JavaScript.
• Dashboard redesigned for enhanced usability.
• Almost all forms of dashboard replaced to use django-crispy-forms
• Multi-language support for database content via django-modeltrans.
• Automated DeepL API translation of dashboard-modified content.
• Containerized development and deployment with Docker Compose, perfect for a fast development.
• PostgreSQL database.
• Asynchronous task processing with Celery.
• TinyMCE for HTML edition, premium edition.
• Django-compressor used to compiler SCSS files and compress css and js
• Bootstrap5 componentns modified for a better UI
• Async engines working and ready, if you want to build some async part in the web.

Technologies and Libraries

This project leverages a comprehensive stack of modern web development technologies:

Core Frameworks & Libraries

• Django: The high-level Python web framework used for rapid development and clean, pragmatic design.
• Django Oscar: Version 4.
• Bootstrap 5: Version 5.3.
• Iconify: Biggest icon library.
• PostgreSQL: A powerful, open-source object-relational database system.
• Docker & Docker Compose: For containerization, allowing consistent development, testing, and deployment environments.
• Celery: An asynchronous task queue/job queue based on distributed message passing, used for background tasks like translations.
• Redis: An in-memory data structure store, used as a message broker for Celery and for caching.
• Solr: An open-source enterprise-search platform from the Apache Lucene project, used for product search.
• django-modeltrans: A Django package for translating model fields into multiple languages without creating separate translation models.
• DeepL API: Used for high-quality machine translation of content.
• Django-compressor: Used to compress static files and compile SCSS.
• django-tinymce: TinyMCE premium for free. All the code and API-KEY getter from oficial website.
• django-flatpickr: Used for create beatifull date widgets.
• django-crispy-forms: Used for create beatifull date widgets.
• Apex-charts.
• choices.js: implemented in django forms.
• django-debug-toolbar: Used for create beatifull date widgets.
• Much more

Changes made to django-oscar

I have mainly made changes to views and forms. Some more changes done to other parts for the integration of django-modeltrans fields in all the dashboard views.

The only change made to structure, as far as I can remember, has been to catalogue.apps. Made to change the index view to build a landing page and create another new view to show all-products, which is the one that is displayed in oscar by default.

Parts unfinished

Configuration

1. Change iconify to self-hosted.
2. Configure haystack and solr, or prefered engine for search.
3. Configure email service with mailpit
4. Configuration for production.
5. Sentry or email service for production

Development

1. Implement django-modeltrans to flatpages.
2. Deepl translation is sync and it is a problem for customers and admins performance. I tryed to change it using a celery task but due to a problem with solr or something didn't work. The celery version is into core/celery_version folder. You only have to override the files and try to resolve the problem.
3. Finish all the shop section. Is only done the layout structure but nothing more. Will be necessary to change the block tags in all templates, and change all the HTML, CSS... to the views. As I Have done to all dashboard views.
4. Implement django-allauth for a better authentication system, that allow registration with google, facebook. This is an important functionality in my opinion
5. Mail service is untested and unconfigured

Production

1. Configure static files to be hosted in a bucket (AWS, Digital Ocean...)
2. Configure Traefik.
3. Maybe use a managed database.

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

• Docker
• Docker Compose

Installation

1. Clone the repository:

   git clone https://github.com/alberto-765/Django-Oscar-Bootstrap5.git
   cd Django-Oscar-Bootstrap5

2. Set envionmnet variables:

   Change env/ folder to .env and set some necessary keys as DeepL

3. Build docker compose:

docker compose -f docker-compose.local.yml up -d --build

3. Execute commands in django container:

docker compose -f docker-compose.local.yml exec django bash
export DATABASE_URL="postgres://${POSTGRES_USER}:${POSTGRES_PASSWORD}@${POSTGRES_HOST}:${POSTGRES_PORT}/${POSTGRES_DB}"

4. Play

Galery of the project

Dashboard index view:

Dashboard sidebar:

ChoicesJS implementation:

Flatpickr implementation:

ShorteableJS implementation:

Products view:

Options view:

Categories view:

Product types view:

Dark mode:

Debug toolbar:

Shop index view:

Shop cart view: