JavaScript events for developers
Public JavaScript events and functions of Krown themes: refresh the cart drawer, and listen for cart updates, add to cart and variant changes.
Applies to: All Krown themes. Last checked: 2026-10-13.
Please note that this article is about advanced development and we do not provide any kind of support or assistance in implementing custom queries.
Krown themes are written in plain JavaScript (no jQuery), with custom elements for the cart and the product form. Developers can call one public function and listen to three events to connect their own scripts or a third-party app. This page covers Local, Combine, Borders, Split, Highlight and Kingdom; Seventh has its own list.
Refresh the cart
The most common need: show the cart drawer after a custom script or an app adds a product to the cart.
window.refreshCart();The function reloads the cart contents and the cart count, and opens the cart drawer when the theme uses one.
Cart updated
Fires on the cart-form element when an item is removed from the cart or its quantity changes.
document.querySelector('cart-form').addEventListener('cart-updated', () => {
const cartItems = document.querySelectorAll('[data-js-cart-item]');
// all cart items
});Product added to the cart
Fires on the product-form element when a product is added to the cart. A page can have several product forms (product page, featured product, quick buy), so add the listener to each one.
document.querySelectorAll('product-form').forEach((form) => {
form.addEventListener('add-to-cart', (e) => {
const variantId = e.target.querySelector('input[name="id"]').value;
// the id of the variant that was added
});
});Variant changed
Fires on the product-variants element when the customer selects another variant. Read the selected variant object from its currentVariant property.
document.querySelector('product-variants').addEventListener('VARIANT_CHANGE', () => {
const variant = document.querySelector('product-variants').currentVariant;
});currentVariant is false when the selected options match no variant.
Does Seventh use the same events?
No. Seventh has its own events and its own way to refresh the cart. See JavaScript events.
Related pages
- JavaScript events: the Seventh events.
- Add jQuery for apps that need it: apps that expect jQuery.
- Custom work: Krown support does not help with custom code.