Django Oscar - CMS
11 July, 2022 by
Tanseer Ahmed

CASE STUDY

An eCommerce application called Django oscar CMS was created using Django Oscar and Django CMS. The backend framework for this project is Django Oscar, which manages all backend capabilities and operations. Django CMS is a front-end content management system that enables users to manage and publish different kinds of material on the pages.

Utilize the top Open Commerce Platforms Django Oscar and Django CMS to create the Exceptional.

Tech Stacks

Applications: Python, XML, jQuery, and CSS 

Backend technology: Django CMS and Django Oscar

Server Configuration: Nginx, Python3, Postgresql

Powers of Django Oscar

  • Any class can be extended, replaced, and has an extensible core. No workarounds are necessary thanks to this essential feature, which enables every project to be accurately documented in the codebase.

  • A well-designed collection of models that drew from the knowledge gained from numerous e-commerce initiatives, both big and small.

  • Detailed information that includes methods for resolving common issues.

  • A long list of tests.

Powers of Django CMS

The well-proven CMS platform Django CMS is used to power both big and small websites. Here are a few of the salient characteristics:


Strong support for internationalization (i18n) when building multilingual sites


Fast access to the content management interface using front-end editing

Support for a range of text editing programs with sophisticated features.

A flexible plugin system that enables developers to provide editors access to sophisticated tools without overloading them with a challenging interface and a lot more.

Although there are other capable Django-based CMS solutions, here are some reasons to think about Django CMS:

  • Complete documentation

  • Django CMS isn't a monolithic application, making it simple and thorough to integrate into existing projects.

  • A vibrant, engaged, and helpful developer community

  • A culture of good coding that places a significant focus on automated testing

  • Imagine what happens when the most effective domain-driven eCommerce solution (Django Oscar) is coupled with the most effective CMS (Django CMS)

In this case study, we'll look at a Django Oscar CMS project that Ewall Solutions created and tailored. Several features and plugins were specially created and added to the Django Oscar as well as Django CMS.

Additionally, this project is an independent one from Ewall Solutions that has not yet gone live! So let's go right to the case study.

What is Django?

High-level Python web framework Django promotes rapid development and streamlined practical design. It was created by seasoned programmers and handles a lot of the hassle associated with web development, freeing you up to concentrate on building your app without having to invent the wheel. It is open-source and free.

What is Oscar?

A Django/Python framework called Oscar is used to create domain-driven websites with complex business logic. Oscar provides a thorough user interface and a variety of working models that were developed using knowledge from both big and small e-commerce businesses.

What is CMS?

A content management system is referred to as CMS. When creating a website, a content management system, or CMS, can be used to manage all material utilizing a database.

What is Django CMS?

Built using Django, the web application framework "for perfectionists with deadlines," Django CMS is a cutting-edge web publishing platform. Django CMS provides out-of-the-box support for the typical CMS capabilities you'd expect, but it can also be easily customized and expanded by developers to build a site that is suited to their specific requirements.

The example study shown here is one of our own projects, and the following list includes a few of the changes made using the Django CMS and Django Oscar. The Django Oscar is used for all backend procedures, and the Django CMS is used for all frontend processes, thus a few tweaks are made to ensure that the website runs smoothly.

Below is a collection of a few of the adaptations made to Django Oscar and Django CMS.

Customizations with Django CMS

Users with a CMS role are able to add new pages and CMS plugins using Django CMS. For developing static web pages and utilizing Django oscar capabilities in Django CMS, a few lists of plugins are offered

  • Django CMS Text CKEditor

  • Django CMS Picture

  • Django CMS History

  • Django CMS Bootstrap 4

  • Django CMS Link

  • Django CMS Icon

  • Style

  • Product cards

  • EWallet

  • Header Plugin

    • Main Menu

      • Sub Menu

  • Footer Plugin

  • Login Plugin

  • Product list page

  • Product detail page

    • Recommended products page

  • Shopping cart page

  • Checkout Address page

  • Checkout Shipping Methods Page

  • Checkout Payment Methods Page

  • Checkout Preview Page

  • Order

  • Wishlist

  • Personal Info

  • Address Menu

  • Product search page

Django CMS Plugins

Django CMS Text CKEditor: A ready-to-use HTML text editor called Django CMS Text CKEditor was created to make it easier to create web content. It is a WYSIWYG editor that seamlessly integrates functionality from word processors into your web pages. Utilize our community-maintained editor to improve your website experience. This package seeks to incorporate CKEditor as a text plugin into Django CMS.

CMS Text CKEditor


Drag & Drop Images

