refactor: merchandise catalog with dynamic items dictionary

Author: zorexsalvo

app/home/templates/internal/pages/merchandise.html

@@ -1,260 +1,64 @@
 {% load static %}
 
+<div class="fixed bottom-8 right-8 z-50 flex flex-col items-center gap-2">
+  <a
+    href="https://forms.gle/RRdGLFGUV6sbJtey5"
+    target="_blank"
+    rel="noopener noreferrer"
+    class="bg-orange-2 text-white font-bold font-bantayog px-4 py-2 rounded-full hover:opacity-90 transition-opacity shadow-lg text-sm"
+  >
+    Reserve
+  </a>
+  <p class="font-nunito text-brown-2 text-xs">or scan</p>
+  <img
+    src="{% static 'img/merchandise/order-form-qr.png' %}"
+    alt="QR code for merchandise order form"
+    class="w-20 h-20 rounded-lg shadow-md bg-white p-0.5"
+  >
+</div>
+
 <div class="max-w-6xl mx-auto px-[4%] pt-40 pb-18">
   <h2 class="text-3xl sm:text-5xl my-10 font-bold font-td_pinoy text-orange-2">
-    Merchandise
+    Merchandise Catalog
   </h2>
 
   <div class="font-nunito text-brown-2 text-base sm:text-lg mb-12 space-y-4">
     <p>
-      Thank you for your interest in PythonAsia 2026 merchandise! Browse our exclusive collection
-      below — from apparel and accessories to Filipino-inspired keepsakes.
+      Thank you for your interest in PythonAsia 2026 merchandise. Browse our exclusive collection below — from apparel and accessories to Filipino-inspired keepsakes.
     </p>
     <p>
-      This order form is <strong>exclusive to confirmed attendees</strong> of PythonAsia 2026.
-      Fill it out to reserve your items. Our organizing team will contact you to confirm
-      your order and provide payment instructions.
+      This page serves as a catalog for confirmed attendees of PythonAsia 2026. You may explore the available items here. Instructions on how to reserve or purchase merchandise will be provided separately by the organizing team.
     </p>
-    <div class="flex flex-col items-center gap-4 pt-2">
-      <a
-        href="https://forms.gle/RRdGLFGUV6sbJtey5"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="inline-block bg-orange-2 text-white font-bold font-bantayog px-8 py-3 rounded-xl hover:opacity-90 transition-opacity"
-      >
-        Reserve Your Merch
-      </a>
-      <div class="flex flex-col items-center gap-2 pt-2">
-        <p class="font-nunito text-brown-2 text-sm">or scan to reserve</p>
-        <img
-          src="{% static 'img/merchandise/order-form-qr.png' %}"
-          alt="QR code for merchandise order form"
-          class="w-28 h-28 rounded-lg shadow-sm"
-        >
-      </div>
+
+    <div class="border-l-4 border-orange-2 bg-white rounded-lg p-6 sm:p-8 my-12 shadow-sm">
+      <p class="font-bantayog font-bold text-brown-1 text-lg sm:text-xl mb-3">Note</p>
+      <p class="font-nunito text-brown-2 text-base leading-relaxed">
+        Reserving an item does <strong>not guarantee merchandise</strong>. Distribution is <strong>first-come, first-served, while supplies last</strong>. The swags team will contact you if your reservation is accommodated.
+      </p>
     </div>
   </div>
 
   <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-4">
 
+    {% for item in merchandise_items %}
     <div class="bg-offwhite-2 rounded-2xl overflow-hidden shadow-sm flex flex-col">
       <div class="aspect-square bg-cream-1 flex items-center justify-center p-4">
         <img
