Events Index#

Create a file named index.html file in your templates/shop/events folder. This folder may vary depending on your chosen site structure. Enter the content as below:

We're just using the default Commerce templates here, so change this to your needs.

{% extends 'shop/_layouts/main' %}

{% block main %}
    {% for event in %}
        <div class="md:flex product bg-white mb-4 p-8 rounded items-center text-center md:text-left">
            <div class="md:w-2/6 md:p-4">
                <h3>{% if event.url %}{{ }}{% else %}{{ event.title }}{% endif %}</h3>

                {% if event.isAvailable %}
                    <form method="POST" class="add-to-cart-form">
                        <input type="hidden" name="action" value="commerce/cart/update-cart">
                        {{ redirectInput('shop/cart') }}
                        {{ csrfInput() }}

                        <input type="number" name="qty" value="1">

                        <select name="purchasableId" class="purchasableId">
                            {%- for ticket in event.availableTickets() -%}
                                <option value="{{ ticket.purchasableId }}" {% if not ticket.isAvailable %}disabled{% endif %}>
                                    {{ }} - {{ ticket.price | commerceCurrency(cart.currency) }}
                            {%- endfor -%}

                        <button type="submit">Add to cart</button>
                {% else %}
                    <strong>Sold out</strong>
                {% endif %}
    {% endfor %}
{% endblock %}

Past Events#

The call will by default only return events that are currently on, or upcoming events. This is because the default query returned will be limiting event elements that have an end date greater than, or equal to the current time.

If you'd like to show past events, you can use the following:

{% for event in{ endDate: null }).all() %}
{% endfor %}

See Event Queries for more information.

Previous ← Available Variables Next Single Event →