JavaScript API
We have few javaScript methods and events in addonify floating cart that can be used where required.
Methods:
Programmatically interact with addonify floating cart.
open()
Display addonify floating cart canvas/modal/panel programmatically when required.
🎮 Method: addonifyFloatingCart.action.cart.open();
Example: jQuery
(function ($) {
$(document).ready(function () {
$("#your-btn-ele").on("click", (e) => {
e.preventDefault();
// Open cart.
addonifyFloatingCart.action.cart.open();
})
});
})(jQuery);Example: Vanilla JS
document.addEventListener("DOMContentLoaded", function () {
const myCustomEle = document.getElementById("your-btn-ele");
if (myCustomEle) {
myCustomEle.addEventListener("click", (e) => {
e.preventDefault();
// Open cart.
addonifyFloatingCart.action.cart.open();
})
}
});close()
Hide addonify floating cart canvas/modal/panel programmatically when required.
🎮 Method: addonifyFloatingCart.action.cart.close();
Example:
closeCartButtonEle.addEventListener("click", (e) => {
e.preventDefault();
// Close cart.
addonifyFloatingCart.action.cart.close();
});refresh()
Programmatically refresh the cart via AJAX call if required.
🎮 Method: addonifyFloatingCart.action.cart.refresh();
Example:
In this example, we will invoke the addonify floating cart refresh method when a custom event i.e. letSomeEvent is dispatched.
document.addEventListener("letSomeEvent", (e) => addonifyFloatingCart.action.cart.refresh());Note: As always, you can refresh the addonify floating cart on any built-in JavaScript event too. refresh method is an async method. It returns a promise. If you wish to catch any error.
Example: try & catch approach.
(function ($) {
"use strict";
const myEle = $(".afc-btn");
if (myEle.length > 0) {
$(myEle).on("click", (e) => {
e.preventDefault();
reloadCart();
});
}
const reloadCart = async () => {
try {
await addonifyFloatingCart.action.cart.refresh();
} catch (err) {
// [ Handle error here .....]
}
}
})(jQuery);Events:
Addonify floating cart also dispatch events. You can listen to these events if required. All the events that are dispatched can be listened to by using jQuery or vanilla JS code block in the DOM.
Cart opened
🎯 Event: addonifyFloatingCartOpened
Example jQuery:
(function ($) {
$(document).ready(function () {
$(document).on("addonifyFloatingCartOpened", function(e) {
// Do something....
});
});
})(jQuery);Similarly, we also dispatch native DOM events where you can also use vanilla JS event listeners.
Example vanilla js:
document.addEventListener("DOMContentLoaded", function () {
document.addEventListener("addonifyFloatingCartOpened", function(e) {
// Do something when cart is opened.
});
});Cart closed
🎯 Event: addonifyFloatingCartClosed
Example:
document.addEventListener("addonifyFloatingCartClosed", function (e) {
// Do something....
});Cart updated
🎯 Event: addonifyFloatingCartUpdated
Example:
document.addEventListener("addonifyFloatingCartUpdated", function (e) {
// Do something....
});Cart empty
🎯 Event: addonifyFloatingCartEmptied
Example:
document.addEventListener("addonifyFloatingCartEmptied", function (e) {
// Do something....
});Product removed
🎯 Event: addonifyFloatingCartProductRemoved
Example:
document.addEventListener("addonifyFloatingCartProductRemoved", function (e) {
// Do something.....
});Product restored
🎯 Event: addonifyFloatingCartProductRestored
Example:
document.addEventListener("addonifyFloatingCartProductRestored", function (e) {
// Do something.....
});Note: This event is dispatched when the product in the cart is restored by clicking the undo button on the cart alert message.
Coupon model opened
🎯 Event: addonifyFloatingCartCouponModalOpened
Coupon model closed
🎯 Event: addonifyFloatingCartCouponModalClosed
Coupon applied
🎯 Event: addonifyFloatingCartCouponApplied
Coupon Removed
🎯 Event: addonifyFloatingCartCouponRemoved
Shipping modal opened
🎯 Event: addonifyFloatingCartShippingModalOpened
Shipping modal closed
🎯 Event: addonifyFloatingCartShippingModalClosed
Shipping address updated
🎯 Event: addonifyFloatingCartShippingAddressUpdated
Shopping meter threshold reached
🎯 Event: addonifyFloatingCartShoppingMeterThresholdReached