Merge branch 'display-merch-variations-dropdown' into production

commonknowledge · Jul 11, 2024 · 1ef9954 · 1ef9954
2 parents 0654eb4 + 88e59f9
commit 1ef9954
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 31 deletions.
diff --git 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 }}" 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" %}
-                    {% 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
@@ -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,19 @@ export default class ShopifyBuyControllerBase extends Controller {
     this.getCart();
   }
 
+  updateAddToCartButton() {
+    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() {
@@ -320,4 +336,4 @@ function currency(
 function length(arr: any[]) {
   if (!arr) return 0;
   return arr.length || 0;
-}
+}