From ef3d293d5ca71267aad9a7df062835bf1b1fcdef Mon Sep 17 00:00:00 2001
From: Nathan Chapman <contact@nathanjchapman.com>
Date: Mon, 13 Mar 2023 15:26:46 -0600
Subject: [PATCH] Change product variant display from a select to radio

---
 static/styles/main.css | 16 +++++++++++++++-
 storefront/forms.py    | 12 +++++++++---
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/static/styles/main.css b/static/styles/main.css
index ad56e52..13bf589 100644
--- a/static/styles/main.css
+++ b/static/styles/main.css
@@ -853,12 +853,26 @@ article + article {
     border-color: var(--yellow-color);
 }
 
-.product__form input,
+.product__form input:not([type=radio]),
 .product__form select {
     width: 100%;
 }
 
 
+.product__form #id_variant {
+    display: flex;
+    gap: 1rem;
+    flex-direction: column;
+}
+.product__form #id_variant div label {
+    display: flex;
+    gap: 1rem;
+    font-weight: bold;
+}
+
+
+
+
 
 @media screen and (max-width: 700px) {
     .product__detail {
diff --git a/storefront/forms.py b/storefront/forms.py
index a0ad5bc..7b3c377 100644
--- a/storefront/forms.py
+++ b/storefront/forms.py
@@ -17,15 +17,21 @@ from core import CoffeeGrind, ShippingContainer
 logger = logging.getLogger(__name__)
 
 
+class VariantChoiceField(forms.ModelChoiceField):
+    def label_from_instance(self, obj):
+        return f'{obj.name} | ${obj.price}'
+
+
 class AddToCartForm(forms.Form):
     quantity = forms.IntegerField(min_value=1, max_value=20, initial=1)
 
     def __init__(self, variants, options, *args, **kwargs):
         super().__init__(*args, **kwargs)
 
-        self.fields['variant'] = forms.ChoiceField(
-            label='',
-            choices=[(variant.pk, f'{variant.name} | ${variant.price}') for variant in variants]
+        self.fields['variant'] = VariantChoiceField(
+            queryset=variants,
+            widget=forms.RadioSelect,
+            label=''
         )
 
         for option in options: