Skip to content
Addonify

Addonify

Documentation & knowledge based site

  • Docs
    • Quick View
    • Compare Products
    • Floating Cart
    • EDD 2Checkout Inline Gateway
  • Plugins
  • Themes
  • Support
  • Blog
Addonify store
  • Docs
    • Quick View
    • Compare Products
    • Floating Cart
    • EDD 2Checkout Inline Gateway
  • Plugins
  • Themes
  • Support
  • Blog

Getting Started [2]

  • Installation
  • Setting Page

Features [5]

  • General
  • Shopping Meter
  • Cart Action Notification
  • Coupon Application
  • Shipping Application

Developer [3]

  • Using Hooks
  • Overwriting Templates
  • JavaScript API

Snippets [1]

  • Disable overlay blur

Support [3]

  • Support & Discussion
  • Downloading POT file
  • Changelog
  • Home
  • Kb
  • Floating Cart
  • Developer
  • JavaScript API

JavaScript API

  • Updated on: September 15, 2023

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

Didn't find what you looking for? Try sending your questions from our contact page.

Your feedback matters to us. Was this article helpful to you?

2

Copyright © 2022 addonify.com. All rights reserved.

Project by 💖 CreamCode.Org