Files
odoo_source/addons/website_event/views/event_templates.xml
T
Thibault Delavallée d30cbf6423 [REF] website_event: improve registration pages
RATIONALE

Even will soon gain a major update called Event Online, allowing to better
support full-online events. In order to prepare its merge, preparatory merge
are done to lessen the final diff.

PURPOSE

Prepare Event Online support by providing fixes in registration and event
frontend flows. Also provide a quick back2basic in backend views to prepare
addition of Online sub modules.

SPECIFICATIONS: REGISTRATION PAGE

Register: display number of remaining registrations only if < 20% of max
capacity. Purpose is to display this text only if remaining count is low.
Otherwise it clutters display without much added information.

Rephrase to "only XX available" as all events do not use seats specifically.

Fix some alignment issues, with tickets title / tickets themselves / event
description.

Improve display of ticket selection, especially with event_sale installed and
in mobile as we may not see content of select box.

SPECIFICATIONS: REGISTRATION CONFIRMATION PAGE

Change table by simply putting registration information in a card-like display.
Display each information (name, email, phone, ...) on a separate line. Purpose
is to be mobile-friendly as tables display badly on mobile

LINKS

Community PR odoo/odoo#55197
Enterprise PR odoo/enterprise#12113

Task ID-2287372 (Fix Twitter Wall)
Task ID-2309702 (Event Preparatory Merge 4)
Prepares Task ID-2252655 (Main Online Event task)
Prepares Task ID-2283796 (Event B2Basics / Registration Flow)
Prepares Task ID-2299857 (Event Design Review)
2020-07-31 15:38:28 +00:00

