JavaScript add-ons/widgets

Event dates list with register buttons

This control has been deprecated. Please use Arlo Web Controls instead.

The script control in this article is used to produce a list of upcoming event dates for event templates on an Arlo platform, including details of the event and a corresponding register button for each. This control has filters for the event category, location, month, and keyword that the registrant can use to find particular events on your platform.

Note: If you want to use this add-on and want to pull through events from multiple Arlo platforms, see Website add-on: Event list with filters for multiple platforms' events.

Live demo

To see a live demo, please click here

Getting started

To quickly get started, download the ZIP (multiapi-list.zip). This archive contains all the code you will need to integrate the control in your website.

Prerequisites

• Knowledge of HTML/CSS in general
• Knowledge of the possible constraints of your website (CMS, web server, etc...)

Step 1 : Exploring the archive

You will find in the archive :

• an index.html file, containing the html mark-up that need to be added to the page
• a resources folder containing :
• css folder :
• ls-multiapi-list.min.css : contains all the default styling for the control. You may need to override them into your own css to fit your website colors and styles
• js folder :
• ls-multiapi-list.min.js and respond.min.js : contain the control application, do not edit those files !
• config.js : contains all the control parameters, you will need to edit this file with your settings
• images folder : contains all the images used by the control, you can changes them to fit your website colors and styles

Step 2 : Edit the config.js file

Here the content of the default config file :  

(function ($, global) {
    $.extend(global.configinit, {
        platforms: [
        {
            displayName: 'Demo',
            platformName: 'demo',
            apiUrl: 'https://demo.arlo.co/api/2012-02-01/pub/resources/eventsearch/'
        },
        {
            displayName: 'Demo2',
            platformName: 'demo2',
            apiUrl: 'https://demo2.arlo.co/api/2012-02-01/pub/resources/eventsearch/'
        }], // List the platforms used in the page, alone or all together
        multiApiUrl: 'https://aggregator-api.learningsourceapp.com/', // Url of the server used for multiapi calls
        gstInclusivePrices: true, // set to true if you want to display prices GST inclusive
        credits: {
            creditsEnabled: true, // Enable use of credits in the UI
            creditPointsUnits: 'Points', // unit displayed next to the credits points
            creditHoursUnits: 'Hours' // unit displayed next to the credits hours
        },
        resultsPerPage: 10,
        suggestATopicUrl: 'http://yoursite.arlo.co/register-interest?t=1'
    });
}(window.jQuery_isolated, window.LS));

you will need to first edit the platforms array and add the platform you want to display :
displayName : name used in the providers list drop-down
platformName : name of the Arlo platform
apiUrl : Url used to communicate directly with this platform. The format should be as following : 

https://{platform_name}.arlo.co/api/2012-02-01/pub/resources/eventsearch/

the other options are not compulsory to modify, and are used to adapt the control to your needs. See comments for an explanation of what they are for.

Step 3 : Add the HTML mark-up to your page

Open the index.html file in your favorite text editor.
Copy the mark-up inside the body tags and paste it into your page.

Step 4 : Link resources to your page

Make sure to upload all the resources listed in step 1 to your website and then link them to your page. Replace href and src properties to match the destination of resources on your website.

If all the images in the page are displayed incorrectly, edit the html mark-up added in step 3 and change the src destination in all img tags to match the destination of resources on your website.

If you have trouble with any of those steps, please contact Arlo support.

Step 5 : Adapt css styles to your needs

Feel free to adapt colors and styles of the control for your site. you can override most of the css rules used in the control.
We recommend using Google Chrome Developer Tools to easily spot which rules you want to change.

Step 6 : Remove Provider drop-down

The provider drop-down is of no use if you only use one platform with the control, hence add the following rule to your css :

.secondary-filter.dropdown { display: none; }