Custom Twig Product Grid

The Competition Grid block's "Custom Twig (Advanced)" layout lets you create fully custom product cards for your competition listings.

Overview

When "Custom Twig (Advanced)" is selected:

• A CSS Styles editor appears for styling (loaded once per page)

• A Card HTML + Twig Code editor appears for your card template

• Each product is rendered using your custom template

• Dynamic Alpine.js components are available for countdowns and progress bars

How to Use

1. In the admin panel, edit any page

2. Add a Competition Grid block

3. In the "Competition Card Style" dropdown, select "Custom Twig (Advanced)"

4. Expand the "Custom Card Template" section

5. Write your CSS in the CSS Styles field

6. Write your card HTML + Twig in the Card HTML + Twig Code field

7. Save the page and preview

Available Variables

Each card receives a product object with the following fields:

Field	Type	Description	Example
product.id	int	Product ID	123
product.title	string	Competition name	"Win a BMW M3"
product.subtitle	string	Optional subtitle	"Competition of the Month"
product.slug	string	Product URL slug	"win-a-bmw-m3"
product.url	string	Product page link	"/product/win-a-bmw-m3"
product.image_url	string	Featured image URL	Full URL
product.slider_image_url	string	Slider/hero image URL	Full URL
product.portrait_image_url	string	Portrait image URL	Full URL or null
product.featured_video_url	string	Featured video URL (if uploaded)	Full URL or null
product.video_embed_url	string	Player address for the Video URL, or null	"https://www.youtube-nocookie.com/embed/..."
product.video_embed_type	string	"iframe" (YouTube or Vimeo) or "video" (video file), or null	"iframe"
product.video_embed_mime_type	string	File type for a video file, otherwise null	"video/mp4"
product.video_embed_orientation	string	"portrait" (YouTube Shorts) or "landscape", or null	"landscape"
product.price	string	Current price (formatted)	"£1.99"
product.price_raw	float	Current price (numeric, for calculations)	1.99
product.price_display	string	Pretty current price (shows "Free" or "50p" for small amounts)	"£1.99"
product.original_price	string	Original price if on sale	"£2.99"
product.original_price_raw	float	Original price as a number (for calculations)	2.99
product.is_on_sale	bool	Whether on sale	true/false
product.is_free	bool	Whether the product is free to enter	true/false
product.has_question	bool	Whether product requires question answer	true/false
product.question	string	The entry question text, if any	"What colour is the sky?"
product.cash_alt	string	Cash alternative	"£50,000"
product.cash_alt_raw	float	Cash alternative as a number	50000
product.draw_date	string	Human readable draw date	"Draw On Mon Jan 5th 7:00pm"
product.end_date	string	Human readable end date	"Today 7:00pm"
product.start_date_raw	string	ISO start date (Y-m-d H:i:s)	"2026-01-01 09:00:00"
product.start_date	string	Human readable start date	"Tomorrow 9:00am"
product.start_date_seconds	int	Seconds until the competition opens (0 once open)	0
product.has_started	bool	Whether the start date has passed	true
product.draw_date_raw	string	Draw datetime (Y-m-d H:i:s)	"2026-01-05 19:00:00"
product.end_date_raw	string	End datetime (Y-m-d H:i:s)	"2026-01-05 19:00:00"
product.draw_date_seconds	int	Seconds until draw	86400
product.end_date_seconds	int	Seconds until end (for countdown)	3600
product.max_tickets	int	Total tickets available	5000
product.sold_tickets	int	Tickets sold	3421
product.tickets_remaining	int	Tickets left to sell	1579
product.percent_sold	float	Percentage sold	68.4
product.max_per_user	int	Max tickets per user (0 means no limit)	50
product.instant_wins	int	Number of instant wins	5
product.instant_wins_remaining	int	Remaining instant wins not yet won	3
product.game_type	string	Type of game	"standard"
product.has_ended	bool	Whether competition ended	true/false
product.is_sold_out	bool	Whether the product is sold out	true/false
product.is_active	bool	Whether the product is active	true/false
product.is_featured	bool	Whether the product is in the slider	true/false
product.auto_draw	bool	Whether the draw happens automatically	true/false
product.leaderboard_enabled	bool	Whether the product has a leaderboard	true/false
product.winner_qty	int	Number of winners	1
product.simple_max_ticket	bool	Whether the product shows percentage sold only	true/false
product.category	string	First category name	"Cars"
product.categories	array	All category names	["Cars", "Featured"]
product.description	string	Product description	"Win this amazing..."
product.gallery	array	Array of gallery image URLs	["https://...", "https://..."]

The grid only shows competitions that have reached their start date, so product.has_started is always true here. Scheduled competitions join the grid automatically once they open. To embed a competition's Video URL, see the Video URL Embed example in Custom Twig Block.

Dynamic Components

Countdown Timer

