JavaScript add-ons/widgets
Event dates list with register buttons
This control has been deprecated. Please use Arlo Web Controls instead.
Arlo allows you to host your event pages on a separate website outside of pages managed by Arlo.
The script control in this article is used to produce a list of upcoming event dates for a template with details of the presenter, venue, and advertised offers (including any discounts) with a corresponding register button for each. This control is useful on external pages you host yourself to promote events. The control is fully customisable including the ability to change fonts, colours, button styles, and layout.
This article will guide you through the steps to integrate the JavaScript control in your own page.
Important: Ensure that you run through the test plan before publishing your add-on.
Live demo
Getting started
To quickly get started, download the ZIP (ls-eventschedulecontrol.zip) and open the index.htm file in your browser. This file contains all of the code referenced below.
Dependencies
The demo code in this article requires:
- Arlo event schedule list control (included in the ZIP)
- JQuery 1.10.2 (it is compatible with JQuery 1.6 or higher if your own site uses an older version of JQuery)
- JQuery cookie plugin 1.3.1 (optional, but recommended for storing time zone preferences of visitors)
- Sugar 1.3.9 (packaged and minified with the control)
- Dust 0.3 (packaged and minified with the control)
Steps to integrate an event schedule list into your own page
-
Add container markup (placeholder)
Add some container markup to your page where you need the list to appear.
<div id="ls-event-schedule" class="ls-schedule-list"></div>
-
Add stylesheet references
In the head of your page, include a reference to the the CSS file (included in the ZIP archive) that contains styles for the list control. The demo archive contains a CSS file that produces a list similar to the one in the screenshot at the top of this article. You may customise this file as required to match the look and feel of your own pages.
<link rel="stylesheet" type="text/css" href="ls-event-schedule-list.css"/>
-
Add script references
At the bottom of your page, include a reference to the key script file that contains the list control (included in the ZIP archive).
<script src="ls-event-schedule-list.min.js" defer="defer"></script>
-
Add control init script
Below the script reference above, add the code below to initialize the control.
<script defer="defer"> jQuery(document).ready(function() { new LS.EventScheduleListControl({ platformID: "demo", //TODO: change platformID to point at your own instance filter: { templateCode: "BENCH" //TODO: change to use a template code from your own platform }, renderOptions: { displayOffersCurrencyCode: true, displayOffersTaxInclusive: true } defaultMaxCount: 6, renderTo: "#ls-event-schedule" }).init(); }); </script>
The script example above configures the control to:
- Point at a platform with ID
demo
. You should change this to be the ID of your own platform. - Show only (filter) dates from events associated with the template with the code
BENCH
. On the demo platform, this is the code for the Benchmarking event template. You should change this value to match the code of the template you want to see dates for from your own platform. - Show a maximum of 6 upcoming dates from the template per page when the dates are initially loaded. If there are more than 6 dates, a "Show more" link will be displayed to allow visitors to show additional dates.
- Render itself into a page element with ID
ls-event-schedule
.
- Point at a platform with ID
- Run through our test plan to test your customisations of the control to make sure any modifications you've made will work with the different types of data the control needs to display.
Filter options
Filter options for the control are specified via the filter
configuration option passed in the control's constructor.
templateCode
Required string value the specifies the template you want to retrieve upcoming events for. If you're not sure what the code for your template is, you can find it by opening the template on the management platform and looking for the Code field. The code is often a set of uppercase characters and numbers like MGMT101 and is unique to each template.
Example:
new LS.EventScheduleListControl({ ... filter: { templateCode: "MGMT101" } ... }).init();
For advanced scenarios, multiple template codes may be provided as a string array (surrounded by square brackets). The resulting list of events will be the combined list of upcoming dates for all of the templates.
Example:
new LS.EventScheduleListControl({ ... filter: { templateCode: ["MGMT101-NSW","MGMT101-QLD","MGMT101-VIC"] } ... }).init();
Configuration options
defaultMaxCount
Integer value that limits the number of dates displayed on the initial load. If there are more dates available, a "Show more" link is included at the bottom of the control to retrieve additional dates from the server. The default value for this setting is 5.
Example:
new LS.EventScheduleListControl({ ... defaultMaxCount: 10, ... }).init();
region
String value that determines the region to use when fetching event information. This configuration setting is relevant only if your platform has multiple regions, currencies and tax rates. This setting controls which specific dates, currencies and tax rates are returned from the server and is important to ensure you list only event and pricing details relevant to the region of your custom page.
Available values for this setting depends on the regions configured for your platform. If no region is specified, the default region for your platform will be used. It is not possible to specify multiple regions.
Example:
new LS.EventScheduleListControl({ ... region: "uk", ... }).init();
registerInterestUri
String value that specifies the URL to use for a link that visitors can use to register their interest in running an event on a different date or different location than those already listed. Such a link is useful if you want to capture leads for interest in running the event on additional dates and different locations.
Usually this link will point at a lead form page in Arlo specific to the template, but it can be any custom URL or a mailto: link.
If no value is specified, the register interest link will not be visible in the control. The default value for this setting is null (to not display the link).
Example:
new LS.EventScheduleListControl({ ... registerInterestUri: "http://demo.learningsource.com.au/register-interest?t=0&e=fa4d2fd1-12a9-451e-862b-79ee376cfd1d", ... }).init();
showErrorDetail
Boolean value that determines whether detail of server errors are shown in the control. In development environments, you may set this to true
. In production situations this should be false
or omitted entirely. When disabled, a generic error stating that event information is not available will be shown for all errors.
The default value for this setting is false
(to not show error detail).
Example:
new LS.EventScheduleListControl({ ... showErrorDetail: true, ... }).init();
Display options
Rendering of event information can be controlled through a number of exposed settings under the renderOptions object passed in the constructor of the control.
displayOffers
Boolean setting that determines whether advertised offer information (pricing) is displayed for each event date. Turn this setting off if your event is free or where pricing information is covered elsewhere on your custom page. The default value for this setting is true
(to display pricing information).
Example:
new LS.EventScheduleListControl({ ... renderOptions: { displayOffers: false }, ... }).init();
displayOffersTaxInclusive
Boolean setting that determines whether advertised offer information (pricing) is displayed using tax inclusive amounts. Specify true
for this setting if your business trades using tax-inclusive prices and you would like your advertised offers to also be tax inclusive. The default value for this setting is false
(to display tax exclusive offer amounts).
Example:
new LS.EventScheduleListControl({ ... renderOptions: { displayOffersTaxInclusive: false }, ... }).init();
displayOffersTaxInfo
Boolean setting that determines whether tax information is included for each advertised offer. For example "$200.00 incl. GST".
Specify false
for this setting if
- your events are tax exempt
- tax is not applicable for the region where your events are running and you would like tax references removed
- you cover whether all pricing is tax inclusive or exclusive somewhere else on the page
The default value for this setting is true
(to include tax information).
Example:
new LS.EventScheduleListControl({ ... renderOptions: { displayOffersTaxInfo: false }, ... }).init();
emptyMessageHtml
String setting that allows you to configure the message that is displayed when there are no dates available for the specified template. The default value for this setting is the text "There are currently no upcoming dates for this event. Check back soon!"
Example:
new LS.EventScheduleListControl({ ... renderOptions: { emptyMessageHtml: '<p>We\'re not currently running this event. <a href="http://acme.org/">Contact us</a> for more information.</p>' }, ... }).init();
emptyRegisterInterestMessageHtml
String setting similar to emptyMessageHtml
that is used when there are no dates available but when a registerInterestUri
value has been specified for the control. In this situation, the emptyRegisterInterestMessageHtml
value is used instead of the generic emptyMessageHtml
value.
This setting allows you to display a message with a link to a page to register interest in running the event, even though no dates are currently available.
The specified string is a format string where the token {0} will be substituted with the value of the registerInterestUri
setting. The default value for this setting is the message "Interested in attending? Have a suggestion about running this event near you? Register your interest now!".
Example:
new LS.EventScheduleListControl({ ... renderOptions: { emptyRegisterInterestMessageHtml: "<p>Interested in attending? Have a suggestion about running this event near you?</p><p><a href=\"{0}\">Register your interest now!</a></p>" }, ... }).init();
loadingHtml
String setting that allows you to configure the message that is displayed when the control is loading data from the server. The default value for this setting is the text "Loading..." with an animated ajax spin control image.
Example:
new LS.EventScheduleListControl({ ... renderOptions: { loadingHtml: '<span class="ls-message">Please wait...</span>' }, ... }).init();
showMoreItemsLinkHtml
String setting that allows you to configure the text/markup of the link that is displayed when there are more dates available than are listed. The default value for this setting is the text "Show me more dates".
Example:
new LS.EventScheduleListControl({ ... renderOptions: { showMoreItemsLinkHtml: "Show me more dates" }, ... }).init();
registerInterestLinkHtml
String setting that allows you to configure the text/markup of the link that is displayed when the register interest link is enabled. The default value for this setting is the text "Suggest another date/location".
Example:
new LS.EventScheduleListControl({ ... renderOptions: { registerInterestLinkHtml: "Suggest another date/location" }, ... }).init();
defaultRegisterLinkHtml
String setting that allows you to configure the default text of the Register button/link. The default value for this setting is the text "Register".
Example:
new LS.EventScheduleListControl({ ... renderOptions: { defaultRegisterLinkHtml: "Book now" }, ... }).init();
eventFullMessageHtml
String setting that allows you to configure the message that is displayed when an event is full. This message is displayed instead of the Register button. The default value for this setting is the text "Event is full".
Example:
new LS.EventScheduleListControl({ ... renderOptions: { eventFullMessageHtml: "Sold out!" }, ... }).init();
displayDateFullMonthName
Boolean setting that allows you to configure whether the full month name (instead of a three character abbreviation) is displayed. The default value for this setting is false (to show an abbreviated month name).
Example:
new LS.EventScheduleListControl({ ... renderOptions: { displayDateFullMonthName: true }, ... }).init();
Advanced callback handlers
If you need to perform custom actions on the control each time it renders, such as inserting markup or manipulating the DOM, event callback handlers are available. These callback handlers are offered for advanced scenarios where very specific customisations are needed to manipulate the behaviour of the list control.
beforeRenderCallback
Invoked after the API call for data has completed but before the HTML markup for the control is generated. This callback can be used to manipulate the API response data if required. Returning false
from this callback will stop the render process.
The callback is passed a reference to the control, the raw API response data, and context information for the callback.
Example:
new LS.EventScheduleListControl({ ... beforeRenderCallback: function(control, apiResponse, context) { } ... }).init();
afterRenderCallback
Invoked after the control has rendered the response from the server. This callback can be used to manipulate the generated DOM if required.
The callback is passed a reference to the control, the raw API response data, and context information for the callback.
Example:
new LS.EventScheduleListControl({ ... afterRenderCallback: function(control, apiResponse, context) { } ... }).init();
Test plan
Before you put this control on a live page, it is essential you run through our test plan for it which covers scenarios you might not have tested, or didn't know were supported by the control such as waiting lists and "Places remaining" alerts.
For more information, see Test cases (add-on) website event dates list with register buttons