You can drag and drop a picture into the text editor on browsers built on the IE and Firefox platforms. This image is base64 encoded and is stored as a "data" tag in the "source" property. These photos are identified, encoded, and transformed into picture plugins.

Auto Hyphenate Text 

The text entered into the editor can be hyphenated such that the HTML entity ­ (soft-hyphen) is appended automatically in between words, at the proper syllable boundary. Additionally, Django-softhyphen installs dictionaries for hyphenation in 25 different languages.

Django CMS Picture: You can upload photographs to your website using the Django CMS Picture plugin for the platform. Keep in mind that the offered templates are intentionally very simple. You are urged to modify and override them to suit the needs of your project.


The system will, in preference, utilize the following values for determining the sizes of the image:

  1. the Thumbnail choices' set width or height

  2. Automatically scale 

  3. the Height and Width

Django CMS History: By preserving a content history, the Django CMS History add-on application allows Django CMS to offer to undo/redo capabilities.

This program has certain features that were previously present in Django CMS. But it soon became clear that some consumers didn't want it and preferred alternative capabilities. History management was taken out of Django CMS in version 3.4 and spun off into a standalone application, adhering to the Django CMS ethos of retaining the core CMS functionality as part of the package itself.

The online content management will have access to new choices thanks to Django CMS History. The Django CMS toolbar will display these while managing content that the program supports.

Django CMS Bootstrap 4Drupal CMS The popular Bootstrap 4 library is available as part of the Bootstrap 4 plugin bundle for the Django Content Management System.

The following Django cms plugins are used by Django cms bootstrap 4:

  1. Django CMS Link

  2. Django CMS Picture

  3. Django CMS Icon

It Provides the following Bootstrap 4 components:

Django CMS Bootstrap 4 does not add the styles or javascript files to your front end, these need to be added at your discretion.

Django CMS Links:  You can add links to your website using the Django CMS Link plugin for Django CMS. Child plugins are supported by this plugin. The content of the link will be this instead of the link name if you add another plugin as a child.


Django CMS Icon:  Django CMS Icon is a plugin for Django CMS that allows you to insert an icon (font or SVG) into your project.

Django CMS Video: You can post video material on your website using the Django CMS Video set of plugins (using an HTML5 player by default, but you can override this in your own templates if required).
Django Filer is used to manage files.


Django Filer:  A file management tool for Django called Django Filer makes it simple to handle files and images.


Django CMS Style:  To generate an HTML container with classes, styles, ids, and other properties defined through the plugin's settings, use the Django CMS Style plugin for Django CMS


Django Oscar

Oscar's expandable core is among its greatest benefits. A framework's functionality can be modified in any way, and any class can be substituted or overwritten. With the help of this function, Oscar is able to meet any business requirements and swiftly and effectively resolve challenging e-commerce problems.

  • Support for multiple product types: subscriptions, variant products (different sizes or colors), dynamically priced (prices are provided by an external service), downloadable, customizable (adding customer’s design), digital, multilingual products, and categories.

  • Support any product number contained in large catalogs. There are production websites with more than 20 million products.

  • Support for various sales offers multi-buys, bundles, coupons, vouchers, etc.

  • A large set of advertisement blocks for visual merchandising throughout the website.

  • Complex order processing support, the possibility of split payment orders, multi-batch shipping, order status pipelines, etc.

  • Extensive range of payment sources (bank card, voucher, gift card, business account) and gateways (PayPal, GoCardless, DataCash, etc.).

  • Hierarchy of customers, sales reps, and sales directors and well-designed access control rules that manages who can view and order what.

Customizations for Django Oscar

Few of the Django Oscar plugins used are listed below

  1. Product cards

  2. EWallet

  3. Header Plugin

    1. Main Menu

      1. Sub Menu

  4. Footer Plugin

  5. Login Plugin

  6. Product list page

  7. Product detail page

    1. Recommended products page

  8. Shopping cart page

  9. Checkout Address page

  10. Checkout Shipping Methods Page

  11. Checkout Payment Methods Page

  12. Checkout Preview Page

  13. Order

  14. Wishlist

  15. Personal Info

  16. Address Menu

  17. Product search page

Django CMS Plugins for Oscar

Product card plugin:  Users can display the Oscar items in the Django CMS pages by using the Product Card Plugin. This plugin allows us to display product cards wherever on CMS pages, and it is connected to the product description page.


Plugin Configurations

  • Products per Column: It allows users to select the number of cards to be shown on each column.

  • Category: This shows all the categories in Django oscar and is used to filter the products below based on the selected category.

Products: Based on the category the products are filtered and shown in the Available products section. We can choose the products to be listed on the CMS page and they will be shown in the Chosen products section.

 