817 lines
48 KiB
XML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<?xml version="1.0" encoding="utf-8"?>
<odoo>
<!-- Index -->
<template id="index" name="Events">
<t t-call="website.layout">
<div id="wrap" class="o_wevent_index">
<!-- Options -->
<t t-set="opt_events_list_cards" t-value="request.website.viewref('website_event.opt_events_list_cards').active"/>
<t t-set="opt_events_list_columns" t-value="request.website.viewref('website_event.opt_events_list_columns').active"/>
<!-- Topbar -->
<t t-call="website_event.index_topbar"/>
<!-- Drag/Drop Area -->
<div id="oe_structure_we_index_1" class="oe_structure oe_empty"/>
<!-- Content -->
<div t-attf-class="o_wevent_events_list #{opt_events_list_cards and 'opt_event_list_cards_bg'}">
<div class="container">
<div class="row">
<t t-call="website_event.searched_tags"/>
</div>
<div class="row">
<div id="o_wevent_index_main_col" t-attf-class="col-md my-5 #{opt_events_list_columns and 'opt_events_list_columns' or 'opt_events_list_rows'}">
<div class="row">
<!-- Events List -->
<t t-call="website_event.events_list"/>
</div>
</div>
</div>
</div>
</div>
<!-- Drag/Drop Area -->
<div id="oe_structure_we_index_2" class="oe_structure oe_empty"/>
</div>
</t>
</template>
<!-- Index - OPTION - Sidebar -->
<template id="opt_index_sidebar" inherit_id="website_event.index" active="False" customize_show="True" name="Show Sidebar">
<xpath expr="//div[@id='o_wevent_index_main_col']" position="after">
<t t-call="website_event.index_sidebar"/>
</xpath>
</template>
<!-- Index Topbar -->
<template id="index_topbar" name="Topbar">
<nav class="navbar navbar-light border-top shadow-sm d-print-none">
<div class="container">
<div class="d-flex flex-column flex-sm-row justify-content-between w-100">
<span class="navbar-brand h4 my-0 mr-auto">Events</span>
<ul class="o_wevent_index_topbar_filters nav"/>
<div class="d-flex align-items-center flex-wrap pl-sm-3 pr-0">
<t t-call="website_event.events_search_box">
<t t-set="_searches" t-value="searches"/>
<t t-set="_placeholder" t-value="'Search an event ...'"/>
</t>
</div>
</div>
</div>
</nav>
</template>
<template id="searched_tags" name="Searched tags">
<div class="d-flex align-items-center mt16">
<t t-foreach="search_tags" t-as="tag">
<span class="align-items-baseline border d-inline-flex pl-2 rounded ml16 mb-2 bg-white">
<i class="fa fa-tag mr-2 text-muted"/>
<t t-esc="tag.display_name"/>
<a t-att-href="'/event?%s' % keep_query('*', tags=str((search_tags - tag).ids))" class="btn border-0 py-1">&#215;</a>
</span>
</t>
</div>
</template>
<!-- Filter - Date -->
<template id="event_time" inherit_id="website_event.index_topbar" customize_show="True" name="Filter by Date">
<xpath expr="//ul[hasclass('o_wevent_index_topbar_filters')]" position="inside">
<li class="nav-item dropdown mr-2 my-1">
<a href="#" role="button" class="btn dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-calendar"/>
<t t-if="current_date" t-esc="current_date"/>
<t t-else="">Upcoming Events</t>
</a>
<div class="dropdown-menu">
<t t-foreach="dates" t-as="date">
<t t-if="date[3] or (date[0] in ('old','all'))">
<a t-att-href="keep('/event', date=date[0])" t-attf-class="dropdown-item d-flex align-items-center justify-content-between #{searches.get('date') == date[0] and 'active'}">
<t t-esc="date[1]"/>
<span t-if="date[3]" t-esc="date[3]" class="badge badge-pill badge-primary ml-3"/>
</a>
</t>
</t>
</div>
</li>
</xpath>
</template>
<template id="event_category_tag" inherit_id="website_event.index_topbar" active="False" customize_show="True" name="Filter by Tags">
<xpath expr="//ul[hasclass('o_wevent_index_topbar_filters')]" position="inside">
<t t-foreach="categories" t-as="category">
<li t-if="category.tag_ids" class="nav-item dropdown mr-2 my-1">
<a href="#" role="button" class="btn dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-folder-open"/>
<t t-esc="category.name"/>
</a>
<div class="dropdown-menu">
<t t-foreach="category.tag_ids" t-as="tag">
<a t-att-href="'/event?%s' % keep_query('*', tags=str((search_tags - tag).ids if tag in search_tags else (tag | search_tags).ids))"
t-attf-class="dropdown-item d-flex align-items-center justify-content-between #{'active' if tag in search_tags else ''}">
<t t-esc="tag.name"/>
</a>
</t>
</div>
</li>
</t>
</xpath>
</template>
<!-- Filter - Location -->
<template id="event_location" inherit_id="website_event.index_topbar" active="False" customize_show="True" name="Filter by Country">
<xpath expr="//ul[hasclass('o_wevent_index_topbar_filters')]" position="inside">
<li class="nav-item dropdown mr-2 my-1">
<a href="#" role="button" class="btn dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-map-marker"/>
<t t-if="current_country" t-esc="current_country.name"/>
<t t-else="">All countries</t>
</a>
<div class="dropdown-menu">
<t t-foreach="countries" t-as="country">
<t t-if="country['country_id']">
<a t-att-href="keep('/event', country=country['country_id'][0])" t-attf-class="dropdown-item d-flex align-items-center justify-content-between #{searches.get('country') == str(country['country_id'] and country['country_id'][0]) and 'active'}">
<t t-esc="country['country_id'][1]"/>
<span t-esc="country['country_id_count']" class="badge badge-pill badge-primary ml-auto"/>
</a>
</t>
<t t-else="">
<a t-att-href="keep('/event', country='online')" t-attf-class="dropdown-item d-flex align-items-center justify-content-between #{searches.get('country') == 'online' and 'active'}">
<span>Online Events</span>
<span t-esc="country['country_id_count']" class="badge badge-pill badge-primary ml-3"/>
</a>
</t>
</t>
</div>
</li>
</xpath>
</template>
<!-- Search Box -->
<template id="events_search_box" inherit_id="website.website_search_box" primary="True">
<xpath expr="//div[@role='search']" position="replace">
<form t-attf-class="o_wevent_event_searchbar_form o_wait_lazy_js w-100 my-1 my-lg-0 #{_classes}"
t-att-action="action if action else '/event'" method="get">
<t t-set="search" t-value="search or _searches and _searches['search']"/>
<t t-set="placeholder" t-value="placeholder or _placeholder"/>
<t>$0</t>
<t t-foreach="_searches" t-as="search">
<input t-if="search != 'search' and search_value != 'all'" type="hidden"
t-att-name="search" t-att-value="search_value"/>
</t>
<t t-raw="0"/>
</form>
</xpath>
</template>
<!-- Index - Events list -->
<template id="events_list" name="Events list">
<!-- Options -->
<t t-set="opt_index_sidebar" t-value="request.website.viewref('website_event.opt_index_sidebar').active"/>
<t t-if="opt_events_list_columns" t-set="opt_event_size" t-value="opt_index_sidebar and 'col-md-6' or 'col-md-6 col-lg-4'"/>
<t t-else="" t-set="opt_event_size" t-value="opt_index_sidebar and 'col-12' or 'col-xl-10 offset-xl-1'"/>
<!-- No events -->
<t t-if="not event_ids">
<div class="col-12">
<div class="h2 mb-3">No events found.</div>
<div class="alert alert-info text-center" groups="event.group_event_manager">
<p class="m-0">Use the top button '<b>+ New</b>' to create an event.</p>
</div>
</div>
</t>
<!-- List -->
<div t-foreach="event_ids" t-as="event" t-attf-class=" #{opt_event_size} mb-4">
<a t-attf-href="/event/#{ slug(event) }/#{(not event.menu_id) and 'register'}" class="text-decoration-none">
<article t-attf-class="h-100 #{opt_events_list_cards and 'card border-0 shadow-sm'}" itemscope="itemscope" itemtype="http://schema.org/Event">
<div class="h-100 row no-gutters">
<!-- Header -->
<header t-attf-class="overflow-hidden bg-secondary #{opt_events_list_columns and 'col-12 rounded-top' or 'col-sm-4 col-lg-3 rounded-left'} #{(not opt_events_list_cards) and 'rounded shadow'} #{(not opt_events_list_cards and not opt_events_list_columns) and 'rounded-top'}">
<!-- Image + Link -->
<div class="d-block h-100 w-100">
<t t-call="website.record_cover">
<t t-set="_record" t-value="event"/>
<!-- Short Date -->
<div class="o_wevent_event_date position-absolute bg-white shadow-sm text-dark">
<span t-field="event.with_context(tz=event.date_tz).date_begin" t-options="{'format': 'LLL'}" class="o_wevent_event_month"/>
<span t-field="event.with_context(tz=event.date_tz).date_begin" t-options="{'format': 'dd'}" class="o_wevent_event_day"/>
</div>
<!-- Participating -->
<small t-if="event.is_participating" class="o_wevent_participating bg-success">
<i class="fa fa-check mr-2"/>Registered
</small>
<!-- Unpublished -->
<small t-if="not event.website_published" class="o_wevent_unpublished bg-danger">
<i class="fa fa-ban mr-2"/>Unpublished
</small>
</t>
</div>
</header>
<div t-attf-class="#{opt_events_list_columns and 'col-12' or 'col'}">
<!-- Body -->
<main t-attf-class="#{opt_events_list_cards and 'card-body' or (opt_events_list_columns and 'py-3' or 'px-4')}">
<!-- Title -->
<h5 t-attf-class="card-title mt-2 mb-0 text-truncate #{(not event.website_published) and 'text-danger'}">
<span t-field="event.name" itemprop="name"/>
</h5>
<!-- Start Date & Time -->
<time itemprop="startDate" t-att-datetime="event.date_begin">
<span t-field="event.with_context(tz=event.date_tz).date_begin" t-options="{'date_only': 'true', 'format': 'long'}"/> -
<span t-field="event.with_context(tz=event.date_tz).date_begin" t-options="{'time_only': 'true', 'format': 'short'}"/>
</time>
<!-- Location -->
<div itemprop="location" t-field="event.address_id" t-options="{'widget': 'contact', 'fields': ['city'], 'no_marker': 'true'}"/>
<div class="mt8 d-flex align-items-center">
<t t-foreach="event.tag_ids" t-as="tag">
<span t-attf-class="badge mr8 #{'badge-primary' if tag in search_tags else 'badge-light'}">
<span t-esc="tag.name"/>
</span>
</t>
</div>
</main>
</div>
<!-- Footer -->
<footer t-if="not event.event_registrations_open or event.event_registrations_sold_out"
t-att-class="'small align-self-end w-100 %s %s' % (
opt_events_list_cards and 'card-footer' or (not opt_events_list_columns and 'mx-4 mt-auto pt-2') or 'py-2',
opt_events_list_cards and 'border-top' or '',
)">
<span t-if="not event.event_registrations_open" class="text-danger">
<t t-if="event.start_sale_date and event.start_sale_date &gt; datetime.date.today()">
Registrations not yet open
</t>
<t t-elif="event.event_registrations_sold_out">
Sold Out
</t>
<t t-else="">
Registrations Closed
</t>
</span>
</footer>
</div>
</article>
</a>
</div>
<!-- Pager -->
<div class="form-inline justify-content-center my-3">
<t t-call="website.pager"/>
</div>
</template>
<template id="opt_events_list_columns" inherit_id="website_event.events_list" active="True" customize_show="True" name="Layout • Columns"/>
<template id="opt_events_list_cards" inherit_id="website_event.events_list" active="True" customize_show="True" name="'Cards' Design"/>
<template id="opt_events_list_categories" inherit_id="website_event.events_list" active="False" customize_show="True" name="Show Templates">
<xpath expr="//main/*" position="before">
<span t-if="event.event_type_id" t-attf-href="/event?type=#{event.event_type_id.id}" t-attf-class="badge bg-secondary o_wevent_badge #{opt_events_list_columns and 'o_wevent_badge_event' or 'float-right'}" t-field="event.event_type_id"/>
</xpath>
</template>
<!-- Index - Sidebar -->
<template id="index_sidebar" name="Sidebar">
<div id="o_wevent_index_sidebar" class="col-lg-4 ml-lg-3 ml-xl-5 my-5"/>
</template>
<!-- Index - Sidebar - About us -->
<template id="index_sidebar_about_us" inherit_id="website_event.index_sidebar" active="True" customize_show="True" name="About us" priority="20">
<xpath expr="//div[@id='o_wevent_index_sidebar']" position="inside">
<div class="o_wevent_sidebar_block">
<h6 class="o_wevent_sidebar_title">About us</h6>
<p>Use this paragrah to write a short text about your events or company.</p>
</div>
<div id="oe_structure_website_event_about_us_1" class="oe_structure"/>
</xpath>
</template>
<!-- Index - Sidebar - Follow us -->
<template id="index_sidebar_follow_us" inherit_id="website_event.index_sidebar" active="True" customize_show="True" name="Follow us" priority="30">
<xpath expr="//div[@id='o_wevent_index_sidebar']" position="inside">
<div class="o_wevent_sidebar_block">
<h6 class="o_wevent_sidebar_title">Follow Us</h6>
<div class="o_wevent_sidebar_social mx-n1">
<a t-if="website.social_facebook" t-att-href="website.social_facebook" class="o_wevent_social_link"><i class="fa fa-facebook text-facebook" aria-label="Facebook" title="Facebook"/></a>
<a t-if="website.social_twitter" t-att-href="website.social_twitter" class="o_wevent_social_link"><i class="fa fa-twitter text-twitter" aria-label="Twitter" title="Twitter"/></a>
<a t-if="website.social_linkedin" t-att-href="website.social_linkedin" class="o_wevent_social_link"><i class="fa fa-linkedin text-linkedin" aria-label="LinkedIn" title="LinkedIn"/></a>
<a t-if="website.social_youtube" t-att-href="website.social_youtube" class="o_wevent_social_link"><i class="fa fa-youtube-play text-youtube" aria-label="Youtube" title="Youtube"/></a>
<a t-if="website.social_github" t-att-href="website.social_github" class="o_wevent_social_link"><i class="fa fa-github text-github" aria-label="Github" title="Github"/></a>
<a t-if="website.social_instagram" t-att-href="website.social_instagram" class="o_wevent_social_link"><i class="fa fa-instagram text-instagram" aria-label="Instagram" title="Instagram"/></a>
</div>
</div>
<div id="oe_structure_website_event_follow_us_1" class="oe_structure"/>
</xpath>
</template>
<!-- Index - Sidebar - Photos -->
<template id="index_sidebar_photos" inherit_id="website_event.index_sidebar" active="True" customize_show="True" name="Photos" priority="40">
<xpath expr="//div[@id='o_wevent_index_sidebar']" position="inside">
<h6 class="o_wevent_sidebar_title">Photos</h6>
<a href="/event">
<figure class="o_wevent_sidebar_block o_wevent_sidebar_figure figure">
<img class="figure-img img-fluid rounded" src="/website_event/static/src/img/event_past_0.jpg" alt=""/>
<figcaption class="figure-caption text-muted">A past event</figcaption>
</figure>
</a>
<a href="/event">
<figure class="o_wevent_sidebar_block o_wevent_sidebar_figure figure">
<img class="figure-img img-fluid rounded" src="/website_event/static/src/img/event_training_0.jpg" alt=""/>
<figcaption class="figure-caption text-muted">Our Trainings</figcaption>
</figure>
</a>
</xpath>
</template>
<!-- Index - Sidebar - Quotes -->
<template id="index_sidebar_quotes" inherit_id="website_event.index_sidebar" active="True" customize_show="True" name="Quotes" priority="60">
<xpath expr="//div[@id='o_wevent_index_sidebar']" position="inside">
<div class="o_wevent_sidebar_block card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p><em>Write here a quote from one of your attendees. It gives confidence in your events.</em></p>
<footer class="blockquote-footer text-muted">Author</footer>
</blockquote>
</div>
</div>
</xpath>
</template>
<!-- Index - Sidebar - Snippet - Country Events -->
<template id="index_sidebar_country_event" inherit_id="website_event.index_sidebar" active="True" customize_show="True" name="Country Events" priority="70">
<xpath expr="//div[@id='o_wevent_index_sidebar']" position="inside">
<div class="o_wevent_sidebar_block">
<t t-snippet-call="website_event.s_country_events"/>
</div>
</xpath>
</template>
<!-- Event -->
<template id="layout" name="Event">
<t t-call="website.layout">
<div id="wrap" class="o_wevent_event js_event">
<t t-if="not event.menu_id">
<nav class="navbar navbar-light border-top shadow-sm d-print-none">
<div class="container">
<a href="/event" class="navbar-brand h4 my-0 mr-4">
<i class="fa fa-long-arrow-left text-primary mr-2"/>All Events
</a>
<ul class="navbar-nav flex-row">
<li class="nav-item mr-3">
<a t-attf-href="/event?type=#{event.event_type_id.id}" t-if="event.event_type_id" class="nav-link">
<i class="fa fa-folder-open text-primary mr-2"/><t t-esc="event.event_type_id.name"/>
</a>
</li>
<li class="nav-item mr-3">
<a t-if="event.country_id" t-attf-href="/event?country=#{event.country_id.id}" class="nav-link">
<i class="fa fa-map-marker text-primary mr-2"/><t t-esc="event.country_id.name"/>
</a>
</li>
</ul>
<t t-call="website_event.events_search_box">
<t t-set="_classes" t-value="'ml-auto'"/>
<t t-set="_searches" t-value="searches"/>
</t>
</div>
</nav>
</t>
<t t-else="">
<nav class="navbar navbar-light border-top shadow-sm navbar-expand-md">
<div class="container">
<a href="#" t-field="event.name" class="navbar-brand h4 my-0 mr-4"/>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#o_wevent_event_submenu" aria-controls="o_wevent_event_submenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="o_wevent_event_submenu" class="collapse navbar-collapse">
<ul class="navbar-nav w-100" t-att-data-menu_name="editable and 'Event Menu'" t-att-data-content_menu_id="editable and event.menu_id.id">
<t t-foreach="event.menu_id.child_id" t-as="submenu">
<t t-call="website.submenu">
<t t-set="item_class" t-value="'nav-item'"/>
<t t-set="link_class" t-value="'nav-link'"/>
</t>
</t>
</ul>
</div>
</div>
</nav>
</t>
<t t-raw="0"/>
<t t-set="editor_sub_message">Following content will appear on all events.</t>
<div class="oe_structure oe_empty" id="oe_structure_website_event_layout_1" t-att-data-editor-sub-message="editor_sub_message"/>
</div>
</t>
</template>
<template id="event_details" name="Event Header">
<t t-call="website_event.layout">
<div name="event" itemscope="itemscope" itemtype="http://schema.org/Event">
<t t-call="website.record_cover">
<t t-set="_record" t-value="event"/>
<t t-set="use_filters" t-value="True"/>
<t t-set="use_size" t-value="True"/>
<t t-set="use_text_align" t-value="True"/>
<div class="container d-flex flex-column flex-grow-1 justify-content-around">
<div class="o_wevent_event_title">
<span t-if="event.is_participating" class="badge badge-success o_wevent_badge"><i class="fa fa-check mr-2"/>Registered</span>
<h1 t-field="event.name" class="o_wevent_event_name" itemprop="name" placeholder="Event Title"/>
<h2 t-field="event.subtitle" class="o_wevent_event_subtitle" placeholder="Event Subtitle"/>
</div>
</div>
<div class="container">
<t t-call="website_event.registration_template"/>
</div>
</t>
<t t-raw="0"/>
</div>
</t>
</template>
<!-- Event - Description -->
<template id="event_description_full" name="Event Description" track="1">
<t t-call="website_event.event_details">
<section class="bg-200 mt-n5">
<div class="container overflow-hidden">
<div class="row no-gutters mt-n4 mb-3">
<!-- Description -->
<div id="o_wevent_event_main_col" class="col-lg-8 bg-white px-3 pt-5 pb-0 shadow-sm">
<span t-field="event.description" itemprop="description"/>
</div>
<div class="col-lg-4 bg-light shadow-sm d-print-none">
<!-- Date & Time -->
<div class="o_wevent_sidebar_block">
<h6 class="o_wevent_sidebar_title">Date &amp; Time</h6>
<div class="d-flex">
<h5 t-field="event.with_context(tz=event.date_tz).date_begin" class="my-1 mr-1" t-options="{'date_only': 'true', 'format': 'EEEE'}"/>
<h5 class="my-1" t-field="event.with_context(tz=event.date_tz).date_begin" t-options="{'date_only': 'true', 'format': 'long'}" itemprop="startDate" t-att-datetime="event.date_begin"/>
</div>
<t t-if="not event.is_one_day">Start -</t>
<span t-field="event.with_context(tz=event.date_tz).date_begin" t-options="{'time_only': 'true', 'format': 'short'}"/>
<t t-if="event.is_one_day">
<i class="fa fa-long-arrow-right mx-1"/>
<span t-field="event.with_context(tz=event.date_tz).date_end" t-options="{'time_only': 'true', 'format': 'short'}"/>
</t>
<t t-else="">
<i class="fa fa-long-arrow-down d-block text-muted mx-3 my-2" style="font-size: 1.5rem"/>
<div class="d-flex">
<h5 t-field="event.with_context(tz=event.date_tz).date_end" class="my-1 mr-1" t-options="{'date_only': 'true', 'format': 'EEEE'}"/>
<h5 class="my-1" t-field="event.with_context(tz=event.date_tz).date_end" t-options="{'date_only': 'true', 'format': 'long'}"/>
</div>
<t t-if="not event.is_one_day">End -</t>
<span t-field="event.with_context(tz=event.date_tz).date_end" t-options="{'time_only': 'true', 'format': 'short'}"/>
</t>
<!-- Timezone -->
<small t-esc="event.date_tz" class="d-block my-3 text-muted"/>
<div class="dropdown">
<i class="fa fa-calendar mr-1"/>
<a href="#" role="button" data-toggle="dropdown">Add to Calendar</a>
<div class="dropdown-menu">
<a t-att-href="iCal_url" class="dropdown-item">iCal/Outlook</a>
<a t-att-href="google_url" class="dropdown-item" target="_blank">Google</a>
</div>
</div>
</div>
<!-- Location -->
<div t-if="event.address_id" class="o_wevent_sidebar_block">
<h6 class="o_wevent_sidebar_title">Location</h6>
<h4 t-field="event.address_id" class="" t-options='{
"widget": "contact",
"fields": ["name"]
}'/>
<div itemprop="location" class="mb-2" t-field="event.address_id" t-options='{
"widget": "contact",
"fields": ["address"],
"no_marker": True
}'/>
<div class="mb-3" t-field="event.address_id" t-options='{
"widget": "contact",
"fields": ["phone", "mobile", "email"]
}'/>
<i class="fa fa-map-marker fa-fw" role="img"/>
<a t-att-href="event.google_map_link()" target="_blank">Get the direction</a>
</div>
<!-- Organizer -->
<div t-if="event.organizer_id" class="o_wevent_sidebar_block">
<h6 class="o_wevent_sidebar_title">Organizer</h6>
<h4 t-field="event.organizer_id"/>
<div itemprop="location" t-field="event.organizer_id" t-options="{'widget': 'contact', 'fields': ['phone', 'mobile', 'email']}"/>
</div>
<!-- Social -->
<div class="o_wevent_sidebar_block">
<h6 class="o_wevent_sidebar_title">SHARE</h6>
<p class="mb-2">Find out what people see and say about this event, and join the conversation.</p>
<t t-snippet-call="website.s_share">
<t t-set="_no_title" t-value="True"/>
<t t-set="_classes" t-valuef="o_wevent_sidebar_social mx-n1"/>
<t t-set="_link_classes" t-valuef="o_wevent_social_link"/>
</t>
</div>
</div>
</div>
</div>
</section>
</t>
</template>
<!-- Event - Registration -->
<template id="registration_template" name="Registration">
<div t-if="request.env.user.has_group('event.group_event_manager')" class="alert alert-info rounded-0 o_website_event_configuration o_not_editable" role="status">
<a t-attf-href="/web#id=#{event.id}&amp;view_type=form&amp;model=event.event">
<i class="fa fa-pencil mr-2" role="img" aria-label="Edit" title="Edit event registration in backend"/><em>Configure Event Tickets</em>
</a>
</div>
<div t-if="not event.event_registrations_open" class="bg-white mb-5">
<div class="alert alert-info mb-0 d-flex justify-content-between align-items-center" role="status">
<t t-if="event.start_sale_date and event.start_sale_date &gt; datetime.date.today()">
<em class="col-md-8">Ticket Sales starting on <t t-esc="event.start_sale_date"/></em>
<button class="btn btn-danger mr-1 ml-3 col-md-4" disabled="1">Registrations not yet open</button>
</t>
<t t-else="">
<div class="col-md-8">
<em t-if="event.event_registrations_sold_out">Tickets for this Event are <b>Sold Out</b></em>
<em t-else="">Registrations are <b>closed</b></em>
</div>
<button class="btn btn-danger ml-3 col-md-4 py-2" disabled="1">
<span t-if="event.event_registrations_sold_out">Sold Out</span>
<span t-else="">Registrations Closed</span>
</button>
</t>
</div>
</div>
<form t-if="event.event_registrations_open and (not event.event_ticket_ids or not all([ticket.is_expired for ticket in event.event_ticket_ids]))"
id="registration_form"
class="mb-5"
t-attf-action="/event/#{slug(event)}/registration/new" method="post"
itemscope="itemscope" itemprop="offers" itemtype="http://schema.org/AggregateOffer">
<input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
<div id="o_wevent_tickets" class="bg-white shadow-sm o_wevent_js_ticket_details" data-folded-by-default="0">
<t t-set="tickets" t-value="event.event_ticket_ids.filtered(lambda ticket: not ticket.is_expired)"/>
<!-- If some tickets expired and there is only one type left, we keep the same layout -->
<t t-if="len(event.event_ticket_ids) &gt; 1">
<div class="d-flex justify-content-between align-items-center py-2 pl-3 pr-2 border-bottom">
<div id="price-range" class="pr-3 d-none"/>
<span t-if="not event.event_registrations_open" class="text-danger">
<i class="fa fa-ban mr-2"/>Sold Out
</span>
<div t-if="event.is_participating" id="registered" class="ml-auto pr-3 d-none">
<span class="text-success ml-3">
<i class="fa fa-check mr-2"/>Registered
</span>
</div>
<a href="#" role="button" class="btn o_wevent_registration_btn text-left" data-target="#o_wevent_tickets_collapse">
<span class="py-2">Tickets</span>
<span class="close d-none">×</span>
</a>
</div>
<div id="o_wevent_tickets_collapse" class="collapse show">
<div t-foreach="tickets" t-as="ticket" class="row px-3 py-3 mx-0 bg-light border-bottom">
<div class="col-md-8 col-xs-12 p-0" itemscope="itemscope" itemtype="http://schema.org/Offer">
<h5 itemprop="name" t-field="ticket.name" class="my-0"/>
<t t-if="ticket.description">
<small t-field="ticket.description" class="text-muted py-2"/>
<br/>
</t>
<small t-if="ticket.end_sale_date and ticket.sale_available and not ticket.is_expired" class="text-muted mr-3" itemprop="availabilityEnds">Sales end on <span itemprop="priceValidUntil" t-field="ticket.end_sale_date"/></small>
<small t-if="ticket.start_sale_date and not ticket.sale_available and not ticket.is_expired" class="text-muted mr-3" itemprop="availabilityEnds">Sales start on <span itemprop="priceValidUntil" t-field="ticket.start_sale_date"/></small>
</div>
<div class="col-md-4 col-xs-12 p-0 d-flex align-items-center justify-content-between">
<div class="o_wevent_registration_multi_select"/>
<div class="w-auto ml-auto">
<select t-if="not ticket.is_expired and ticket.sale_available"
t-attf-name="nb_register-#{ticket.id}"
class="custom-select">
<t t-set="seats_max_ticket" t-value="(not ticket.seats_limited or ticket.seats_available &gt; 9) and 10 or ticket.seats_available + 1"/>
<t t-set="seats_max_event" t-value="(not event.seats_limited or event.seats_available &gt; 9) and 10 or event.seats_available + 1"/>
<t t-set="seats_max" t-value="min(seats_max_ticket, seats_max_event)"/>
<t t-foreach="range(0, seats_max)" t-as="nb">
<option t-esc="nb" t-att-selected="len(ticket) == 0 and nb == 0 and 'selected'"/>
</t>
</select>
<div t-else="" class="text-danger">
<span t-if="not ticket.sale_available and not ticket.is_expired and ticket.is_launched()" >Sold Out</span>
<span t-if="ticket.is_expired">Expired</span>
</div>
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-md-4 offset-md-8 py-2 pl-md-0 pr-md-2">
<button type="submit" class="btn btn-primary o_wait_lazy_js btn-block a-submit" disabled="" t-attf-id="#{event.id}">
Register
<t t-if="event.seats_limited and event.seats_max and event.seats_available &lt;= (event.seats_max * 0.2)">
(only <t t-esc="event.seats_available"/> available)
</t>
</button>
</div>
</div>
</div>
</t>
<div t-else="" class="o_wevent_registration_single">
<div class="row p-2 pl-3">
<div class="col-lg-8 d-flex flex-columns align-items-center" itemscope="itemscope" itemtype="http://schema.org/Offer">
<h6 itemprop="name" class="my-0 pr-3 border-right text-dark">
<span t-if="tickets" t-field="tickets.name"/>
<span t-else="">Registration</span>
</h6>
<div class="ml-auto">
<t t-if="event.event_registrations_open">
<span class="text-dark font-weight-bold align-middle pr-2">Qty</span>
<link itemprop="availability" content="http://schema.org/InStock"/>
<select t-att-name="'nb_register-%s' % (tickets.id if tickets else 0)" class="w-auto custom-select">
<t t-set="seats_max_ticket" t-value="(not tickets or not tickets.seats_limited or tickets.seats_available &gt; 9) and 10 or tickets.seats_available + 1"/>
<t t-set="seats_max_event" t-value="(not event.seats_limited or event.seats_available &gt; 9) and 10 or event.seats_available + 1"/>
<t t-set="seats_max" t-value="min(seats_max_ticket, seats_max_event) if tickets else seats_max_event"/>
<t t-foreach="range(0, seats_max)" t-as="nb">
<option t-esc="nb" t-att-selected="nb == 1 and 'selected'"/>
</t>
</select>
</t>
<t t-else="">
<span itemprop="availability" content="http://schema.org/SoldOut" class="text-danger">
<i class="fa fa-ban mr-2"/>Sold Out
</span>
</t>
</div>
</div>
<div class="col-lg-4 pt-3 pt-lg-0 pl-2 pl-lg-0">
<button type="submit" class="btn btn-primary o_wait_lazy_js btn-block a-submit" t-attf-id="#{event.id}">
Register
<t t-if="event.seats_limited and event.seats_max and event.seats_available &lt;= (event.seats_max * 0.2)">
(only <t t-esc="event.seats_available"/> available)
</t>
</button>
</div>
</div>
</div>
</div>
</form>
</template>
<template id="registration_attendee_details" name="Registration Attendee Details">
<div id="modal_attendees_registration" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<form id="attendee_registration" t-attf-action="/event/#{slug(event)}/registration/confirm" method="post" class="js_website_submit_form">
<input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
<div class="modal-content">
<div class="modal-header align-items-center">
<h4 class="modal-title">Attendees</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>&amp;times;</span></button>
</div>
<t t-set="counter_type" t-value="1"/>
<t t-set="counter" t-value="0"/>
<t t-foreach="tickets" t-as="ticket" t-if="availability_check">
<t t-foreach="range(1, ticket['quantity'] + 1)" t-as="att_counter" name="attendee_loop">
<t t-set="counter" t-value="counter + 1"/>
<div class="modal-body bg-light border-bottom">
<h5 class="mt-1 pb-2 border-bottom">Ticket #<span t-esc="counter"/> <small class="text-muted">- <span t-esc="ticket['name']"/></small></h5>
<div class="row">
<div class="col-lg my-2">
<label>Name</label>
<input class="form-control" type="text" t-attf-name="#{counter}-name" required="This field is required"/>
</div>
<div class="col-lg my-2">
<label>Email</label>
<input class="form-control" type="email" t-attf-name="#{counter}-email" required="This field is required"/>
</div>
<div class="col-lg my-2">
<label>Phone <small>(Optional)</small></label>
<input class="form-control" type="tel" t-attf-name="#{counter}-phone"/>
</div>
<input class="d-none" type="text" t-attf-name="#{counter}-event_ticket_id" t-attf-value="#{ticket['id']}"/>
</div>
</div>
</t>
<t t-set="counter_type" t-value="counter_type + 1"/>
</t>
<t t-if="not availability_check">
<div class="modal-body bg-light border-bottom">
<strong> You ordered more tickets than available seats</strong>
</div>
</t>
<div class="modal-footer border-0 justify-content-between">
<button type="button" class="btn btn-secondary js_goto_event" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary" t-if="availability_check">Continue</button>
</div>
</div>
</form>
</div>
</div>
</template>
<template id="registration_complete" name="Registration Completed">
<t t-call="website_event.layout">
<div class="container my-5">
<div class="row mb-3">
<div class="col-12">
<h2>Registration confirmed!</h2>
<h3><a t-attf-href="/event/#{slug(event)}"><t t-esc="event.name"/></a></h3>
</div>
</div>
<div class="row mb-3">
<div class="col-md-4 col-xs-12 mt-3" t-foreach="attendees" t-as="attendee">
<div class="d-flex flex-column">
<span class="font-weight-bold">
<t t-if="attendee.name" t-esc="attendee.name"/>
<t t-else="">N/A</t>
</span>
<span>
<i class="fa fa-envelope mr-2 "></i>
<t t-if="attendee.email" t-esc="attendee.email"/>
<t t-else="">N/A</t>
</span>
<span>
<i class="fa fa-phone mr-2"></i>
<t t-if="attendee.phone" t-esc="attendee.phone"/>
<t t-else="">N/A</t>
</span>
<span>
<i class="fa fa-ticket mr-2"></i>
<t t-if="attendee.event_ticket_id" t-esc="attendee.event_ticket_id.name"/>
<t t-else="">N/A</t>
(ref: <t t-esc="attendee.id"/>)
</span>
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-lg-8">
<p><b>Start</b> <span itemprop="startDate" t-esc="event.date_begin_located"/><br/> <b>End</b> <span itemprop="endDate" t-esc="event.date_end_located"/></p>
<div id="add_to_calendar" class="mt-4">
<a role="button" class="btn btn-primary" t-att-href="iCal_url">
<i class="fa fa-fw fa-calendar"/> Add to iCal/Outlook
</a>
<a role="button" class="btn btn-primary" t-att-href="google_url" target='_blank'>
<i class="fa fa-fw fa-calendar"/> Add to Google Calendar
</a>
</div>
</div>
<div class="col-lg-4">
<h4 t-field="event.address_id" class="text-secondary font-weight-bold" t-options='{
"widget": "contact",
"fields": ["name"]
}'/>
<a itemprop="location" t-att-href="event.google_map_link()" target="_BLANK" temprop="location" t-field="event.address_id" t-options='{
"widget": "contact",
"fields": ["address"]
}'/>
<div itemprop="location" t-field="event.address_id" t-options='{
"widget": "contact",
"fields": ["phone", "mobile", "email"]
}'/>
</div>
</div>
</div>
</t>
</template>
<template id="404" name="Event 404">
<t t-call="website.layout">
<div id="wrap">
<div class="oe_structure oe_empty">
<div class="container">
<h1 class="mt-4">Event not found!</h1>
<p>Sorry, the requested event is not available anymore.</p>
<p><a t-attf-href="/event">Return to the event list.</a></p>
</div>
</div>
</div>
</t>
</template>
<!-- User Navbar -->
<template id="user_navbar_inherit_website_event" inherit_id="website.user_navbar">
<xpath expr="//div[@id='o_new_content_menu_choices']//div[@name='module_website_event']" position="attributes">
<attribute name="name"/>
<attribute name="t-att-data-module-id"/>
<attribute name="t-att-data-module-shortdesc"/>
<attribute name="groups">event.group_event_manager</attribute>
</xpath>
</template>
<!-- User Navbar - Edit Options -->
<template id="event_edit_options" inherit_id="website.user_navbar" name="Edit Event Options">
<xpath expr="//li[@id='edit-page-menu']" position="after">
<t t-if="main_object._name == 'event.event'" t-set="action" t-value="'event.action_event_view'"/>
</xpath>
</template>
<template id="fold_register_details" inherit_id="website_event.registration_template" active="False" customize_show="True" name="Fold ticket details">
<xpath expr="//div[@id='o_wevent_tickets']" position="attributes">
<attribute name="data-folded-by-default">1</attribute>
</xpath>
<xpath expr="//div[@id='registered']" position="attributes">
<attribute name="class">ml-auto pr-3</attribute>
</xpath>
<xpath expr="//div[@id='price-range']" position="attributes">
<attribute name="class">ml-0 pr-3</attribute>
</xpath>
<xpath expr="//div[@id='o_wevent_tickets_collapse']" position="attributes">
<attribute name="class">collapse</attribute>
</xpath>
<xpath expr="//a[hasclass('o_wevent_registration_btn')]" position="attributes">
<attribute name="class">btn btn-primary o_wevent_registration_btn collapsed</attribute>
<attribute name="data-toggle">collapse</attribute>
</xpath>
<xpath expr="//span[hasclass('close')]" position="attributes">
<attribute name="class">close d-none</attribute>
</xpath>
</template>
</odoo>