This video shows how to browse through a product catalog and add products to a shopping cart. Plus, learn how to check out the cart and place an order.
- [Instructor] Hello. Welcome to our next section, Building an Online Shop. In this section we'll learn how to build a basic online shop, we'll create a catalog of products and implement a shopping cart using Django Sessions. You'll also learn how to create custom context processors and launch asynchronous tasks using Celery. Now we move on to the first video of this section. Creating an Online Shop Project. In this video, we'll first create product catalog models and then register catalog models in the admin site. We'll then build catalog views and create catalog templates.
So let's start with a new Django project to build an online shop. Our users will be able to browse through a product catalog and add products to a shopping cart. Finally they'll be able to check out the cart and place an order. So we first create a virtual environment for your new project and activate it with these commands. Django, admin space, startproject, space, myshop cd myshop, slash, django dash admin, startapp shop Now edit the settings.py file of your project and add your application to the installed app settings as we do here and save the file.
So your application is now active for this project. Let's define the models for the product catalog. Let's now look into creating product catalog models. The catalog of our shop will consist of products that are organized into different categories. Each product will have a name, optional description, optional image, a price, and an available stock. So we edit in models.py file of the shop application that we just created, and add these lines of code here. Now save this file.
These are our category and product models. The category model consists of a name field and a slug unique field. These are product model fields. The first one is category, which is foreign key to the category model. This is a many to one relationship. A product belongs to one category and a category contains multiple products. Next is name. This is the name of the product. Then comes slug, this is the slug for the project, to build beautiful URLs.
Then we have image, which is an optional product image. Then follows description, an optional description of the product. We also have price, this is decimal field. This field uses Python's decimal dot decimal type to store a fixed precision decimal number. The maximum number of digits including decimal places is set using the max underscore digits attribute. And decimal places with the decimal underscore places attribute. Next, stock. This is a positive integer field to store the stock of the product.
After this comes available, which is a Boolean which indicates whether the product is available or not. This allows us to enable or disable the product in the catalog. We also have the field created which stores when the object was created. And the last one is updated. This field stores when the object was last updated. For the price field, we use decimal field instead of float field to avoid rounding issues. Always use decimal field to store monetary amounts. Float field uses Python's float type internally whereas decimal field uses Python's decimal type.
By using decimal type, you'll avoid the float rounding issues. Now in the meta class of the product model, we use the index underscore together meta option to specify index for the id and slug fields together. We define this index because we plan to query products by both id and slug. Both fields are indexed together to improve performances for queries that utilize the two fields. Since we're going to deal with images in our models, open the shell and install pillow with these commands.
Now we run the next command to create initial migrations for your project. Python manage.py makemigrations and click enter. So you can see this outputting is great. Now we'll run the next command to sync the database. You can see an output that includes this line, shop.0001 initial ok. So the database is now synced with your models. Let's now learn to register catalog models in the admin site.
Let's add our models to the administration site so we can easily manage categories and products. Edit the admin.py file of the shop application and add this code to it. Also we have to save it. Remember that we use the prepopulated underscore fields attribute to specify fields where the value is automatically set using the value of other fields. As you've seen before, this is convenient for generating slugs. We use the list underscore editable attribute in the product admin class to set the fields that can be edited from the list display page of the administrative site.
This will allow you to edit multiple rows at once. Any field in the list underscore editable must be also listed in the list underscore display attribute since only the fields displayed can be edited. Now create a super user for your site using this command.
Next we start the development server with the command python manage.py runserver Now open this URL in your browser and log in with the user you just created. Add a new category and add the category name. Save it. Now add the product name and add an image, if you want, and you can also add the description. Now select the price and the stock number and save it.
The product changed this page of the administration page looks like this one. Now let's build the catalog views. In order to display the product catalog, we need to create a view to list all the products or filter products by a given category. Edit the views.py file of the shop application and add these code to it. Now save this file. Here we filter the query set with available is true to retrieve only available products. We'll use an optional category underscore slug parameter to optionally filter products by a given category.
We also need a view to retrieve and display a single product Here we add this view to the views.py file. The product underscore detail view expects the id and slug parameters in order to retrieve the product instance. We can get this instance by just the id since it's a unique attribute. However, we include the slug in the URL to build SEO friendly URLs for products. After building the product lists and detail views, we have to define URL patterns for them, so we create a new file inside the shop application and name it URLs.py.
Now add this code to it. These are the URL patterns for our product catalog. We've defined two different URL patterns for the product underscore list view, a pattern named product underscore list, which calls the product underscore list view, without any parameters, and a pattern name product underscore list underscore by underscore category, which provides a category underscore slug parameter to the view for filtering products by a given category. We added a patent for the product underscore detail view which passes the id and slug parameters to the view in order to retrieve a specific product.
Next we edit the URLs.py file of the My Shop project. By adding these lines of code. In the main URLs pattern of the project, we include URLs for the shop application under a custom name space named shop. Now edit the models.py file of the shop application. Import the reverse function and add a get absolute URL method to the category and product models by adding these lines of code below the category and product class.
And save the changes. As you already know, get absolute URL is the convention to retrieve URLs for a given object. Here we'll use URL patterns that we just defined in the URLS.py file. Let's dive into creating catalog templates. Now we need to create templates for the product list and detail view. So we create templates folder in the shop application directory and also create products under the shop directory. Here we need to define a base template and then extend it in the product list and detail templates.
Now we create a new base dot html template and add these lines of code to it. This is the base template that we will use for our shop. In order to include the required CSS styles and images that are used by the templates, you will need to copy the static files that come along with this section, located in the static directory of the shop application. Copy them to the same location of your project. Then create a file list dot html under the template folder.
And add this code to it and save the file. This is the product list template. Extends the shop slash base dot html templates and uses the categories context variable to display all the categories in a sidebar and products to display the products of the current page. The same template is used for both, listing all available products and listing products filtered by category. Since the image field of the product model can be blank, we need to provide a default image for the products that don't have an image. The image is located in our static files directory but the relative path image slash no underscore image dot png Since we are using image field to store product images, we need the development server to serve upload image files.
Now edit these settings.py file of My Shop and add these settings. The first one which we add is media underscore URL and the second one is the media underscore root. Media underscore URL is the base URL that serves media files uploaded by users.
Media underscore root is the local path where these files reside, which we build dynamically propending the base underscore DIR variable. For Django to serve the uploaded media files using the development server, edit the URLs.py file of My Shop and add this line to import settings and static packages.
Here we also add an if statement for media URL and media root. Remember that we only serve static files this way during the development.
In a production environment, you should never serve static files with Django. Next we add a couple of products to your shop using the administration site and open this web address in your browser. You can see the product list page as it looks here. If you create a product using the administration site and don't upload any images, the default no underscore image dot png image will be displayed, which looks like this. Let's edit the product detail template. So we create a file and name it detail dot html under the project folder.
And add this code to it and save it. We call the get underscore absolute underscore url method on the related category object to display the available products that belong in the same category. Now open the same web link in your browser and click on any product to see the product detail page. As you can see here. Here's the product image, product name, the description and the price. We've now created a basic product catalog. Awesome. In this video, we've created an online shop with products and their descriptions.
In the next video, we'll build a shopping cart.
Note: This course was created by Packt Publishing. We are pleased to host this training in our library.
- Creating an online shop project
- Registering customer orders
- Managing payments and orders
- Integrating a payment gateway
- Extending the online shop
- Creating a coupon system
- Translating Python code