Bucks Event-Specific Documentation for Currency Switch

Purpose

This documentation explains the details of the Bucks Currency Converter’s custom emitted event for currency change in the switcher. From this event we can get the selected currency by listening to this event. Additionally, this event emitter works across different scenarios, such as page load and page switch.

Scope

This works only if the Bucks app is present in the store.

Step-by-Step Guide

Follow these steps to listen for and handle the BUCKS_SELECTED_CURRENCY custom event:

1. Add an Event Listener

Register an event listener for the BUCKS_SELECTED_CURRENCY custom event on the window object.

    document.addEventListener('BUCKS_SELECTED_CURRENCY', (event) => {
        const selectedCurrency = event.detail;
        console.log('Selected currency:', selectedCurrency);
        // Perform additional actions with the selected currency
    });

2. Handle the Event Data

The event.detail property contains the currently selected currency. Use this data to implement your desired functionality, such as updating the UI or making an API call.

3. Remove the Event Listener (Optional)

If you no longer need to listen to the event (e.g., when a certain component or page is destroyed), remove the event listener to avoid potential memory leaks:

    document.removeEventListener('BUCKS_SELECTED_CURRENCY', yourHandlerFunction);

4. Verify the Integration

• Test the functionality by interacting with the currency selector.
• Confirm that the event listener logs the selected currency or performs the desired action.
• Additionally, ensure the event listener works as expected during page load and page switch scenarios. Test for cases where the page reloads or transitions to verify that the selected currency is accurately logged or handled after the event emitter is triggered.

Technical Notes

• Trigger Condition: The BUCKS_SELECTED_CURRENCY event is dispatched automatically in the page load, when the user clicks on a currency in the currency selector and when the user switches the pages.
• Event Payload: The detail object in the event contains the selected currency and can be accessed via event.detail.
• Important: Ensure the event listener is added before any interaction with the currency selector occurs to avoid missing the event.

Hope you've got some value from this article.

Let us know your feedback 🙂 We are excited to hear your thoughts. 🙂

Updated on: 06/08/2025