-          src="{% static 'img/merchandise/tshirt-kalinga-maroon.png' %}"
-          alt="Kalinga T-Shirt (Maroon)"
-          class="w-full h-full object-contain"
-          loading="lazy"
-        >
-      </div>
-      <div class="p-3 sm:p-4 flex flex-col flex-1">
-        <h3 class="font-bantayog font-bold text-brown-1 text-sm sm:text-base leading-snug">Kalinga T-Shirt</h3>
-        <p class="font-nunito text-brown-2 text-sm mt-1">Maroon · XS–2XL</p>
-        <p class="font-nunito font-bold text-orange-2 text-sm sm:text-base mt-auto pt-3">₱500.00</p>
-      </div>
-    </div>
-
-    <div class="bg-offwhite-2 rounded-2xl overflow-hidden shadow-sm flex flex-col">
-      <div class="aspect-square bg-cream-1 flex items-center justify-center p-4">
-        <img
-          src="{% static 'img/merchandise/tshirt-pythonasia-2026-white-generic.png' %}"
-          alt="PythonAsia 2026 T-Shirt (White)"
-          class="w-full h-full object-contain"
-          loading="lazy"
-        >
-      </div>
-      <div class="p-3 sm:p-4 flex flex-col flex-1">
-        <h3 class="font-bantayog font-bold text-brown-1 text-sm sm:text-base leading-snug">PythonAsia 2026 T-Shirt</h3>
-        <p class="font-nunito text-brown-2 text-sm mt-1">Conference Type · White · XS–2XL</p>
-        <p class="font-nunito font-bold text-orange-2 text-sm sm:text-base mt-auto pt-3">₱500.00</p>
-      </div>
-    </div>
-
-    <div class="bg-offwhite-2 rounded-2xl overflow-hidden shadow-sm flex flex-col">
-      <div class="aspect-square bg-cream-1 flex items-center justify-center p-4">
-        <img
-          src="{% static 'img/merchandise/leather-tray.png' %}"
-          alt="Leather Tray"
-          class="w-full h-full object-contain"
-          loading="lazy"
-        >
-      </div>
-      <div class="p-3 sm:p-4 flex flex-col flex-1">
-        <h3 class="font-bantayog font-bold text-brown-1 text-sm sm:text-base leading-snug">Leather Tray</h3>
-        <p class="font-nunito font-bold text-orange-2 text-sm sm:text-base mt-auto pt-3">₱450.00</p>
-      </div>
-    </div>
-
-    <div class="bg-offwhite-2 rounded-2xl overflow-hidden shadow-sm flex flex-col">
-      <div class="aspect-square bg-cream-1 flex items-center justify-center p-4">
-        <img
-          src="{% static 'img/merchandise/notepad-large.png' %}"
-          alt="Notepad (80 Sheets, 4×4)"
-          class="w-full h-full object-contain"
-          loading="lazy"
-        >
-      </div>
-      <div class="p-3 sm:p-4 flex flex-col flex-1">
-        <h3 class="font-bantayog font-bold text-brown-1 text-sm sm:text-base leading-snug">Notepad</h3>
-        <p class="font-nunito text-brown-2 text-sm mt-1">80 Sheets · 4×4</p>
-        <p class="font-nunito font-bold text-orange-2 text-sm sm:text-base mt-auto pt-3">₱100.00</p>
-      </div>
-    </div>
-
-    <div class="bg-offwhite-2 rounded-2xl overflow-hidden shadow-sm flex flex-col">
-      <div class="aspect-square bg-cream-1 flex items-center justify-center p-4">
-        <img
-          src="{% static 'img/merchandise/notepad-design1-small.png' %}"
-          alt="Notepad Design 1 (40 Sheets, 3×3)"
-          class="w-full h-full object-contain"
-          loading="lazy"
-        >
-      </div>
-      <div class="p-3 sm:p-4 flex flex-col flex-1">
-        <h3 class="font-bantayog font-bold text-brown-1 text-sm sm:text-base leading-snug">Notepad Design 1</h3>
-        <p class="font-nunito text-brown-2 text-sm mt-1">40 Sheets · 3×3</p>
-        <p class="font-nunito font-bold text-orange-2 text-sm sm:text-base mt-auto pt-3">₱80.00</p>
-      </div>
-    </div>
-
-    <div class="bg-offwhite-2 rounded-2xl overflow-hidden shadow-sm flex flex-col">
-      <div class="aspect-square bg-cream-1 flex items-center justify-center p-4">
-        <img
-          src="{% static 'img/merchandise/notepad-design2-small.png' %}"
-          alt="Notepad Design 2 (40 Sheets, 3×3)"
-          class="w-full h-full object-contain"
-          loading="lazy"
-        >
-      </div>
-      <div class="p-3 sm:p-4 flex flex-col flex-1">
-        <h3 class="font-bantayog font-bold text-brown-1 text-sm sm:text-base leading-snug">Notepad Design 2</h3>
-        <p class="font-nunito text-brown-2 text-sm mt-1">40 Sheets · 3×3</p>
-        <p class="font-nunito font-bold text-orange-2 text-sm sm:text-base mt-auto pt-3">₱80.00</p>
-      </div>
-    </div>
-
-    <div class="bg-offwhite-2 rounded-2xl overflow-hidden shadow-sm flex flex-col">
-      <div class="aspect-square bg-cream-1 flex items-center justify-center p-4">
-        <img
-          src="{% static 'img/merchandise/pythonasia-2026-acrylic.png' %}"
-          alt="Acrylic Keychain PythonAsia 2026"
-          class="w-full h-full object-contain"
-          loading="lazy"
-        >
-      </div>
-      <div class="p-3 sm:p-4 flex flex-col flex-1">
-        <h3 class="font-bantayog font-bold text-brown-1 text-sm sm:text-base leading-snug">Acrylic Keychain PythonAsia 2026</h3>
-        <p class="font-nunito font-bold text-orange-2 text-sm sm:text-base mt-auto pt-3">₱100.00</p>
-      </div>
-    </div>
-
-    <div class="bg-offwhite-2 rounded-2xl overflow-hidden shadow-sm flex flex-col">
-      <div class="aspect-square bg-cream-1 flex items-center justify-center p-4">
-        <img
-          src="{% static 'img/merchandise/palayok-acrylic.png' %}"
-          alt="Acrylic Keychain Palayok"
-          class="w-full h-full object-contain"
-          loading="lazy"
-        >
-      </div>
-      <div class="p-3 sm:p-4 flex flex-col flex-1">
-        <h3 class="font-bantayog font-bold text-brown-1 text-sm sm:text-base leading-snug">Acrylic Keychain Palayok</h3>
-        <p class="font-nunito font-bold text-orange-2 text-sm sm:text-base mt-auto pt-3">₱100.00</p>
-      </div>
-    </div>
-
-    <div class="bg-offwhite-2 rounded-2xl overflow-hidden shadow-sm flex flex-col">
-      <div class="aspect-square bg-cream-1 flex items-center justify-center p-4">
-        <img
-          src="{% static 'img/merchandise/fridge-magnet.jpg' %}"
-          alt="Refrigerator Magnet"
-          class="w-full h-full object-contain"
-          loading="lazy"
-        >
-      </div>
-      <div class="p-3 sm:p-4 flex flex-col flex-1">
-        <h3 class="font-bantayog font-bold text-brown-1 text-sm sm:text-base leading-snug">Refrigerator Magnet</h3>
-        <p class="font-nunito font-bold text-orange-2 text-sm sm:text-base mt-auto pt-3">₱150.00</p>
-      </div>
-    </div>
-
-    <div class="bg-offwhite-2 rounded-2xl overflow-hidden shadow-sm flex flex-col">
-      <div class="aspect-square bg-cream-1 flex items-center justify-center p-4">
-        <img
-          src="{% static 'img/merchandise/pythonph-fidget.jpg' %}"
-          alt="3D PythonPH Clicker Fidget"
-          class="w-full h-full object-contain"
-          loading="lazy"
-        >
-      </div>
-      <div class="p-3 sm:p-4 flex flex-col flex-1">
-        <h3 class="font-bantayog font-bold text-brown-1 text-sm sm:text-base leading-snug">3D PythonPH Clicker Fidget</h3>
-        <p class="font-nunito font-bold text-orange-2 text-sm sm:text-base mt-auto pt-3">₱250.00</p>
-      </div>
-    </div>
-
-    <div class="bg-offwhite-2 rounded-2xl overflow-hidden shadow-sm flex flex-col">
-      <div class="aspect-square bg-cream-1 flex items-center justify-center p-4">
-        <img
-          src="{% static 'img/merchandise/palayok-clicker.png' %}"
-          alt="3D Palayok Clicker Fidget (Large)"
-          class="w-full h-full object-contain"
-          loading="lazy"
-        >
-      </div>
-      <div class="p-3 sm:p-4 flex flex-col flex-1">
-        <h3 class="font-bantayog font-bold text-brown-1 text-sm sm:text-base leading-snug">3D Palayok Clicker Fidget</h3>
-        <p class="font-nunito text-brown-2 text-sm mt-1">Large</p>
-        <p class="font-nunito font-bold text-orange-2 text-sm sm:text-base mt-auto pt-3">₱350.00</p>
-      </div>
-    </div>
-
-    <div class="bg-offwhite-2 rounded-2xl overflow-hidden shadow-sm flex flex-col">
-      <div class="aspect-square bg-cream-1 flex items-center justify-center p-4">
-        <img
-          src="{% static 'img/merchandise/palayok-clicker.png' %}"
-          alt="3D Palayok Clicker Fidget (Small)"
-          class="w-full h-full object-contain"
-          loading="lazy"
-        >
-      </div>
-      <div class="p-3 sm:p-4 flex flex-col flex-1">
-        <h3 class="font-bantayog font-bold text-brown-1 text-sm sm:text-base leading-snug">3D Palayok Clicker Fidget</h3>
-        <p class="font-nunito text-brown-2 text-sm mt-1">Small</p>
-        <p class="font-nunito font-bold text-orange-2 text-sm sm:text-base mt-auto pt-3">₱300.00</p>
-      </div>
-    </div>
-
-    <div class="bg-offwhite-2 rounded-2xl overflow-hidden shadow-sm flex flex-col">
-      <div class="aspect-square bg-cream-1 flex items-center justify-center p-4">
-        <img
-          src="{% static 'img/merchandise/pythonasia-2026-socks.png' %}"
-          alt="PythonAsia Pattern Style Customized Socks (Beige)"
-          class="w-full h-full object-contain"
-          loading="lazy"
-        >
-      </div>
-      <div class="p-3 sm:p-4 flex flex-col flex-1">
-        <h3 class="font-bantayog font-bold text-brown-1 text-sm sm:text-base leading-snug">PythonAsia Pattern Style Customized Socks</h3>
-        <p class="font-nunito text-brown-2 text-sm mt-1">Beige</p>
-        <p class="font-nunito font-bold text-orange-2 text-sm sm:text-base mt-auto pt-3">₱350.00</p>
-      </div>
-    </div>
-
-    <div class="bg-offwhite-2 rounded-2xl overflow-hidden shadow-sm flex flex-col">
-      <div class="aspect-square bg-cream-1 flex items-center justify-center p-4">
-        <img
-          src="{% static 'img/merchandise/socks-pattern-pythonph.png' %}"
-          alt="PythonPH Logo Pattern Style Customized Socks (Black)"
+          src="{% static item.image %}"
+          alt="{{ item.name }}{% if item.description %} ({{ item.description }}){% endif %}"
           class="w-full h-full object-contain"
           loading="lazy"
         >
       </div>
       <div class="p-3 sm:p-4 flex flex-col flex-1">
