Public JavaScript API

If you are an experienced developer you can use the following JavaScript Events, Variables, Functions and Hooks to create custom integrations with Vitals, via the Custom JS fields on the Global App Settings page.

Events:

• VITALS_EVENT_DISCOUNTS_LOADED
• VITALS_EVENT_PRICES_UPDATED
• VITALS_EVENT_RENDER_CAROUSEL_STARS
• VITALS_EVENT_RENDER_COLLECTION_STARS
• VITALS_EVENT_CART_UPDATED
• VITALS_EVENT_SMART_BAR_RENDERED
• VITALS_EVENT_TABS_RENDERED
• VITALS_EVENT_VARIANT_CHANGED
• VITALS_EVENT_SMART_BAR_CLOSED
• VITALS_EVENT_ATC_BUTTON_FOUND

Variables:

• VITALS_IS_MOBILE⇒ boolean | true if the device is mobile
• VITALS_PAGE_TYPE⇒ string | reflects the current page type. Options are: home, product, collection, cart, password, searchresults, thank_you, order_status, top-reviews, wishlist, gift_cards.

Functions:

• VITALS_APPEND_CSS( cssString )
  • Adds the CSS to Vitals global CSS
  • This method should only be used if you need to compute CSS dynamically. If the CSS is static, simply add it to the Custom CSS section on the Global App Settings page.

Hooks:

The following JavaScript hooks must be used in the Custom JS Hooks field on the Global App Settings page.

• VITALS_HOOK__CAN_EXECUTE_CHECKOUT
  • Called when the Checkout button is clicked.
  • Usage: when additional validations are required before going to checkout, such as inputs to not be empty, check-boxes, etc. Example:

  • VITALS_HOOK__CAN_EXECUTE_CHECKOUT = function () {
       if ($('#CartTerms').is(':not(:checked)')) {
          window.alert('You must agree to the terms and conditions');
          return false;
       } else {
          return true;
       }
    }
    		

  • If the function does not return false, Vitals will continue with redirecting the user to the checkout page.
• VITALS_HOOK_DONT_ACCELERATE_CHECKOUT
  • When the Accelerate Checkout app is enabled, there are scenarios where it's functionality needs to be programatically disabled. Example: when the Add To Cart flow is taken over by another app.
  • Example usage:

    • VITALS_HOOK__DONT_ACCELERATE_CHECKOUT = () => $('#some-custom-buy-now-button').length > 0	

• VITALS_HOOK__GET_CUSTOM_CHECKOUT_URL_PARAMETERS
  • Add extra URL parameters to the checkout page.
  • The function most return an object. Each attribute will become an URL parameter.
  • Example:

    • VITALS_HOOK__GET_CUSTOM_CHECKOUT_URL_PARAMETERS = function () {
         var jLangAttribute = $('form[action^="/cart"] input[name="attributes[glang]"]');
      
         return {
            locale: jLangAttribute
         }
      }
      			

• VITALS_FLAG__STOP_EXECUTION
  • Set this flag to true to stop Vitals from running.
  • Example:

    • if (window.location.href.includes('shopifypreview')) {
      	VITALS_FLAG__STOP_EXECUTION = true;
      }