Arlo

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

  1. 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>
  2. 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"/>
  3. 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>
  4. 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.
  5. 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