Now that you have a Cart class to manage the cart, you need to create the views to add, update, or remove items from it.
- Here we're back with the fourth video of this section Creating Shopping Cart Views. In the previous video, we built a shopping cart. In this video, we're going to add items to the cart and then build a template to display the cart. We'll also add products to the cart and finally update product quantities in the cart. Now that we have a cart class to manage the cart, we need to create the views to add, update or remove items from it. We need to create these views. A view to add or update items in a cart which can handle current and new quantities and then view to review items from the cart.
Along with these, we need a view to display cart items and totals. Now in order to add items to the cart, we need a form that allows the user to select a quantity. Create a forms.py file inside the cart application directory and add these lines of code to it and save the file. We use this form to add products to the cart. Our CartAddProductForm class contains these two fields. The first one is quantity, which allows the user to select a quantity between one and 20.
We use a field called TypedChoiceField with coerce=int to convert the input into an integer. Next is update which allows you to indicate whether the quantity has to be added to any existing quantity in the cart to this product for the Boolean value false or if the existing quantity has to be updated with a given quantity for true. We use a hidden input widget for this field since we don't want to display it for the user. Let's create a view for adding items to the cart. Edit the views.py file of the cart application and add this code to it and save.
This is the view for adding products to the cart or updating quantities for existing products. We use the require_POST decorator to allow only post requests since this view is going to change data. The view receives the product ID as a parameter. We retrieve the product instance with the given ID and validate CartAddProductForm. If the form is valid, we will either add or update the product in the cart. The view redirects to the cart_detail URL that will display the contents of the cart. In the coming part, we'll create the cart_detail view.
We also need a view to remove items from the cart. Add this code to the views.py file of the cart application and save it. The cart_remove view received the product IDs as a parameter. We retrieve the product instance with a given ID and remove the product from the cart. Then we redirect the user to the cart_detail URL. Finally, we need a view to display the cart and its items. So we add this view to the views.py file. The cart_detail view gets the current cart to display it.
Let's add URL patents to this view. So we create views to add items to the cart, update quantities, remove items from the cart and display the cart. Let's add URL patents to these views. Create a new file inside the cart application directory and name it URLs.py. Now add these lines of code to it. Edit the main URLs.py file of the myshop and add this URL patent to indicate the cart's URLs and save this file.
Make sure that you include this URL patent before the shop.urls patent since it's more restrictive than the latter. We now build a template to display the cart. The cart add and cart remove views don't rend any templates, but we need to create a template for the cart detail view to display cart items and totals. Let's create the file's structure inside the cart application directory. So we move to the templates folder. Inside this, we create a folder named cart. In this folder we create an HTML file and name it detail.HTML.
Add these lines of code to it and save it. This is the template that is used to display the cart contents. It contains a table of the items stored in the current cart. We allow users to change the quantity for the selected products using a form as posted to the cart add view. We also allow users to remove items from the cart by providing a remove link for each of them. Next, we add products to the cart. We need to add an add to cart button to the product detail page. Edit the views.py file the shop application and add CartAddProductForm to the product_detail view.
First import the CartAddProductForm package. Then we create object cart product form and set the values in the render method. Edit the detail HTML template of the shop application. And add these codes in the form products price. Make sure the development server's running with the command python manage.py runserver.
Now open local host HTTP code on //127.0.0.1 code on 8,000 in your browser. Awesome. And now navigate to a product detail page. It now contains a form to choose a quantity before adding the product to the cart. So the page looks like this. Choose a quantity and click on the add to cart button. The form is submitted to the cart_add view by post. The view adds the product to the cart in the session including its current price and the selected quantity, then it redirects the user to a cart detail page which looks like this.
Let's step ahead and update product quantities in the cart. When users see the cart, they might want to change product quantities before placing an order. We're going to allow users to change quantities from the cart detail page. Edit the views.py file of the cart application and change the cart_detail view. So add these lines of code and save it. We create an instance of CartAddProductForm for each item in the cart to allow changing product quantities. We initialize the form with the current item quantity and set the update field to true so that when submit the form to the cart add view, the current quantity is replaced with the new one.
Open HTTP code //127.0.0.1 code on 8,000/cart in your browser. Now you can see a form to edit the quantity for each cart item. Change the quantity of an item and click on the update button to test a new functionality. As you can see, the price has changed from $40 to $80. Fantastic. In this video, we've learned to create a shopping cart view for our online shop. In the next video, we'll learn in a similar way to create a context processor for the current 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