{% extends "Global/layout.html.twig" %}{% if category != "all" %} {% set pagetitle = category.name %}{% else %} {% set pagetitle = 'Events'|trans %}{% endif %}{% block title %}{{pagetitle}}{% endblock %}{% block stylesheets %} {{ encore_entry_link_tags('events') }}{% endblock %}{% block content %} {% if category != "all" %} {% set navigation = [{"events": ("Events"|trans), "current" : (pagetitle)}] %} {% else %} {% set navigation = [{"current" : (pagetitle)}] %} {% endif %} {% include "Global/navigation.html.twig" with navigation %} <section class="section-content bg-white padding-y"> <div class="{{ services.getSetting("app_layout") }}"> {% set eventsoncalendar = [] %} {% set eventsonmap = [] %} {% for event in events %} {% for eventdate in event.eventdates %} {% if eventdate.isOnSale %} {% if eventdate.venue and services.getSetting("show_map_button") == "yes" %} {% if eventdate.venue.lat and eventdate.venue.lng %} {% if eventsonmap|length == 0 %} {% set eventsonmap = eventsonmap|merge([{"name": event.name, "image": event.imageName ? asset(event.getImagePath) : event.getImagePlaceholder, "address": (eventdate.venue.name ~ ": " ~eventdate.venue.stringifyAddress),"date": (eventdate.startdate|localizeddate('none', 'none', app.request.locale, date_timezone, date_format)), "price": (eventdate.isFree ? "Free"|trans : eventdate.getCheapestTicket.getSalePrice), "lat":eventdate.venue.lat, "lng":eventdate.venue.lng, "link": (path('event', { slug: event.slug })) }]) %} {% else %} {% for eventonmap in eventsonmap %} {% if eventonmap.lat != eventdate.venue.lat and eventonmap.lng != eventdate.venue.lng %} {% set eventsonmap = eventsonmap|merge([{"name": event.name, "image": event.imageName ? asset(event.getImagePath) : event.getImagePlaceholder, "address": (eventdate.venue.name ~ ": " ~eventdate.venue.stringifyAddress),"date": (eventdate.startdate|localizeddate('none', 'none', app.request.locale, date_timezone, date_format)), "price": (eventdate.isFree ? "Free"|trans : eventdate.getCheapestTicket.getSalePrice), "lat":eventdate.venue.lat, "lng":eventdate.venue.lng, "link": (path('event', { slug: event.slug })) }]) %} {% endif %} {% endfor %} {% endif %} {% endif %} {% endif %} {% if services.getSetting("show_calendar_button") == "yes" %} {% set eventsoncalendar = eventsoncalendar|merge([{"title": event.name, "start":eventdate.startdate|date('Y-m-d H:i'), "end": (eventdate.enddate ? eventdate.enddate|date('Y-m-d H:i') : ''), "url": (path('event', {slug : event.slug})) }]) %} {% endif %} {% endif %} {% endfor %} {% endfor %} {% if eventsonmap|length > 0 and services.getSetting("show_map_button") == "yes" and google_maps_api_key != "" %} <div id="events-map" data-pin-path="{{ asset('assets/img/icons/pin.png') }}" data-events="{{ eventsonmap|json_encode() }}" class="mb-4 collapse vh-90"></div> {% endif %} {% if eventsoncalendar|length > 0 and services.getSetting("show_calendar_button") == "yes" %} <div id="events-calendar" data-default-date="{{ "now"|date('Y-m-d') }}" data-events="{{ eventsoncalendar|json_encode() }}" class="mb-4 collapse"></div> {% endif %} <div class="box shadow-none bg-gray mb-4"> <div class="row"> <div class="col-sm-12 col-lg-6 text-center text-lg-left mb-3 mb-lg-0"> <span class="center-lg-y text-muted">{{ "%resultsCount% event(s) found"|trans({'%resultsCount%': events.getTotalItemCount}) }}</span> </div> {% if events.getTotalItemCount > 0 %} <div class="col-sm-12 col-lg-6 text-center text-lg-right"> {% if eventsonmap|length > 0 and services.getSetting("show_map_button") == "yes" and google_maps_api_key != "" %} <a href="#events-map" class="btn btn-primary has-tooltip" data-toggle="collapse" title="{{"Show events on map"|trans}}" aria-expanded="false" aria-controls="events-map"><i class="fas fa-map-marked-alt fa-fw"></i></a> {% endif %} {% if eventsoncalendar|length > 0 and services.getSetting("show_calendar_button") == "yes" %} <a href="#events-calendar" class="btn btn-primary has-tooltip" data-toggle="collapse" title="{{"Show events calendar"|trans}}" aria-expanded="false" aria-controls="events-calendar"><i class="far fa-calendar fa-fw"></i></a> {% endif %} {% if services.getSetting("show_rss_feed_button") == "yes" %} <a href="{{ services.getSetting("website_url")~"/rss" }}" class="btn btn-primary" data-toggle="tooltip" title="{{"Events RSS feed"|trans}}" rel="noopener" target="_blank"><i class="fas fa-rss fa-fw"></i></a> {% endif %} </div> {% endif %} </div> </div> <div class="row"> <aside class="col-lg-3 order-2 order-lg-1"> <div class="card card-filter"> <form id="filter-form" method="get"> <article class="card-group-item"> <header class="card-header"> <a href="#" data-toggle="collapse" data-target="#filter-keyword"> <i class="icon-action fa fa-chevron-down"></i> <h6 class="title">{{ "Keyword"|trans }}</h6> </a> </header> <div class="filter-content collapse show" id="filter-keyword"> <div class="card-body"> <input id="keyword" name="keyword" type="text" class="form-control" value="{{ app.request.get('keyword') }}"> </div> </div> </article> {% if services.getSetting("show_category_filter") == "yes" %} <article class="card-group-item"> <header class="card-header"> <a href="#" data-toggle="collapse" data-target="#filter-category"> <i class="icon-action fa fa-chevron-down"></i> <h6 class="title">{{ "Category"|trans }}</h6> </a> </header> <div class="filter-content collapse show" id="filter-category"> <div class="card-body"> <select id="category" name="category" class="select2" data-sort-options="1"> <option value=""> </option> {% for category in services.getCategories({}).getQuery().getResult() %} <option value="{{ category.slug }}">{{ category.name }}</option> {% endfor %} </select> </div> </div> </article> {% endif %} {% if services.getSetting("show_location_filter") == "yes" %} <article class="card-group-item"> <header class="card-header"> <a href="#" data-toggle="collapse" data-target="#filter-location"> <i class="icon-action fa fa-chevron-down"></i> <h6 class="title">{{ "Location"|trans }}</h6> </a> </header> <div class="filter-content collapse show" id="filter-location"> <div class="card-body"> <div class="custom-control custom-checkbox form-check-input"> <div class="form-check mb-4 filter-online-container"> <input type="checkbox" class="custom-control-input" id="filter-online-only" name="onlineonly" value="1"> <label class="custom-control-label" for="filter-online-only">{{ "Online events only"|trans }}</label> </div> </div> <div class="location-based-filters"> {% set userLocation = services.locateUser() %} {% if userLocation %} <div class="custom-control custom-checkbox form-check-input"> <div class="form-check mb-4"> <input type="checkbox" class="custom-control-input" id="filter-local-only" name="localonly" value="1"> <label class="custom-control-label" for="filter-local-only">{{ "Local events only"|trans }}</label> </div> </div> <p id="user-country" class="text-muted">{{ "Events in %countryname%"|trans({"%countryname%" : userLocation['country'].name}) }} <span class="flag flag-{{userLocation['country'].code|lower}} ml-2"></span></p> {% endif %} <div id="filter-country-container" class="mt-4"> <label for="country">{{ "Country"|trans }}</label> <select id="country" class="select2" name="country" data-sort-options="1"> <option value=""> </option> {% for country in services.getCountries({}).getQuery().getResult() %} <option value="{{ country.slug }}">{{ country.name }}</option> {% endfor %} </select> </div> <div id="filter-location-container" class="mt-4"> <label for="location">{{ "State / City"|trans }}</label> <input id="location" name="location" type="text" class="form-control" value="{{ app.request.get('location') }}"> </div> </div> </div> </div> </article> {% endif %} {% if services.getSetting("show_date_filter") == "yes" %} <article class="card-group-item"> <header class="card-header"> <a href="#" data-toggle="collapse" data-target="#filter-date"> <i class="icon-action fa fa-chevron-down"></i> <h6 class="title">{{ "Date"|trans }}</h6> </a> </header> <div class="filter-content collapse show" id="filter-date"> <div class="card-body"> <div class="form-check"> <div class="float-left custom-control custom-radio form-check-input"> <input type="radio" class="custom-control-input" id="date-today" name="startdate" value="today"> <label class="custom-control-label" for="date-today">{{ "Today"|trans }}</label> </div> <span class="float-right form-check-label"> <span class="badge badge-light round">{{ services.getEvents({"count": true, "startdate" : ("now"|date("Y-m-d"))}).getQuery().getSingleScalarResult() }}</span> </span> <div class="clearfix"></div> </div> <div class="form-check"> <div class="float-left custom-control custom-radio form-check-input"> <input type="radio" class="custom-control-input" id="date-tomorrow" name="startdate" value="tomorrow"> <label class="custom-control-label" for="date-tomorrow">{{ "Tomorrow"|trans }}</label> </div> <span class="float-right form-check-label"> <span class="badge badge-light round">{{ services.getEvents({"count": true, "startdate" : ("now"|date_modify("+1 day")|date("Y-m-d"))}).getQuery().getSingleScalarResult() }}</span> </span> <div class="clearfix"></div> </div> <div class="form-check"> <div class="float-left custom-control custom-radio form-check-input"> <input type="radio" class="custom-control-input" id="date-thisweekend" name="startdate" value="thisweekend"> <label class="custom-control-label" for="date-thisweekend"> {{ "This weekend"|trans }} </label> </div> <span class="float-right form-check-label"> <span class="badge badge-light round">{{ services.getEvents({"count": true, "startdatemin" : ("now"|date_modify("saturday this week")|date("Y-m-d")), "startdatemax" : ("now"|date_modify("sunday this week")|date("Y-m-d"))}).getQuery().getSingleScalarResult() }}</span> </span> <div class="clearfix"></div> </div> <div class="form-check"> <div class="float-left custom-control custom-radio form-check-input"> <input type="radio" class="custom-control-input" id="date-thisweek" name="startdate" value="thisweek"> <label class="custom-control-label" for="date-thisweek"> {{ "This week"|trans }} </label> </div> <span class="float-right form-check-label"> <span class="badge badge-light round">{{ services.getEvents({"count": true, "startdatemin" : ("now"|date_modify("monday this week")|date("Y-m-d")), "startdatemax" : ("now"|date_modify("sunday this week")|date("Y-m-d"))}).getQuery().getSingleScalarResult() }}</span> </span> <div class="clearfix"></div> </div> <div class="form-check"> <div class="float-left custom-control custom-radio form-check-input"> <input type="radio" class="custom-control-input" id="date-nextweek" name="startdate" value="nextweek"> <label class="custom-control-label" for="date-nextweek"> {{ "Next week"|trans }} </label> </div> <span class="float-right form-check-label"> <span class="badge badge-light round">{{ services.getEvents({"count": true, "startdatemin" : ("now"|date_modify("monday next week")|date("Y-m-d")), "startdatemax" : ("now"|date_modify("sunday next week")|date("Y-m-d"))}).getQuery().getSingleScalarResult() }}</span> </span> <div class="clearfix"></div> </div> <div class="form-check"> <div class="float-left custom-control custom-radio form-check-input"> <input type="radio" class="custom-control-input" id="date-thismonth" name="startdate" value="thismonth"> <label class="custom-control-label" for="date-thismonth"> {{ "This month"|trans }} </label> </div> <span class="float-right form-check-label"> <span class="badge badge-light round">{{ services.getEvents({"count": true, "startdatemin" : ("now"|date("Y-m-01")), "startdatemax" : ("now"|date("Y-m-t"))}).getQuery().getSingleScalarResult() }}</span> </span> <div class="clearfix"></div> </div> <div class="form-check"> <div class="float-left custom-control custom-radio form-check-input"> <input type="radio" class="custom-control-input" id="date-nextmonth" name="startdate" value="nextmonth"> <label class="custom-control-label" for="date-nextmonth"> {{ "Next month"|trans }} </label> </div> <span class="float-right form-check-label"> <span class="badge badge-light round">{{ services.getEvents({"count": true, "startdatemin" : ("now"|date_modify("+1 month")|date("Y-m-01")), "startdatemax" : ("now"|date_modify("+1 month")|date("Y-m-t"))}).getQuery().getSingleScalarResult() }}</span> </span> <div class="clearfix"></div> </div> <div class="form-check"> <div class="float-left custom-control custom-radio form-check-input"> <input type="radio" class="custom-control-input datepicker" id="date-pickadate" name="startdate" value="all"> <label class="custom-control-label" for="date-pickadate"> {{ "Pick a date"|trans }} </label> </div> <div class="clearfix"></div> </div> </div> </div> </article> {% endif %} {% if services.getSetting("show_ticket_price_filter") == "yes" %} <article class="card-group-item"> <header class="card-header"> <a href="#" data-toggle="collapse" data-target="#filter-price"> <i class="icon-action fa fa-chevron-down"></i> <h6 class="title">{{ "Ticket price"|trans }}</h6> </a> </header> <div class="filter-content collapse show" id="filter-price"> <div class="card-body"> <div class="custom-control custom-checkbox form-check-input ml-0 mb-4"> <input type="checkbox" class="custom-control-input" id="free-events-only" name="freeonly" value="1"> <label class="custom-control-label" for="free-events-only"> {{ "Free events only"|trans }} </label> </div> <div class="events-price-range-slider-wrapper"> <div class="range-slider mb-3" data-min="0" data-max="10000" data-start-left="{{ app.request.get('pricemin') ?? "0" }}" data-start-right="{{ app.request.get('pricemax') ?? "10000" }}"></div> <div class="row ranger-slider-inputs"> <div class="col-12 col-sm-6"> <label for="pricemin">{{"Min"|trans }}</label> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">{{ services.getSetting('currency_symbol') }}</span> </div> <input id="pricemin" name="pricemin" type="text" class="form-control range-slider-min-input" value="{{ app.request.get('pricemin') }}" placeholder="{{ "Min"|trans }}"> </div> </div> <div class="col-12 col-sm-6"> <label for="pricemax">{{"Max"|trans }}</label> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">{{ services.getSetting('currency_symbol') }}</span> </div> <input id="pricemax" name="pricemax" type="text" class="form-control range-slider-max-input" value="{{ app.request.get('pricemax') }}" placeholder="{{ "Max"|trans }}"> </div> </div> </div> </div> </div> </div> </article> {% endif %} {% if services.getSetting("show_audience_filter") == "yes" %} <article class="card-group-item"> <header class="card-header"> <a href="#" data-toggle="collapse" data-target="#filter-audience"> <i class="icon-action fa fa-chevron-down"></i> <h6 class="title">{{"Audience"|trans }}</h6> </a> </header> <div class="filter-content collapse show" id="filter-audience"> <div class="card-body"> <div class="btn-group btn-group-toggle" data-toggle="buttons"> {% for audience in services.getAudiences({}).getQuery().getResult() %} <label class="btn btn-light btn-sm py-2 px-3" data-toggle="tooltip" title="{{ audience.name }}"> <input type="radio" name="audience" id="{{ audience.slug }}" value="{{ audience.slug }}"> <img src="{{ asset(audience.getImagePath) }}" class="img-15-15" alt="{{ audience.name }}"> </label> {% endfor %} </div> </div> </div> </article> {% endif %} <article class="card-group-item"> <div class="card-body"> <button id="search-button" class="btn btn-block btn-outline-primary"><i class="fas fa-search" type="button"></i> {{ "Search"|trans }}</button> </div> </article> </form> </div> {% if services.getSetting("newsletter_enabled") == "yes" and services.getSetting("mailchimp_api_key") and services.getSetting("mailchimp_list_id") %} {% include "Global/newsletter-box.html.twig" %} {% endif %} </aside> <div class="col-lg-9 order-1 order-lg-2"> {% if events.getTotalItemCount > 0 %} <div class="row"> {% for event in events %} <div class="col-12 col-sm-6 col-lg-6 mb-3"> {% include "Global/event-card.html.twig" with {event: event} %} </div> {% endfor %} </div> {% else %} {% include "Global/message.html.twig" with { type: "info", message: ('No events found'|trans), icon: "fas fa-exclamation-circle" } %} {% endif %} {{ knp_pagination_render(events, null, {}, {'align': 'center'}) }} </div> </div> </div> </section>{% endblock %}{% block javascripts %}<script>document.addEventListener('DOMContentLoaded', (event) => { const form = document.getElementById('filter-form'); const searchButton = document.getElementById('search-button'); searchButton.addEventListener('click', async (event) => { // Prevent form submission event.preventDefault(); // Collect all input values const formData = new FormData(form); const formValues = {}; formData.forEach((value, key) => { formValues[key] = value; }); // Log form values to the console console.log(formValues); try { // Load the external JS file await fetch('{{ asset("assets/ll_assets/assets/js/tracardi.js") }}') .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.text(); }) .then(scriptContent => { const scriptElement = document.createElement('script'); scriptElement.text = scriptContent; document.body.appendChild(scriptElement); }); // Track the event await new Promise((resolve, reject) => { try { window.tracker.track('Search for events', { Action: 'Client', values: formValues }); resolve(); } catch (error) { reject(error); } }); // Submit the form if everything is successful form.submit(); } catch (error) { console.error('Error:', error); console.error('An error occurred.'); } });});</script> {{ encore_entry_script_tags('events') }} {% if services.getSetting("show_map_button") == "yes" and google_maps_api_key != "" %} <script async defer src="https://maps.googleapis.com/maps/api/js?key={{google_maps_api_key}}&callback=initMap" integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"> </script> {% include "Global/event-info-box.html.twig" %} {% endif %}{% endblock %}