Logic Hop Javascript

Quick Reference

Overview

Logic Hop provides a number of Javascript functions which allow you to easily integrate Logic Hop data, conditions and goals into themes, plugins and with third party services.

When caching is enabled Logic Hop’s Javascript Mode automatically renders Logic Tags and Conditional Widgets after page load to properly render personalized content.

Logic Hop Javascript Settings

Logic Hop Javascript Settings

Logic Hop Javascript Referrer & AJAX

Logic Hop’s Javascript functionality relies on AJAX. By default, the functionality is restricted to Javascript events called from your website – Calls from external websites are disabled.

The restriction is based on your domain name. The domain can be changed by visiting the Logic Hop settings and updating the Javascript Referrer field.

Note: Leaving the Javascript Referrer field blank will allow AJAX requests from any domains. It is recommended that you avoid allowing external requests unless necessary.

Access Variables with Javascript

Logic Hop data can be accessed via Javascript for use in themes and plugins. Pass a variable name into the __logichop_var( variable name )__ function. If the variable is set, the value will be returned. If the variable is not set a null value is returned.

The following code will return the location data object.

var location = logichop_var( 'Location' );
console.log( location );

View the full list of variables.

Enable Javascript Variables

Javascript variable display is disabled by default. To enable, check the Enable Javascript Variable Display in the Logic Hop Settings.

NOTE: Javascript Variable Display must be enabled in the Logic Hop Settings to display data via Javascript.

Disable Specific Variables

When Javascript Variable Display is enabled all variables for the current user can be accessed during the active session via Javascript from the browser. In most instances this does not pose an issue, however with third party services this could expose data you wish to keep private, such as ConvertKit or Drip custom fields.

To disable individual variables, enter comma-separated variable names in the Disable Variables text area.

Note: Variables are only disabled from access via Javascript. Variables remain accessible within Logic Hop and via PHP.

View the full list of variables.

Session Output

Stored variables can be viewed when the Logic Hop setting Session Output is set to Enable Session Display. Once Session Display has been enabled, enter logichop.data.debug into the Javascript Console to view the variables.

Note: Session Output should only be used during testing and development – Make sure to disable this option for production websites.

Evaluate Conditions with Javascript

Conditions can be evaluated with Javascript for use in themes and plugins. Pass a condition slug or ID into the __logichop_condition( slug, true callback, false callback )__ function. If the condition is met the true callback is executed. If the condition is not met the false callback is executed.

The following example the true callback is executed if the condition today-is-friday is met. The false callback is executed if the condition is not met.

logichop_condition( 'today-is-friday', my_true_callback, my_false_callback );

function my_true_callback () {
  console.log( 'today-is-friday returned TRUE' );
}

function my_false_callback () {
  console.log( 'today-is-friday returned FALSE' );
}

Set/Unset Goals with Javascript

Goals can be set and unset with Javascript for use in themes and plugins. Pass a goal slug or ID into the __logichop_goal() or logichop_goal_delete()__ function.

The following example sets the newsletter-signup goal for the current user:

logichop_goal( 'newsletter-signup' );

The following example deletes the newsletter-signup goal for the current user:

logichop_goal_delete( 'newsletter-signup' );

Javascript Conditions

Logic Hop Javascript Conditions can be used to dynamically show and hide content after the page has loaded. Logic Tags are automatically formatted for post-load rendering when Javascript Mode is enabled, however you opt to add the formatted code manually if desired.

Javascript Conditions consist of HTML elements which can enclose almost any type of content. The HTML elements can be hidden prior to displaying by adding the class logichop-condition.

The following code will fade in to display Happy Friday! when the condition today-is-friday is met:

<div class="logichop-js logichop-condition" data-cid="today-is-friday" data-event="fadeIn">
  Happy Friday!
</div>

NOTE: Javascript Mode must be enabled in the Logic Hop Settings to display conditions via Javascript.

