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 mobileVITALS_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; }
-