Display a live countdown to the competition end time:

<div x-data="raffleCountdown({{ product.end_date_seconds }})" class="countdown">
  <span x-text="time.days"></span>d
  <span x-text="pad(time.hours)"></span>h
  <span x-text="pad(time.minutes)"></span>m
  <span x-text="pad(time.seconds)"></span>s
</div>

Note: Use end_date_seconds (not end_date_raw) to avoid timezone issues.

Properties:

• time.days - Days remaining

• time.hours - Hours (0-23)

• time.minutes - Minutes (0-59)

• time.seconds - Seconds (0-59)

• hasEnded - Boolean, true when countdown reaches zero

• pad(num) - Zero-pad numbers (e.g., "05")

Progress Bar

Display ticket sales progress:

<div x-data="raffleProgress({{ product.percent_sold }})" class="progress-bar">
  <div class="progress-fill" :style="'width:' + width + '%'"></div>
</div>

Properties:

• percent - The percentage value (0-100)

• width - Display width (minimum 3% for visibility)

Quick Add to Cart

Add tickets directly to cart without leaving the page. This component handles validation, loading states, and cart updates via AJAX.

<div x-data="raffleQuickAdd({
    productId: {{ product.id }},
    price: {{ product.price_raw }},
    maxTickets: {{ product.max_per_user > 0 ? product.max_per_user : 100 }},
    hasQuestion: {{ product.has_question ? 'true' : 'false' }},
    hasEnded: {{ product.has_ended ? 'true' : 'false' }}
})">
    <template x-if="!hasQuestion && !hasEnded">
        <div class="flex items-center gap-2">
            <button @click="decrement" :disabled="tickets <= 1" class="btn">-</button>
            <span x-text="tickets"></span>
            <button @click="increment" :disabled="tickets >= maxTickets" class="btn">+</button>
            <button @click="addToCart" :disabled="!canAdd" class="btn-primary">
                <span x-show="!loading">Quick Add</span>
                <span x-show="loading">Adding...</span>
            </button>
        </div>
    </template>
    <span x-show="added" x-transition class="text-green-500">Added!</span>
    <span x-show="error" x-text="errorMessage" class="text-red-500"></span>
</div>

Note: Products with questions must use the full product page. The component automatically hides for these products.

Configuration: | Option | Type | Description | |--------|------|-------------| | productId | int | Product ID (required) | | price | float | Price for default ticket calculation (use price_raw) | | maxTickets | int | Maximum tickets allowed per user | | hasQuestion | bool | Whether product requires question answer | | hasEnded | bool | Whether competition has ended |

Properties:

• tickets - Current ticket quantity (auto-calculated based on price)

• loading - True while adding to cart

• added - True after successful add (resets after 5s)

• error - True if an error occurred

• errorMessage - Error message text

• requiresLogin - True if user must login first

• canAdd - Computed: true if add button should be enabled

Methods:

• increment() - Increase ticket count

• decrement() - Decrease ticket count

• addToCart() - Submit to cart (handles AJAX, toast notifications, Livewire cart sync)

Events Dispatched:

• cartUpdated - Livewire event to refresh cart components

Default Ticket Calculation: The component automatically sets a sensible default ticket quantity based on price:

• £20+ → 2 tickets

• £10-20 → 4 tickets

• £3-10 → 6 tickets

• £1-3 → 10 tickets

• Lower prices → Higher defaults (up to 1000 for £0.01)

Code Examples

Example 1: Simple Card

CSS Styles:

.simple-card {
  background: #1a1a2e;
  border-radius: 12px;
  overflow: hidden;
}
.simple-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.simple-card-body {
  padding: 16px;
}
.simple-card h3 {
  color: white;
  font-size: 16px;
  margin: 0 0 8px;
}
.simple-card .price {
  color: #4ade80;
  font-size: 20px;
  font-weight: bold;
}

Card HTML:

<div class="simple-card">
  <img src="{{ product.image_url }}" alt="{{ product.title }}">
  <div class="simple-card-body">
    <h3>{{ product.title }}</h3>
    <p class="price">{{ product.price }}</p>
  </div>
</div>

Example 2: Card with Countdown

CSS Styles:

.countdown-card {
  background: #16213e;
  border-radius: 12px;
  overflow: hidden;
}
.countdown-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.countdown-card-body {
  padding: 20px;
}
.countdown-card h3 {
  color: white;
  font-size: 18px;
  margin: 0 0 10px;
}
.countdown-card .price {
  color: #4ade80;
  font-size: 24px;
  font-weight: bold;
}
.countdown-card .countdown {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}
.countdown-card .countdown span {
  background: #0f0f23;
  color: #9ca3af;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 13px;
}
.countdown-card .ended {
  color: #ef4444;
  font-weight: bold;
}

Card HTML:

