Merge pull request #472 from commonknowledge/display-merch-variations…

…-dropdown

Display merch variations dropdown

app/models/wagtail.py

@@ -740,6 +740,13 @@ def sync_from_shopify_product_id(cls, shopify_product_id):
             product = shopify.Product.find(shopify_product_id)
             metafields = product.metafields()
             metafields = metafields_to_dict(metafields)
+
+            # TODO adjust this function so that we can get different metafields from merchandise as opposed to books
+
+            if not metafields:
+                print('metafields are empty, skipping product')
+                return None
+
             if cls.objects.filter(shopify_product_id=shopify_product_id).exists():
                 return cls.update_instance_for_product(product, metafields)
             else:

app/settings/base.py

@@ -84,12 +84,9 @@
     "django.middleware.security.SecurityMiddleware",
 ]
 
-if USE_WHITENOISE:
-    MIDDLEWARE += [
-        "whitenoise.middleware.WhiteNoiseMiddleware",
-    ]
-
 MIDDLEWARE += [
+    'django.middleware.security.SecurityMiddleware',
+    'whitenoise.middleware.WhiteNoiseMiddleware',
     "django.contrib.sessions.middleware.SessionMiddleware",
     "django.middleware.common.CommonMiddleware",
     "django.middleware.csrf.CsrfViewMiddleware",

app/settings/production.py

@@ -2,8 +2,8 @@
 
 from .base import *
 
-if USE_WHITENOISE:
-    STATICFILES_STORAGE = "whitenoise.storage.CompressedManifestStaticFilesStorage"
+STATICFILES_STORAGE = "whitenoise.storage.CompressedManifestStaticFilesStorage"
+
 
 DEBUG = False
 SECRET_KEY = os.getenv("SECRET_KEY")

app/templates/app/blocks/event_list_and_map_block.html

@@ -5,7 +5,7 @@
         {% map in_place=False center="[-2.5, 53.6]" zoom=5.5 style="mapbox://styles/commonknowledge/cl7cnn4d6004a14nzcmvf0k01" %}
         <article class="px-4 my-3 md:tw-hidden">
             <h1 class='tw-text-4xl'>{{ value.title }}</h1>
-            <div class='tw-text-lg'>{{ value.intro|richtext }}</div>
+            <p>{{ value.intro|richtext }}</p>
             {% if not user.is_member %}
                 {% bootstrap_button href="/join" content="Join LBC and come along" %}
             {% endif %}
@@ -20,7 +20,7 @@ <h1 class='tw-text-4xl'>{{ value.title }}</h1>
                      data-map-target="config">
                 <article class="px-4 my-3 tw-hidden md:tw-block">
                     <h1 class='tw-text-4xl'>{{ value.title }}</h1>
-                    <div class='tw-text-lg'>{{ value.intro|richtext }}</div>
+                    <p>{{ value.intro|richtext }}</p>
                     {% if not user.is_member %}
                         {% bootstrap_button href="/join" content="Join LBC and come along" %}
                     {% endif %}

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>

app/templates/app/includes/event_list_and_map.html

@@ -2,7 +2,7 @@
 {% map in_place=False center="[-2.5, 53.6]" zoom=5.5 style="mapbox://styles/commonknowledge/cl7cnn4d6004a14nzcmvf0k01" %}
 <article class="px-4 my-3 md:tw-hidden">
     <h1 class='tw-text-4xl'>{{ title }}</h1>
-    <div class='tw-text-lg'>{{ intro|richtext }}</div>
+    <p>{{ intro|richtext }}</p>
     {% if not user.is_member %}
         {% bootstrap_button href="/join" content="Join LBC and come along" %}
     {% endif %}
@@ -25,7 +25,7 @@ <h1 class='tw-text-4xl'>{{ title }}</h1>
              data-list-filter-option-passive-classes-value="tw-bg-slate-300">
         <article class="px-4 my-3 tw-hidden md:tw-block">
             <h1 class='tw-text-4xl'>{{ title }}</h1>
-            <div class='tw-text-lg'>{{ intro|richtext }}</div>
+            <p>{{ intro|richtext }}</p>
             {% if not user.is_member %}
                 {% bootstrap_button href="/join" content="Join LBC and come along" %}
             {% endif %}

app/templates/app/includes/newsletter_signup.html

@@ -2,11 +2,11 @@
       method="post"
       id="mc-embedded-subscribe-form"
       name="mc-embedded-subscribe-form"
-      class="validate"
+      class="validate "
       target="_blank"
       novalidate>
-    <fieldset>
-        <legend class="h1 fw-bold mb-3">
+    <fieldset class="tw-p-3">
+        <legend class="h2 fw-bold mb-3">
             {% firstof heading "Subscribe to the newsletter" %}
         </legend>
         <div class="mb-3">

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;
-}
+}

package.json

@@ -46,5 +46,7 @@
     "ts-jest": "^27.1.4",
     "typescript": "^4.6.3",
     "vite": "^5.0.2"
-  }
+  },
+  "packageManager": "[email protected]"
+
 }

render-worker.yaml

@@ -0,0 +1,15 @@
+services:
+  - name: leftbookclub-worker
+    type: worker
+    env: python
+    plan: starter
+    buildCommand: "poetry install"
+    startCommand: "poetry run python manage.py start_worker"
+    numInstances: 1
+    concurrency:
+      type: fixed
+      min: 1
+      max: 2
+    gracefulShutdown:
+      signal: SIGINT
+      timeout: 5