-        <h3 class="font-bantayog font-bold text-brown-1 text-sm sm:text-base leading-snug">PythonPH Logo Pattern Style Customized Socks</h3>
-        <p class="font-nunito text-brown-2 text-sm mt-1">Black</p>
-        <p class="font-nunito font-bold text-orange-2 text-sm sm:text-base mt-auto pt-3">₱320.00</p>
+        <h3 class="font-bantayog font-bold text-brown-1 text-sm sm:text-base leading-snug">{{ item.name }}</h3>
+        {% if item.description %}
+        <p class="font-nunito text-brown-2 text-sm mt-1">{{ item.description }}</p>
+        {% endif %}
+        <p class="font-nunito font-bold text-orange-2 text-sm sm:text-base mt-auto pt-3">{{ item.price }}</p>
       </div>
     </div>
+    {% endfor %}
 
   </div>
 

app/home/views.py

@@ -102,3 +102,95 @@ class VolunteersView(InternalPageView):
 class MerchandiseView(InternalPageView):
     build_path = "merchandise/index.html"
     page_template = "internal/pages/merchandise.html"
+
+    ITEMS = [
+        {
+            "image": "img/merchandise/tshirt-kalinga-maroon.png",
+            "name": "Kalinga T-Shirt",
+            "description": "Red · XS–2XL",
+            "price": "₱500.00",
+        },
+        {
+            "image": "img/merchandise/tshirt-pythonasia-2026-white-generic.png",
+            "name": "PythonAsia 2026 T-Shirt",
+            "description": "Conference Type · White · XS–2XL",
+            "price": "₱500.00",
+        },
+        {
+            "image": "img/merchandise/leather-tray.png",
+            "name": "Leather Tray",
+            "description": "",
+            "price": "₱450.00",
+        },
+        {
+            "image": "img/merchandise/notepad-large.png",
+            "name": "Notepad",
+            "description": "80 Sheets · 4×4",
+            "price": "₱100.00",
+        },
+        {
+            "image": "img/merchandise/notepad-design1-small.png",
+            "name": "Notepad Design 1",
+            "description": "40 Sheets · 3×3",
+            "price": "₱80.00",
+        },
+        {
+            "image": "img/merchandise/notepad-design2-small.png",
+            "name": "Notepad Design 2",
+            "description": "40 Sheets · 3×3",
+            "price": "₱80.00",
+        },
+        {
+            "image": "img/merchandise/pythonasia-2026-acrylic.png",
+            "name": "Acrylic Keychain PythonAsia 2026",
+            "description": "",
+            "price": "₱100.00",
+        },
+        {
+            "image": "img/merchandise/palayok-acrylic.png",
+            "name": "Acrylic Keychain Palayok",
+            "description": "",
+            "price": "₱100.00",
+        },
+        {
+            "image": "img/merchandise/fridge-magnet.jpg",
+            "name": "Refrigerator Magnet",
+            "description": "",
+            "price": "₱150.00",
+        },
+        {
+            "image": "img/merchandise/pythonph-fidget.jpg",
+            "name": "3D PythonPH Clicker Fidget",
+            "description": "",
+            "price": "₱250.00",
+        },
+        {
+            "image": "img/merchandise/palayok-clicker.png",
+            "name": "3D Palayok Clicker Fidget",
+            "description": "Large",
+            "price": "₱350.00",
+        },
+        {
+            "image": "img/merchandise/palayok-clicker.png",
+            "name": "3D Palayok Clicker Fidget",
+            "description": "Small",
+            "price": "₱300.00",
+        },
+        {
+            "image": "img/merchandise/pythonasia-2026-socks.png",
+            "name": "PythonAsia Pattern Style Customized Socks",
+            "description": "Beige",
+            "price": "₱450.00",
+        },
+        {
+            "image": "img/merchandise/socks-pattern-pythonph.png",
+            "name": "PythonPH Logo Pattern Style Customized Socks",
+            "description": "Black",
+            "price": "₱320.00",
+        },
+    ]
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        context["merchandise_items"] = self.ITEMS
+        return context