<div class="countdown-card">
  <img src="{{ product.image_url }}" alt="{{ product.title }}">
  <div class="countdown-card-body">
    <h3>{{ product.title }}</h3>
    <p class="price">{{ product.price }}</p>

    <div x-data="raffleCountdown({{ product.end_date_seconds }})">
      <template x-if="!hasEnded">
        <div class="countdown">
          <span x-text="time.days + 'd'"></span>
          <span x-text="pad(time.hours) + 'h'"></span>
          <span x-text="pad(time.minutes) + 'm'"></span>
          <span x-text="pad(time.seconds) + 's'"></span>
        </div>
      </template>
      <template x-if="hasEnded">
        <p class="ended">Competition Ended</p>
      </template>
    </div>
  </div>
</div>

Example 3: Full Featured Card

CSS Styles:

.featured-card {
  background: #1a1a2e;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
.featured-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.featured-card-body {
  padding: 20px;
}
.featured-card h3 {
  color: white;
  font-size: 18px;
  margin: 0 0 8px;
  line-height: 1.3;
}
.featured-card .subtitle {
  color: #9ca3af;
  font-size: 13px;
  margin-bottom: 12px;
}
.featured-card .price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}
.featured-card .price {
  color: #4ade80;
  font-size: 24px;
  font-weight: bold;
}
.featured-card .original-price {
  color: #6b7280;
  text-decoration: line-through;
  font-size: 14px;
}
.featured-card .countdown {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}
.featured-card .countdown span {
  background: #0f0f23;
  color: white;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
}
.featured-card .progress-bar {
  height: 6px;
  background: #374151;
  border-radius: 3px;
  overflow: hidden;
}
.featured-card .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4ade80, #22c55e);
  border-radius: 3px;
}
.featured-card .stats {
  display: flex;
  justify-content: space-between;
  color: #9ca3af;
  font-size: 12px;
  margin-top: 6px;
}
.featured-card .badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #fbbf24;
  color: #000;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}
.featured-card .cash-alt {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
}

Card HTML:

<div class="featured-card">
  <img src="{{ product.image_url }}" alt="{{ product.title }}">

  {% if product.instant_wins > 0 %}
    <span class="badge">{{ product.instant_wins }} Instant Wins ({{ product.instant_wins_remaining }} left)</span>
  {% endif %}

  {% if product.cash_alt %}
    <span class="cash-alt">{{ product.cash_alt }}</span>
  {% endif %}

  <div class="featured-card-body">
    <h3>{{ product.title }}</h3>

    {% if product.subtitle %}
      <p class="subtitle">{{ product.subtitle }}</p>
    {% endif %}

    <div class="price-row">
      <span class="price">{{ product.price }}</span>
      {% if product.is_on_sale %}
        <span class="original-price">{{ product.original_price }}</span>
      {% endif %}
    </div>

    <!-- Countdown Timer -->
    <div x-data="raffleCountdown({{ product.end_date_seconds }})" class="countdown">
      <span x-text="time.days + 'd'"></span>
      <span x-text="pad(time.hours) + 'h'"></span>
      <span x-text="pad(time.minutes) + 'm'"></span>
      <span x-text="pad(time.seconds) + 's'"></span>
    </div>

    <!-- Progress Bar -->
    <div x-data="raffleProgress({{ product.percent_sold }})" class="progress-bar">
      <div class="progress-fill" :style="'width:' + width + '%'"></div>
    </div>
    <div class="stats">
      <span>{{ product.sold_tickets }}/{{ product.max_tickets }}</span>
      <span>{{ product.percent_sold|round(1) }}% sold</span>
    </div>
  </div>
</div>

Tips

1. Separate CSS from HTML - Put all styles in the CSS field, keep your card HTML clean

2. Use dynamic components - Countdown timers update live without page refresh

3. Handle empty values - Use {{ subtitle|default('') }} for optional fields

4. Test on mobile - Cards display in a 2-column grid on mobile, 3 columns on desktop

5. Use end_date_seconds - For countdown timers, always use seconds to avoid timezone issues

Common Patterns

Sale Badge

{% if product.is_on_sale %}
  <span class="sale-badge">SALE</span>
{% endif %}

Conditional Subtitle

{% if product.subtitle %}
  <p>{{ product.subtitle }}</p>
{% endif %}

Game Type Badge

{% if product.game_type != 'standard' %}
  <span class="game-badge">{{ product.game_type|upper }}</span>
{% endif %}

Multiple Winners

{% if product.winner_qty > 1 %}
  <span>{{ product.winner_qty }} Winners!</span>
{% endif %}

Quick Add Button (Inline)