Javascript Condition Code

  • div
    • Opening HTML element
    • Can be any valid HTML element
      • Example: span, p, ul, h1, h2
  • class
    • Must include “logichop-js” to be evaluated
    • Additional classes can be added as needed
  • data-cid
    • WordPress slug or ID of the Logic Hop Condition
  • data-not
    • If true the content is displayed when the condition is not met
  • style
    • Set as “display: none;” to hide element on initial page load
    • Omit or leave blank to show element on initial page load
  • data-event
    • The jQuery Display Effect trigged for the HTML element if the Condition is met
    • Omit or set to “none” for no event
  • data-css-add
    • Adds CSS classes to the HTML element when the condition is successfully evaluated
    • One, or more CSS classes separated by spaces
      • Example: warning, highlight, active
    • Omit or set as “” to add no CSS classes
  • data-css-remove
    • Removes CSS classes from the HTML element when the condition is successfully evaluated
    • One, or more CSS classes separated by spaces
      • Example: warning, highlight, active
    • Omit or set as “” to remove no CSS classes
  • /div
    • Closing HTML element
    • Can be any valid HTML element
      • Example: /span, /p, /ul, /h1, /h2

Note: Your Javascript Condition can be applied to any type of HTML element. In the WordPress Editor, change the <div></div> tag as needed.

Javascript Variables

Javascript can be used to display data via AJAX after page load. Logic Tags are automatically formatted for post-load rendering when Javascript Mode is enabled, however you opt to add the formatted code manually if desired.

Javascript Variables consist of HTML elements and the variable value is inserted into the element after the page loads. The HTML elements are visible by default.

HTML elements are formatted with the following:

  • div
    • Opening HTML element
    • Can be any valid HTML element
      • Example: span, p, ul, h1, h2, input, img
  • class
    • Must include “logichop-js” to be evaluated
    • Additional classes can be added as needed
  • data-var
    • Logic Hop variable name
  • data-type
    • replace
      • Element content replaced by variable using jQuery .html( var )
    • html
      • Element content replaced by variable using jQuery .html( var )
    • text
      • Element content replaced by variable using jQuery .text( var )
    • prepend
      • Variable prepended to element using jQuery .append( var )
    • append
      • Variable appended to element using jQuery .append( var )
    • input
      • Element value set to variable using jQuery .val( var )
  • data-src
    • Element src set to variable using jQuery _.attr( ‘src’, var )__
  • data-event
    • The jQuery Display Effect trigged for the HTML element when the value loads
    • Omit or set to “none” for no event
  • data-case
    • Changes variable case
      • lower
        • Lowercase
      • upper
        • Uppercase
      • first
        • First word uppercase
        • words
        • First letter of every word uppercase
  • data-spaces
    • Replace spaces with character
      • Example: data-spaces=”-“
  • /div
    • Closing HTML element
    • Can be any valid HTML element
      • Example: /span, /p, /ul, /h1, /h2

The following code will display the user’s city within a <span> tag after the page loads:

<span class="logichop-js" data-var="Location.City" data-type="html" data-event="show"></span>

The following code will display the user’s city within a <h1> tag after the page loads:

<h1 class="logichop-js" data-var="Location.City" data-type="html" data-event="append">Hello </h1>

The following code will display the user’s city within a text input tag after the page loads:

<input type="text" class="logichop-js" data-var="Location.City" data-type="input" value="">

NOTE: Javascript Mode and Javascript Variable Display must be enabled in the Logic Hop Settings to display data via Javascript.

Javascript Helper Classes

Logic Hop provides additional classes that can be used to minimize flicker when displaying conditions and loading data via Javascript. The classes hide the elements on the page using CSS and are displayed using jQuery after the page loads.

View the full details in the caching documentation.

jQuery Display Effects

Conditions are evaluated via AJAX after the page loads and, if a condition is met, the following events can be trigged to modify the HTML element:

  • Show
  • Hide
  • Toggle
  • Fade In
  • Fade Out
  • Fade Toggle
  • Slide Down
  • Slide Up
  • Slide Toggle