Guide

Aurora $.frontend jQuery Library

Suggest Edits

Overview

This is a JavaScript library provided by Aurora Commerce on an "as is" basis that allows integration into the Aurora Front-end by way of subscribing to events. It also provides access to several commonly required behaviours via dialogs.

To use the Aurora $.frontend jQuery Library:

  • Upload the $.frontend library file to: 

    templates/yoursite.com/_js/aurora_frontend.js

  • Add the following to your header template:

    {include_js resource_url_prefix=$resource_url_prefix files=aurora_frontend}

🚧

This library and all its methods are provided for convenience of use and reference only and are not supported by Aurora Commerce or developed as standard practice as this falls outside the general remit of 'development work' now adhered to, as described in the Design vs Development Guidelines.

If functionality that is not provided by this library is required, then it is the responsibility of the Agencies to perform any work necessary to add said functionality.

Glossary of Terms

Before we begin, please see the following list of terms used in this document (and throughout the Aurora documentation) to describe different aspects of Aurora and it's systems:

  • Aurora Core: This refers to anything that is common to ALL instances of Aurora and belongs to Aurora Commerce. This includes anything in the Back-end and most scripts driving the Front-end (not the Front-end templates).
  • Aurora Demo: This refers to the globally accessible demonstration website that Aurora Commerce provide and can be found here: https://demo.auroracommerce.com/
  • Back-end: This refers to the administration area of Aurora, which is any Page, Code or System found in or controlled by the "/aurora/" section of your site.
  • Front-end: This refers to the customer facing area of your website, i.e. the website in general, which your customers can see.
  • Templates: These are files (usually HTML, but can also include some images, JavaScript and CSS) that control how your site looks and is structured. Back-end Templates refer to the 'look' of the pages in the '/aurora/' section and belong editing wise to Aurora Commerce while Front-end templates refer to the 'look' of the main customer facing website and editing wise belong to you and your Agency.

Debugger

A debugger is available to aid in the debugging of these systems. To enable the $.frontend debugger and Log all event triggers and AJAX calls to the browser console, use the following:

http://www.domain.com/page-url?frontend.debugger=log

To log and trace all event triggers and AJAX calls to the browser console:
http://www.domain.com/page-url?frontend.debugger=trace

Events

Example events:

$.frontend.events.on('update_content.before', function (event, source_element) { /* do something */ });
$.frontend.events.on('update_content.after', function (event, source_element, json_response) { /* do something */ });
$.frontend.events.on('update_basket.before', function (event, source_element) { /* do something */ });
$.frontend.events.on('update_basket.after', function (event, source_element, json_response) { /* do something */ });
$.frontend.events.on('add_to_basket.before', function (event, source_element, request_data) { /* do something */ });
$.frontend.events.on('add_to_basket.after', function (event, json_response) { /* do something */ });
$.frontend.events.on('remove_from_basket.before', function (event, source_element, request_data) { /* do something */ });
$.frontend.events.on('remove_from_basket.after', function (event, json_response) { /* do something */ });
$.frontend.events.on('update_mini_basket.before', function (event, source_element) { /* do something */ });
$.frontend.events.on('update_mini_basket.after', function (event, source_element, json_response) { /* do something */ });
$.frontend.events.on('update_dropdown_basket.before', function (event) { /* do something */ });
$.frontend.events.on('update_dropdown_basket.after', function (event, json_response) { /* do something */ });
$.frontend.events.on('update_delivery_options.before', function (event, source_element) { /* do something */ });
$.frontend.events.on('update_delivery_options.after', function (event, source_element, json_response) { /* do something */ });
$.frontend.events.on('submit_login_form.before', function (event, request_data) { /* do something */ });
$.frontend.events.on('submit_login_form.after', function (event, json_response) { /* do something */ });
$.frontend.events.on('submit_register_form.before', function (event, request_data) { /* do something */ });
$.frontend.events.on('submit_register_form.after', function (event, json_response) { /* do something */ });
$.frontend.events.on('submit_email_signup_form.before', function (event, request_data) { /* do something */ });
$.frontend.events.on('submit_email_signup_form.after', function (event, json_response) { /* do something */ });
$.frontend.events.on('lookup_postcode.before', function (event, section_id) { /* do something */ });
$.frontend.events.on('lookup_postcode.after', function (event, json_response) { /* do something */ });
$.frontend.events.on('inline_validation.before', function (event, source_element) { /* do something */ });
$.frontend.events.on('inline_validation.after', function (event, source_element, json_response) { /* do something */ });

To trigger your own event:

$.frontend.events.trigger('my_sample_event.before', data);

Dialogs

Example dialogs (requires colorbox):

$.frontend.alert('Message', 'Title', function(){clicked_ok=1});
$.frontend.confirm('Message', 'Title', function(){clicked_yes=1}, function(){clicked_no=1});
$.frontend.error('Message', 'Title', function(){ clicked_ok=1 });
var responsive_popup_options = {resize: true, width: '90%', height '90%', maxWidth: '640px', maxWidth: '480px'};
$.frontend.popup.data('<b>HTML content</b>', responsive_popup_options, function(){closed=1});
$.frontend.popup.href('/link/to/page.html', responsive_popup_options, function(){closed=1});
$.frontend.popup.inline('.my_popup_template', responsive_popup_options, function(){closed=1});
$.frontend.popup.close(function(){closed=1}, clear_stack);

RPC

The RPC library provides basic methods for calling to the Aurora AJAX library and dealing with return data.

Examples

These example require the following HTML.

<div id="rpc_element_block_template" style="display:none;background:#000 0 0 repeat;opacity:0.8;cursor:auto;"></div>
<div id="rpc_element_loading_template" style="display:none;">LOADING</div>

Block the UI (requires colorbox) and GET data

$.frontend.rpc.blockUi(function() {
  $.frontend.rpc.get('/ajax/Ajax_Basket/getBasketDetails', {delivery_option: 1}, function(json_response) {
    // do something
    $.frontend.rpc.unblockUi();
  }), 'json');
});

Block one or more elements and POST data

$.frontend.rpc.blockElement('.first_element, .second_element', function() {
  $.frontend.rpc.get('/ajax/Ajax_Basket/getBasketDetails', {delivery_option: 1}, function(json_response) {
    // do something
    $.frontend.rpc.unblockElement('.first_element, .second_element');
  }), 'json');
});

Downloads

aurora_frontend.js

Updated over 2 years ago