From 3ad0638875513a4f015f4b1699cd13cb58ec57c2 Mon Sep 17 00:00:00 2001
From: Moggach <acunnane13@gmail.com>
Date: Wed, 10 Jul 2024 16:47:33 +0000
Subject: [PATCH 1/2] if there is more than one product variations display them
 in a drop down selector

---
 app/templates/app/includes/cart_options.html | 61 ++++++++++----------
 frontend/controllers/product-controller.ts   | 12 +++-
 2 files changed, 42 insertions(+), 31 deletions(-)

diff --git a/app/templates/app/includes/cart_options.html b/app/templates/app/includes/cart_options.html
index a2026860..81af21d7 100644
--- a/app/templates/app/includes/cart_options.html
+++ b/app/templates/app/includes/cart_options.html
@@ -1,39 +1,42 @@
 {% load djmoney books %}
-
 <div class='row'>
     {% if not product.variants %}
         <div>
-            <span class="spinner-border spinner-border-sm"
-                  role="status"
-                  aria-hidden="true"></span>
+            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
             Loading purchase options...
         </div>
+    {% elif product.variants|length == 1 %}
+        <div class="tw-mb-2">
+            <!-- If there's only one variant, show it without a dropdown -->
+            {% with variant=product.variants.0 %}
+                <p>
+                    {% if variant.title != "Default Title" %}{{ variant.title }} - {% endif %}
+                    {% money_localize variant.price "GBP" %}
+                    {% if variant.compare_at_price is not None %}
+                        <s>{% money_localize variant.compare_at_price "GBP" %}</s>
+                    {% endif %}
+                </p>
+            {% endwith %}
+        </div>
+        <div>
+            <button id="addToCartButton" class="btn btn-outline-secondary btn-disable-strikethrough" data-product-variant-id-param="{{ product.variants.0.id }}" data-product-target="addToCartButton" {% if product.variants.0.inventory_quantity == 0 and product.variants.0.inventory_policy == 'deny' %} disabled="true" {% elif loading or disabled %} disabled="true" {% else %} data-bs-toggle="offcanvas" data-bs-target="#cart" data-action="click->product#add"{% endif %}>Add to cart</button>
+        </div>
     {% else %}
-        {% for variant in product.variants %}
-            <div class='tw-mb-2'>
-                {% if variant.title != "Default Title" %}<h5>{{ variant.title }}</h5>{% endif %}
-                {% if variant.inventory_quantity == 0 and variant.inventory_policy == 'deny' %}
-                    Out of Stock
-                {% elif loading %}
-                    <span class="spinner-border spinner-border-sm"
-                          role="status"
-                          aria-hidden="true"></span>
-                    <span>Loading...</span>
-                {% else %}
-                    <button class="btn btn-outline-secondary btn-disable-strikethrough"
-                            {% if variant.inventory_quantity == 0 and variant.inventory_policy == 'deny' %} disabled="true" {% elif loading or disabled %} disabled="true" {% else %} data-bs-toggle="offcanvas" data-bs-target="#cart" data-action="click->product#add" data-product-variant-id-param="{{ variant.id }}" {% endif %}>
-                        Add to cart
-                    </button>
-                {% endif %}
-                <div class='tw-mt-2 fs-5 tw-font-bold'>
-                 {% if variant.compare_at_price is not None %}
-                        <b>{% money_localize variant.price "GBP" %}</b> <s>{% money_localize variant.compare_at_price "GBP" %}</s>
-                    {% else %}
+        <div class="tw-mb-2">
+            <select id="variantSelector" class="form-select" {% if loading or disabled %}disabled="true"{% endif %} data-action="change->product#updateAddToCartButton" data-product-target="variantSelector">
+                {% for variant in product.variants %}
+                    <option value="{{ variant.id }}" data-variant-id="{{ variant.id }}" {% if variant.inventory_quantity == 0 and variant.inventory_policy == 'deny' %}disabled{% endif %}>
+                        {% if variant.title != "Default Title" %}{{ variant.title }} -{% endif %}
                         {% money_localize variant.price "GBP" %}
-                    {% endif %}  
-                 
-                </div>
-            </div>
-        {% endfor %}
+                        {% if variant.compare_at_price is not None %}
+                            <s>{% money_localize variant.compare_at_price "GBP" %}</s>
+                        {% endif %}
+                    </option>
+                {% endfor %}
+            </select>
+        </div>
+        <div>
+            <button class="btn btn-outline-secondary btn-disable-strikethrough" data-product-variant-id-param="{{ product.variants.0.id }}" data-product-target="addToCartButton" {% if product.variants.0.inventory_quantity == 0 and product.variants.0.inventory_policy == 'deny' %} disabled="true" {% elif loading or disabled %} disabled="true" {% else %} data-bs-toggle="offcanvas" data-bs-target="#cart" data-action="click->product#add"{% endif %}>Add to cart</button>
+        </div>
     {% endif %}
 </div>