Wallet Plugin:  Using the wallet plugin, customers can add money to their virtual e-wallet account on the e-commerce site and use that money to make payments. For accounting purposes, every transaction is recorded.


Header Plugin:  All CMS pages' headers are configured using the Header Plugin. Once we use this plugin on a page, the header will show up on all pages. The plugin configurations allow for complete customization of everything in the menu. The main menu has a submenu called Sub Menu, and the header plugin has a submenu called Main Menu.


Plugin Configurations:

  • Show boolean fields: The visibility of the logos, menus, and icons can be controlled using the boolean fields. 

  • Logo Image: Allows users to change the logo image dynamically in the header.

  • Navigation Pages setup: The icons and links in the header are fully customizable. There are CMS pages listed in the choice fields that will be used to navigate to other pages.

Main Menu Plugin:  Only the header plugin has the Main Menu plugin, which will display its menu following the Oscar main category menus

Plugin Configuration:
Main Menu: The selected page title will be added to the header menu.

Sub menu Plugin:  The main menu plugin and another sub-menu both contain the Sub Menu plugin. The main menu and another sub-menu both have this sub-menus.

Plugin Configuration:
Sub Menu: The selected page title will be added inside the main or sub-menu based on usage.

  

Footer PluginThe Footer plugin will show up on all CMS plugins, much like the Header plugin does. This plugin was used to set the footer for every CMS page. Users can change the site's currency by selecting the multi-currency option at the bottom.

Plugin Configurations:

  • Show boolean fields: The visibility of the logos, menus, and icons can be controlled using the boolean fields. 

Logo Image: Allows users to change the logo image dynamically in the footer.

  

Login and Registration Plugin:  Register and Login The user's credentials can be used to create and sign in to an account using a plugin. Following the user's submission of their values, the data types are validated. If the validation is successful, we will be taken to the home page; otherwise, an error message will appear at the bottom of the fields.

Plugin field Configuration

  • Terms & Conditions Page: Used to assign the redirect URL for the Terms & Conditions in the Registration Section

Privacy and Cookies Policy Page: Used to assign the redirect URL for the Privacy and Cookies Policy in the Registration Section  


Product list plugin:   The filter and list sections of the Product List Plugin contain a list of all the products in a specific category. The variance we utilized in the products is where the filter values and counts are dynamically fetched from. The per-page count and sort by options are likewise located at the top of the list page.

Product Quick buy View

The eye icon in the product card opens a quick buy view and users can buy or view the product descriptions without navigating to the product detail page.

 

Plugin Field Configurations

  • Show boolean fields: The visibility of the sort by and per page count can be controlled using the boolean fields. 

Navigation Pages setup: The icons and links in the header are fully customizable. There are CMS pages listed in the choice fields that will be used to navigate to other pages.

Product detail Plugin:  Product reviews and a thorough description are included with the Product Detail Plugin. Only when the consumer has paid for the item and received it may they leave a review.

Plugin Field Configurations

Navigation Pages setup: The icons and links in the header are fully customizable. There are CMS pages listed in the choice fields that will be used to navigate to other pages


Recommended Products Plugin:  The list of recommended items defined on the Oscar for that specific product is displayed by the Recommended Products Plugin, which is accessible inside the Product Detail Plugin

Shopping cart plugin:  The user has the ability to update and remove products from the shopping cart, and the shopping cart plugin stores all the things that have been put in the cart. Additionally, consumers are presented with offers based on newly added products at the top of the page. The Oscar user creates the coupons, which can be applied to a purchase.

 

Plugin Field Configurations
Navigation Pages setup: The icons and links in the header are fully customizable. There are CMS pages listed in the choice fields that will be used to navigate to other pages.

Checkout Address page plugin:  All of the shipping and billing addresses that are available to users are listed on the Checkout Address page. The checkout page allows us to add, modify, and remove addresses.



Checkout Shipping method Plugin: All of the shipping options are listed by name, description, and cost on the Checkout Shipping Method page. Users can choose from a range of shipping options.

The Bottom Line

Why Django Oscar CMS? Why not?

The greatest option for a customized online store is the integration of Django Oscar and Django CMS, to which many other custom plugins may be added on both the front end and the back end.

One of Ewall's best and most inventive projects, the e-commerce website used as a case study in this article is also a stand-alone project without any consumer needs. As you can see from this post, Ewall excels in many areas, including CRM and CMS services, in addition to ERP. Techs used in this project include

Applications: Python, XML, jQuery, and CSS 

Backend technology: Django CMS and Django Oscar

Server Configuration: Nginx, Python3, Postgresql  
Tanseer Ahmed 11 July, 2022
Share this post
Archive