by Charles Ouellet
How to build an e-commerce shop with Python, Django, & Wagtail
“D-J-A-N-G-O. The D is silent.”
Man, I love that line. So badass.
But the eponymous character from Quentin Tarantino’s masterpiece isn’t the only badass Django in town.
So is the popular Python framework of the same name.
In this post, I’ll answer legitimate questions you might have when starting a new e-commerce project, such as:
Is Python the right language for my project? And Django the right framework? Which tools or plugins should I use?
Then, I’ll show you our homemade recipe for Django-powered e-commerce success with a step-by-step Wagtail CMS tutorial:
- Creating a new Wagtail site.
- Adding Snipcart configuration settings.
- Generating database migrations.
- Creating new products for your Django store.
- Crafting an e-commerce template.
Let’s start with the basics.
The State of Python
One of the main reasons to pick Django as a framework is its Python foundation.
A general purpose, dynamic programming language, Python was developed by ex-Googler Guido van Rossum in the late 80’s. A fan of Monthy Python, he took one-half of the name to baptize his programming project.
He wasn’t joking though. To say that Python has become “popular” is an understatement.
Today, it’s used by hundreds of thousands of developers all over the world. As StackOverflow puts it:
The term “fastest-growing” can be hard to define precisely, but we make the case that Python has a solid claim to being the fastest-growing major programming language.
A few reasons explain the Python love:
- Its grammatical readability is awesome.
- It has a fast learning curve for newcomers.
- It boasts a long-lasting, solid ecosystem of libraries & community
- It’s now the standard language for data science & machine learning.
- It powers great dev tools like Pelican, a neat static blog generator.
- Reddit is written in Python. ;)
What about the Django framework?
Django is an open source, high-level Python web framework. Its emphasis on reusable components makes it faster for developers to build web apps on top of Python. It presents itself as a web framework for perfectionists with deadlines.
Now maintained by the Django Software Foundation, it was originally written by two brilliant Lawrence Journal-World developers. Oh, and while Python draws its name from comedy icons, Django got his from a versatile guitar legend: Django Reinhardt!
As a full-stack framework, it overshadows pretty much any alternative tool out there. It’s fast, fully loaded, secure, scalable & versatile. All characteristics you’ll probably want to apply to your e-commerce setup!
Why use Django for e-commerce?
While you can do a lot with Django, let’s keep the focus on what it brings to e-commerce and the different tools available to put together an online store.
First, here are some Django features to consider if you’re looking for the right framework to build a shop.
Django is perfect for e-commerce startups, as it’s a good fit for small websites, but also has scales perfectly with business growth. You can rely on Django to handle hundreds/thousands of visitors at a time. It’s built with independent components you can unplug or replace depending on your needs at any specific time.
With e-commerce, you want to make sure merchants and clients alike feel safe through your shopping experience. Django prevents a whole lot of common security mistakes which often are what weakens traditional PHP CMSs. For instance, Django hides your site’s source code from direct viewing on the web by dynamically generating web pages.
Compared to most frameworks, Django comes with way more features out-of-the-box. It allows you to build an app right off the bat. Perfect for supporting your online store with functionalities such as user authentification, content management or RSS feed. If something seems to be missing, you can count on Django’s community and plugins ecosystem to extend your app!
Oh and also, it’s fast. Which is always great for both customer experience and SEO.
It has been crowd-tested for a while now, and the community surrounding it is largely supportive. It’s continuously updated by active developers; maybe you’ll even find yourself contributing. ;)
There are a few noteworthy e-commerce solutions in the Python/Django ecosystem:
- Oscar — Domain-driven e-commerce for Django, open-source.
- Saleor — An e-commerce storefront written in Python, open-source.
- Django-SHOP — A Django based shop system.
- Shuup — A single and multi-vendor application.
You can explore more options through this extensive list of the best e-commerce packages.
Now let me present you another cool stack for a complete and custom e-commerce setup with Django.
Wagtail CMS + Snipcart e-commerce setup
In the following Wagtail tutorial, the CMS will be in charge of creating and managing products that users will then be able to buy through a shopping cart.
By the end of it, you’ll have a solid Django-powered e-commerce site up and running.
Let’s get practical!
Django e-commerce tutorial with Wagtail CMS
To continue with the movie references and because we’re working in Python, I’ll craft a Slytherin demo shop! Let’s see how it goes.
- A Snipcart account (forever free in test mode)
- Basic knowledge of Python
1. Creating a new Wagtail e-commerce site
Make sure you have Wagtail installed. If not, refer to their installation documentation.
Open a terminal and launch a new Wagtail site:
We have an extra step to complete the Wagtail setup, and it’s to install the
wagtail.contrib.settings plugin that we'll require later on.
In your new Wagtail project, open the
base.py file located in
settings folder. Then, add
wagtail.contrib.settings to the
1.1 Models definition
The first thing you need to do is create your Page models. Wagtail uses these Django models to generate a page type.
models.py file located in the
home folder of your product. This is where you'll define all your custom models.
Create two different models:
Product: defines the product you're selling.
ProductCustomField: defines a single product custom field.
Let’s begin by importing required modules:
Now add the
2. Adding Snipcart configuration settings
Let’s make sure you can update the Snipcart API key directly from Wagtail’s dashboard. You’ll need to add site settings to do so.
Site settings are special fields that you can add to your models file. They’ll appear in the Wagtail Settings section of the dashboard.
Import this module:
Then add these:
3. Database migrations
Now that your models are created, you’ll need to generate database migrations and run them.
In your terminal, use the
You should see the following output:
Once the migrations are generated, apply them on your database with the
It will take a couple of seconds; Wagtail will set up its own database schema along with the models you just defined.
Finally, create your first CMS user with the
Don’t forget the username and password you picked — you will need them to log into Wagtail’s dashboard.
4. Creating products
Start by firing up your dev server with the Django dev server command:
Now open your browser and navigate to:
http://localhost:8000/admin. Use the credentials you set up earlier to log in.
Home page in Wagtail's menu. Then click on the
Add child page button.
You’ll be asked to pick a type of page, select
Enter the product details, then publish your new product:
You can create as many products as you wish.
4.1 Adding Snipcart API key
SnipcartSettings class you created? You'll be able to configure your API key by expanding the Settings menu and going to Snipcart settings.
Open Snipcart’s dashboard and get your public API key (Test or Live). Go back to Wagtail and paste it in the API key field.
Save your settings.
Your backend is now ready, your API key is configured, and your first products are created. Time to start building the site.
For this demo, I decided to use Spectre.css CSS framework. It’s straightforward and lightweight.
base.html file located in
You’ll need to add references for Spectree.css and Snipcart. Add these lines in the
head of your document:
The Snipcart API key that you configured previously is available via:
Then, add the navbar and some other
Spectre.css layout elements.
Replace the content of the whole
body by these lines:
5.1 Listing products
The first template you need is your index, where products will be listed.
You’ll have to make your products available in your home page context. In any Wagtail Page, you can override a method name
You can add the data that the view will receive in parameters. In my case, I want to set the
products context variable.
models.py file in
home folder and update the
Then, open the
home_page.html file located in the
Let’s create a simple page that will show each product image with a link to the product details.
5.2 Product details
The last template is the one showing individual product details along with the Snipcart buy button.
Also, it would be nice to be able to select product options directly on this page, before adding it to the cart. So I’ll add a way to choose all custom fields with options directly in the template.
Before writing some HTML, you have to update the view context. Django templates don’t give us 100% access to all Python methods and objects, so things like splitting a string do not work very well.
I decided to override the
get_context method again. Maybe there's a better way to do that—let me know in the comments below! ;)
models.py from the
home folder and add this method in the
custom_fields array will be available in the
Create a file named
home/templates/home folder. This is the template that will be associated with the
Product page model.
Add the following
script snippet before the
This code updates the button data attributes when the
select value changes.
If you click on the
+ button beside any product, you should see its details:
You now have pretty strong foundations to start your e-commerce project using Django and Wagtail!
These frameworks are very powerful. You could quickly add some search functionalities, product suggestions, reviews, etc.
Live demo & GitHub repo
See the live demo
See the GitHub repo
I really enjoyed working with Wagtail, as it’s simple and intuitive. I have to say that their documentation feels incomplete at times, though. At first, I wanted to make some changes on how routing would work and haven’t found anything in their docs about that.
I didn’t have Python installed on my laptop at the start, so setting up everything and having this demo up and running took me about a day, including hosting the demo. I figure it would be way faster for avid Python developers!
For further exploration, I think Wagtail could be a great headless CMS, especially with their built-in API. I think it could be cool to leverage it and strap it to tools like Nuxt or Gatsby to handle the front end.
Maybe another time! ;)
If you’ve enjoyed this post, please take a second to share it on Twitter. Got comments, questions? Hit the section below!
Originally published at snipcart.com.