diff --git a/frontend/controllers/product-controller.ts b/frontend/controllers/product-controller.ts
index 67afda28..40ba088a 100644
--- a/frontend/controllers/product-controller.ts
+++ b/frontend/controllers/product-controller.ts
@@ -8,8 +8,11 @@ import { isAfter } from "date-fns";
 
 export default class ShopifyBuyControllerBase extends Controller {
   // Targets
-  static targets = ["template"];
+  static targets = ["template", "variantSelector", "addToCartButton"];
+
   public templateTargets?: HTMLElement[];
+  public variantSelectorTarget!: HTMLSelectElement;
+  public addToCartButtonTarget!: HTMLButtonElement;
 
   // Values
   static values = {
@@ -40,6 +43,11 @@ export default class ShopifyBuyControllerBase extends Controller {
     this.getCart();
   }
 
+  updateAddToCartButton() {
+    const selectedVariantId = this.variantSelectorTarget.value;
+    this.addToCartButtonTarget.setAttribute('data-product-variant-id-param', selectedVariantId);
+  }
+
   private LOCALSTORAGE_CHECKOUT_ID = "checkoutId";
 
   get checkoutId() {
@@ -320,4 +328,4 @@ function currency(
 function length(arr: any[]) {
   if (!arr) return 0;
   return arr.length || 0;
-}
+}
\ No newline at end of file

From 88e59f94254c3841d5f8e32fd344c422c1a586fe Mon Sep 17 00:00:00 2001
From: Moggach <acunnane13@gmail.com>
Date: Thu, 11 Jul 2024 13:06:19 +0000
Subject: [PATCH 2/2] add inventory handling and disabled button for each
 product variant in the dropdown

---
 app/templates/app/includes/cart_options.html |  2 +-
 frontend/controllers/product-controller.ts   | 12 ++++++++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/app/templates/app/includes/cart_options.html b/app/templates/app/includes/cart_options.html
index 81af21d7..a032c04a 100644
--- a/app/templates/app/includes/cart_options.html
+++ b/app/templates/app/includes/cart_options.html
@@ -25,7 +25,7 @@
         <div class="tw-mb-2">
             <select id="variantSelector" class="form-select" {% if loading or disabled %}disabled="true"{% endif %} data-action="change->product#updateAddToCartButton" data-product-target="variantSelector">
                 {% for variant in product.variants %}
-                    <option value="{{ variant.id }}" data-variant-id="{{ variant.id }}" {% if variant.inventory_quantity == 0 and variant.inventory_policy == 'deny' %}disabled{% endif %}>
+                    <option value="{{ variant.id }}" data-variant-id="{{ variant.id }}" data-inventory-quantity="{{ variant.inventory_quantity }}" data-inventory-policy="{{ variant.inventory_policy }}">
                         {% if variant.title != "Default Title" %}{{ variant.title }} -{% endif %}
                         {% money_localize variant.price "GBP" %}
                         {% if variant.compare_at_price is not None %}
diff --git a/frontend/controllers/product-controller.ts b/frontend/controllers/product-controller.ts
index 40ba088a..87a1fac1 100644
--- a/frontend/controllers/product-controller.ts
+++ b/frontend/controllers/product-controller.ts
@@ -44,10 +44,18 @@ export default class ShopifyBuyControllerBase extends Controller {
   }
 
   updateAddToCartButton() {
-    const selectedVariantId = this.variantSelectorTarget.value;
+    const selectedOption = this.variantSelectorTarget.options[this.variantSelectorTarget.selectedIndex];
+    const selectedVariantId = selectedOption.value;
+    const inventoryQuantity = selectedOption.getAttribute('data-inventory-quantity');
+    const inventoryPolicy = selectedOption.getAttribute('data-inventory-policy');
     this.addToCartButtonTarget.setAttribute('data-product-variant-id-param', selectedVariantId);
-  }
 
+    if (Number(inventoryQuantity) == 0 && inventoryPolicy == 'deny') {
+        this.addToCartButtonTarget.setAttribute('disabled', 'true');
+    } else {
+        this.addToCartButtonTarget.removeAttribute('disabled');
+    }
+}
   private LOCALSTORAGE_CHECKOUT_ID = "checkoutId";
 
   get checkoutId() {