Add pattern to plushie page (#813)

Author: LMBishop

_collections/_merch/plushies.md

@@ -2,12 +2,24 @@
 layout: merch
 title: TeX Plushies
 slug: plushies
-purchase-url: https://www.guildofstudents.com/shop/product/10317460/
-options:
-  - name: Plushie
-    quantity: 1
-    price: 13.99
-    note: Limited to members only
+purchase-options:
+  - url: https://www.guildofstudents.com/shop/product/10317460/
+    type: guild
+    text: Buy on Guild website
+    icon: fa-arrow-up-right-from-square
+    options:
+      - name: Plushie
+        quantity: 1
+        price: 13.99
+        note: Limited to members only
+  - url: /assets/tex-pattern.pdf
+    type: download
+    text: Download
+    icon: fa-download
+    options:
+      - name: Pattern
+        price: 0
+        note: For if you want to make one yourself!
 gallery:
   - url: /assets/images/tex-plushie/20250426_0008_lowres.jpg
     alt: TeX reading a book

_layouts/merch.html

@@ -32,7 +32,8 @@ <h2>Gallery</h2>
       {% endif %}
       <div class="purchase fadein">
         <h2>Purchase options</h2>
-        {% for option in page.options %}
+        {% for group in page.purchase-options %}
+          {% for option in group.options %}
           <div class="purchase-option">
             {% if option.quantity %}
             <div class="option-label with-quantity">
@@ -45,14 +46,19 @@ <h2>Purchase options</h2>
                 <span class="note">{{ option.note }}</span>
               {% endif %}
             </div>
-            <span class="price">£{{ option.price }}</span>
+            {% if option.price > 0 %}
+              <span class="price">£{{ option.price }}</span>
+            {% else %}
+              <span class="price">Free</span>
+            {% endif %}
           </div>
+          {% endfor %}
+          {% if group.url %}
+            <a href="{{ group.url }}" target="_blank" class="button {{ group.type }}-button"><i class="fas {{ group.icon }}"></i>{{ group.text }}</a>
+          {% else %}
+            <a href="#" class="button unavailable-button"><i class="fas fa-ban"></i>Currently unavailable</a>
+          {% endif %}
         {% endfor %}
-        {% if page.purchase-url %}
-          <a href="{{ page.purchase-url }}" target="_blank" class="button guild-button">Buy on Guild website <i class="fas fa-arrow-right"></i></a>
-        {% else %}
-          <a href="#" class="button unavailable-button"><i class="fas fa-ban"></i>Currently unavailable</a>
-        {% endif %}
       </div>
     </div>
   </main>

assets/tex-pattern.pdf

@@ -144,6 +144,15 @@
   background-color: #5bbaa2;
 }
 
+.download-button {
+  background-color: lightgray;
+  color: black;
+
+  i {
+    color: black;
+  }
+}
+
 .unavailable-button {
   background-color: gray;
   cursor: not-allowed;
@@ -180,7 +189,7 @@
 
     .purchase {
       width: 100%;
-      top: -60px;
+      position: static;
     }
 
     .merch-description {

css/merch.scss

@@ -25,10 +25,11 @@ <h2 class="merch-title">{{ merch.title }}</h2>
         <div class="merch-excerpt">
           <p>{{ merch.excerpt | strip_html }}</p>
         </div>
-        {% if merch.options %}
+        <!-- todo: figure out something better to put here -->
+        <!-- {% if merch.options %}
         {% assign options = merch.options | sort: 'price' %}
         <p class="merch-price">from £{{ options[0]['price'] }}</h2>
-          {% endif %}
+        {% endif %} -->
       </div>
     </a>
     {% endfor %}