How to Create a Fully Functional E-commerce Website with Django
Step 4 of 5 : Create a Checkout Form
In this part tutorial we will create checkout form an order
Prerequisites
- Django Latest Version
- Anaconda (Optional) to make Virtual Environment
- Visual Studio Code (Optional) as Code Editor
Before starting the tutorial don’t forget to activate your Virtual Environment, and the project we created in the previous tutorial. If yo not you can download it here:
A. Form
In this part of the tutorial we will create a checkout form. okay, just download the templates for the checkout page form named checkout.html at the following link :
Checkout.html file has been adjusted to the needs of the checkout display. then we only need to create a form from the core directory.
Then in the core directory create a new file called forms.py where this file will store everything related to the form.
Import :
from django import forms
from django_countries.fields import CountryField
from django_countries.widgets import CountrySelectWidget
You can see we are using the country field library and this is a third party library so we have to install it to use it. to install country library jus run command below :
$ pip install django-countries
and in settings.py add this code :
INSTALLED_APPS = [
...
'django_countries'
]
Then we create a class form called CheckoutForm as a form from the checkout page
And with this you will have checkout form
B. Models
To create a checkout form we will create a new model class that functions to save shipping address an order.
the class we will create is CheckoutAddress which will store the shipping address of the order from the form we made before
dont forget as well to impor becouse we would use Country Field:
from django_countries.fields import CountryField
Do not forget migrate your model database with the command below :
$ python manage.py migrate
$ python manage.py makemigrations
Complete models.py code can be seen in the following link:
C. Views
In the view don’t forget to add the country field library and don’t forget to add the model and form that we just created
from .forms import CheckoutForm
from .models import (
...
CheckoutAddress
)
Create CheckoutView class
In the forms.py file that we made earlier. we send the form into templates via view. The post function that captures the value sent via the form in the templates
Complete views.py code can be seen in the following link:
D. Urls
As usual after we make the view don’t forget to register it in the core/urls.py file.
Import
from django.urls import path
from .views import (
...
CheckoutView
)
Register all your class and fuctions in views to urls.py file. after that we will add the address in
Create path url to checkout page with code below:
urlpatterns = [
...
path('checkout', CheckoutView.as_view(), name='checkout'),
]
And finally the checkout form can be accessed and save the order data into the database
Complete Source Code this Part :
Proceed to the next part!
I hope you’ve found the fourth part of this tutorial helpful. In the next session, we’re going to handling payment with stripe.