How to build an e-commerce shop with Python, Django, & WagtailCharles OuelletBlockedUnblockFollowFollowingFeb 7Photo by Hitesh Choudhary on Unsplash“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.
Today, I’m leaving the realm of JavaScript frameworks for a quick venture into Django e-commerce.
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 PythonOne 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 & communityIt’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.
→ ScalabilityDjango 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.
→ SecurityWith 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.
→ Feature-richCompared 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!→ SEO-friendlySEO is paramount for any online business.
While other frameworks don’t natively play well with search engines (mainly JavaScript frameworks, like Vue or React), at least Django advocates best practices for SEO.
Human-readable URLs and sitemap features are sure to please any marketing team.
Oh and also, it’s fast.
Which is always great for both customer experience and SEO.
→ ReliableIt 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 setupWagtail is a developer-first Django content management system.
Free and open source, it was developed by the good-hearted folks at Torchbox.
It’s elegant, flexible, and, IMHO, kicks ass.
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 CMSTo 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.
Pre-requisitesA Snipcart account (forever free in test mode)Basic knowledge of Python1.
Creating a new Wagtail e-commerce siteMake 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 INSTALLED_APPS array.
1.
1 Models definitionThe first thing you need to do is create your Page models.
Wagtail uses these Django models to generate a page type.
Open the 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 Product model:And ProductCustomField:2.
Adding Snipcart configuration settingsIf you need more help for this part, refer to our documentation here and here.
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 migrationsNow that your models are created, you’ll need to generate database migrations and run them.
In your terminal, use the makemigrations command:You should see the following output:Once the migrations are generated, apply them on your database with the migrate command: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 createsuperuser command:Don’t forget the username and password you picked — you will need them to log into Wagtail’s dashboard.
4.
Creating productsStart 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.
Select the 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 Product.
Enter the product details, then publish your new product:You can create as many products as you wish.
4.
1 Adding Snipcart API keyRemember the 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.
5.
TemplatingYour 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.
Open the base.
html file located in snipcartwaigtaildemo/templates.
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 productsThe 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 get_context.
You can add the data that the view will receive in parameters.
In my case, I want to set the products context variable.
Open the models.
py file in home folder and update the HomePage class:Then, open the home_page.
html file located in the home/templates/home folder.
Let’s create a simple page that will show each product image with a link to the product details.
5.
2 Product detailsThe 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! ;)Open models.
py from the home folder and add this method in the Product class:A custom_fields array will be available in the product.
html template.
Create a file named product.
html in home/templates/home folder.
This is the template that will be associated with the Product page model.
Then, add some JavaScript to update the Snipcart buy button when a custom field selection is made on the page.
Add the following script snippet before the endblock statement: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 repoSee the live demoSee the GitHub repoClosing thoughtsI 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.
.. More details