Skip to content

refactor: merchandise catalog with dynamic items dictionary #60

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
zorexsalvo merged 1 commit into from
Mar 12, 2026
Merged

refactor: merchandise catalog with dynamic items dictionary #60

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
266 changes: 35 additions & 231 deletions app/home/templates/internal/pages/merchandise.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>

Expand Down
92 changes: 92 additions & 0 deletions app/home/views.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Loading