13. Displaying the colors

Next, we'll represent product colors visually using color swatches imported from the library 'Font-Awesome'. This allows users to see the available color options at a glance.

Out of stock message

We'll start by creating a boolean variable, has_stock, to indicate whether any items are in stock. This variable will be set to True if the item_stock list contains any products with a positive quantity. If all items are out of stock, has_stock will be False.

views.py below item_stock

if len(item_stock) > 0 :
        has_stock = True #? necessary in order to do a if on the html. if the product is out of stock, will show "Out of Stock"
    else :
        has_stock = False

In the view_product.html template, we'll encapsulate the existing code within an if block to determine whether the has_stock variable is True. If has_stock is True, the product information and related details will be displayed as usual. However, if has_stock is False, only an "Out of Stock" message will be shown.

The view_product.html file with those changes will be shown at the end of this page

Importing the swatches

First, we will generate a set—a data structure designed to prevent duplicate elements— called 'colors' containing all unique colors found within the current product inventory.

views.py

if len(item_stock) > 0 : 
        has_stock = True #? necessary in order to do a if on the html. if the product is out of stock, will show "Out of Stock"
        colors = {item.color for item in item_stock} #? gets the colors of all products, uses sets '{}' to avoid duplicate colors
    else :
        has_stock = False
        colors = {} #? needs to be declared
    context = {'product': product, 'item_stock': item_stock, "has_stock" : has_stock, "colors" : colors}

Now, in order to integrate icons for color swatches using 'Font Awesome,' we will follow these steps:

font-awesome - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developerscdnjs

Copy the first link tag

1. Access Font Awesome CDN: Visit the 'Font Awesome CDN' website to find the latest version of the library.

2. Copy the Stylesheet Tag: Locate the link tag that imports the Font Awesome stylesheet. It will typically be in the format:

Lastly, paste it on the base.html file beneath the previous link of the stylesheet we created

base.html

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Now, enter this link and copy the html code:

Circle Classic Solid Icon | Font Awesomefontawesome

After updating the view_product.html file with this code, we will also incorporate the necessary changes based on the if-else conditions outlined earlier. This ensures that our HTML structure aligns with the specified logic. Here's how the revised HTML will look:

view_product.html

{% extends 'base.html' %}
{% load static %}

{% block body %}

<h3> {{ product.name }}</h3>

{% if has_stock %}

<img src="{{ product.image.url }}" width = "300" height = "450"> <!--returns the url of the image -->
<div data-gb-custom-block data-tag="load"></div>

<p>Product: {{ product.name }}</p>  <!-- Originally, what will be displayed in product is what is returned in its respective __str__ function on the models file-->
<p>Price: {{ product.price }}</p>

{% for color in colors %}

{{ color.name }}
<i class="fa-solid fa-circle" style="color: {{ color.code }}"></i> <!--False positive, html doesnt recognize the django format but it is correct -->

{% endfor %}

<button>Add to Cart</button>

{% else %}

<p>Out of Stock</p>

{% endif %}

{% endblock %}

The system now accurately reflects the available color options for each product, and if a product is out of stock, a corresponding notification is displayed to inform users of its unavailability.

Green and white watches now appear alongside their respective names

After changing the quantity of all products to 0