Add color to items without picture

src/purchase/models.py

@@ -1,5 +1,7 @@
 from __future__ import annotations
 
+import hashlib
+
 from django.db import models
 from django.db.models import Avg, Count, F, Sum
 from django.db.models.functions import Coalesce
@@ -102,6 +104,12 @@ class Product(Model):
     def natural_key(self):
         return (self.name,)
 
+    @property
+    def color_hue(self):
+        return int(
+            hashlib.sha256(bytes(self.name, encoding="utf-8")).hexdigest()[:2], base=16
+        )
+
     def save(self, *args, **kwargs):
         super().save()
         if not self.image:

src/purchase/static/purchase/css/basket_form.css

@@ -0,0 +1,10 @@
+.product-img-placeholder {
+    aspect-ratio: 1/1;
+    font-size: 6em;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+}
+.product-img-placeholder span {
+    text-align: center;
+}

src/purchase/templates/purchase/basket_form.html

@@ -1,6 +1,10 @@
 {% extends "common/base.html" %}
+{% load static %}
 {% load i18n %}
 {% load crispy_forms_tags purchase %}
+{% block extrahead %}
+    <link rel="stylesheet" href="{% static "purchase/css/basket_form.css" %}">
+{% endblock %}
 {% block content %}
     {% if object %}
         <h1>{{ object }} <span class="badge bg-secondary">{{ object.price|currency }}</span></h1>

src/purchase/templates/purchase/snippets/basket_item.html

@@ -3,6 +3,13 @@
     <div class="card h-100 {% if field.value %}bg-success text-white{% endif %}">
         {% if product.image %}
             <img src="{{ product.image.url }}" class="card-img">
+        {% else %}
+            <div class="card-img product-img-placeholder"
+                style="background-color: hsl({{ product.color_hue }}, 60%, 80%)">
+                <span>
+                    {{ product.name|slice:"1" }}
+                </span>
+            </div>
         {% endif %}
         <div class="card-body">
             <h4 class="card-title">{{ product.name }}</h4>