{% if not product.has_question and not product.has_ended %}
<div x-data="raffleQuickAdd({
    productId: {{ product.id }},
    price: {{ product.price_raw }},
    maxTickets: {{ product.max_per_user > 0 ? product.max_per_user : 100 }},
    hasQuestion: false,
    hasEnded: false
})" class="quick-add" @click.stop>
    <button @click="addToCart" :disabled="loading" class="quick-add-btn">
        <span x-show="!loading && !added">+ Add</span>
        <span x-show="loading">...</span>
        <span x-show="added">✓</span>
    </button>
</div>
{% endif %}

Tip: Use @click.stop on the Quick Add container to prevent the card link from triggering when clicking the add button.

Example 4: Card with Quick Add

CSS Styles:

.quickadd-card {
  background: #1a1a2e;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
.quickadd-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.quickadd-card-body {
  padding: 20px;
}
.quickadd-card h3 {
  color: white;
  font-size: 18px;
  margin: 0 0 8px;
}
.quickadd-card .price {
  color: #4ade80;
  font-size: 24px;
  font-weight: bold;
}
.quickadd-card .quick-add {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.quickadd-card .qty-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #374151;
  background: transparent;
  color: white;
  border-radius: 6px;
  cursor: pointer;
}
.quickadd-card .qty-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.quickadd-card .qty-display {
  color: white;
  font-size: 16px;
  min-width: 30px;
  text-align: center;
}
.quickadd-card .add-btn {
  flex: 1;
  background: #4ade80;
  color: #000;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
}
.quickadd-card .add-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
.quickadd-card .add-btn.added {
  background: #22c55e;
}
.quickadd-card .view-btn {
  display: block;
  text-align: center;
  background: #374151;
  color: white;
  padding: 10px;
  border-radius: 6px;
  margin-top: 12px;
  text-decoration: none;
}

Card HTML:

<div class="quickadd-card">
  <img src="{{ product.image_url }}" alt="{{ product.title }}">

  <div class="quickadd-card-body">
    <h3>{{ product.title }}</h3>
    <p class="price">{{ product.price }}</p>

    {% if not product.has_question and not product.has_ended %}
      {# Quick Add Component - stop click propagation to prevent card link #}
      <div x-data="raffleQuickAdd({
          productId: {{ product.id }},
          price: {{ product.price_raw }},
          maxTickets: {{ product.max_per_user > 0 ? product.max_per_user : 100 }},
          hasQuestion: false,
          hasEnded: false
      })" class="quick-add" @click.stop>
        <button @click="decrement" :disabled="tickets <= 1" class="qty-btn">-</button>
        <span class="qty-display" x-text="tickets"></span>
        <button @click="increment" :disabled="tickets >= maxTickets" class="qty-btn">+</button>
        <button @click="addToCart" :disabled="loading" class="add-btn" :class="{ 'added': added }">
          <span x-show="!loading && !added">Add to Cart</span>
          <span x-show="loading">Adding...</span>
          <span x-show="added">Added!</span>
        </button>
      </div>
    {% else %}
      {# Products with questions or ended - link to product page #}
      <a href="{{ product.url }}" class="view-btn" @click.stop>
        {% if product.has_ended %}
          View Results
        {% else %}
          View & Enter
        {% endif %}
      </a>
    {% endif %}
  </div>
</div>

---

AI Context

For AI Assistants: This documents the RaffleX Competition Grid block's Twig layout for creating custom product cards.

Block Structure:

• CSS Styles field (loaded once via @pushOnce)

• Card HTML + Twig field (rendered per product)

• Each card wrapped in <a href> to product page automatically

Product object fields: id, title, subtitle, slug, url, image_url, featured_video_url, video_embed_url, video_embed_type, video_embed_mime_type, video_embed_orientation, slider_image_url, portrait_image_url, price, price_raw, price_display, original_price, original_price_raw, is_on_sale, is_free, has_question, question, cash_alt, cash_alt_raw, draw_date, end_date, start_date, start_date_raw, start_date_seconds, has_started, draw_date_raw, end_date_raw, draw_date_seconds, end_date_seconds, max_tickets, sold_tickets, tickets_remaining, percent_sold, max_per_user, instant_wins, instant_wins_remaining, game_type, has_ended, is_sold_out, is_active, is_featured, auto_draw, leaderboard_enabled, winner_qty, simple_max_ticket, category, categories, description, gallery

Dynamic Alpine Components:

• raffleCountdown(seconds) - Live countdown (use end_date_seconds). Props: time.days/hours/minutes/seconds, hasEnded, pad()

• raffleProgress(percent) - Progress bar. Props: percent, width

• raffleQuickAdd(config) - Add to cart without page navigation. Config: productId, price, maxTickets, hasQuestion, hasEnded. Props: tickets, loading, added, error, errorMessage, requiresLogin, canAdd. Methods: increment(), decrement(), addToCart()

Grid Layout: 2 columns mobile, 3 columns desktop with gap spacing

---

See also: Settings Variables for the global settings available in all Twig templates, and the Custom Twig Slider for building a custom hero section.