JavaScript API event notifications¶

window.addEventListener('acquiaLiftDecision', function(e) {
console.log('received decision event for ' + e.detail.decision_slot_id + ' slot');
});

// Define a callback function for "acquiaLiftDecision" event.
window.addEventListener('acquiaLiftDecision', function(e) {
   // e.detail has decision's information. If the decision isn't our target "My Carousel Slot", early exit.
   if (e.detail.decision_slot_name !== 'My Carousel Slot') {
      return;
   }
   // For example, you can select all content pieces within a slot, and wrap each one of them by a <div>.
   jQuery('[data-lift-slot="' + e.detail.decision_slot_id + '"] > *').wrap('<div style="border: 1px solid red;" class="my-carousel-item"></div>');
});

window.addEventListener('acquiaLiftDecision', function(e) {
console.log('received decision event for ' + e.detail.decision_slot_id + ' slot');
console.log("Loaded");

$selectItems = jQuery('.form-item select');
$selectItems.delay(1000).chosen({
   disable_search_threshold: 5,
   no_results_text: "No Results Found.",
   width: "100%"
}).prop('disabled', false).trigger("chosen:updated");
});

window.addEventListener('acquiaLiftDecision', function(event) {
  /*
    First, check that this is the correct slot to work on.
    The event detail contains the slot id and name:
    - `event.detail.decision_slot_id`
    - `event.detail.decision_slot_name`

   In the example below, the slot was named 'My Slot' when it was created.
  */
  if (event.detail.decision_slot_name === 'My Slot') {
    /*
      Next, select the HTML element that is the slot.

      This shows two ways to select the slot's HTML element:
      - using vanilla JS
      - using jQuery
    */
    // Vanilla JS method to select the slot's HTML.
    const slotElement = document.querySelector(`[data-lift-slot="${event.detail.decision_slot_id}"]`);

    // Using jQuery to select the slot's HTML.
   const slotElementJQ = $(`[data-lift-slot="${event.detail.decision_slot_id}"]`);

    /*
      Finally, act on the slot HTML element.
      The JS code to apply will be some API method.
      JS libraries do not all operate the same way.

      Some examples are show below.
    */

    // An example of APIs that act directly on HTML elements:
    someApiMethod(slotElement);

    // Example for Slick, with an options object to define the carousel's properties:
    slotElementJQ.slick(options);
   }
 });

window.addEventListener('acquiaLiftDecision', function(event) {
  /*
    First, check that this is the correct slot to work on.
    The event detail contains the slot id and name:
    - `event.detail.decision_slot_id`
    - `event.detail.decision_slot_name`

    In the example below, the slot was named 'My Slot' when it was created.
  */
  if (event.detail.decision_slot_name === 'My Slot') {
    /*
      Next, select the HTML element that is the slot.
    */
    const slotElement = document.querySelector(`[data-lift-slot="${event.detail.decision_slot_id}"]`);

    /*
      Finally, act on the slot HTML element.
      JS libraries do not all operate the same way, consult their documentation.
    */
  }
});

window.addEventListener('acquiaLiftContentCustomizable', function(event) {
// Console to show the customizable decision content.
console.log('acquiaLiftContentCustomizable', event.detail);
});

window.addEventListener('acquiaLiftContentCustomizable', function(event) {
// Console to show the customizable decision content.
console.info('acquiaLiftContentCustomizable', event.detail);
// Process decisions.
var decisions = event.detail;
Object.keys(decisions).forEach(function(slotId) {
   // Process a decision.
   var decision = decisions[slotId];
   var html = decision.contents.reduce(function(html, content) { return html + content.html }, '');
   var slotElement = document.querySelector(decision.slot_css_selector);

   if (!slotElement) {
      console.warn('Decision on slot "' + slotId + '" has HTML "' + html + '", but slot is not on the page.');
      return;
   }

   // Empty out the element.
   while (slotElement.hasChildNodes()) {
      slotElement.removeChild(slotElement.lastChild);
   }

   // Set the customizable content to the target element's innerHTML.
   slotElement.innerHTML = html;
});
});

window.addEventListener("acquiaLiftRuleUpdate", function(){
AcquiaLiftPublicApi.customize();
});