Some additional info needed

Also Should we use additional button to start transferring data to /checkout ? Smth like this https://prnt.sc/e6Ud5R8rimXg

• This reply was modified 2 months, 3 weeks ago by bing4.

In the example above, data is debounced before being sent to the server after input. Of course, you can use a button if you prefer.

debouncing refers to a technique used to limit the rate at which a function is called. It’s commonly used in scenarios where an event might be triggered multiple times in quick succession, such as when a user is typing in a text field or clicking a button. Debouncing ensures that the function (such as sending data to a server) is only called once after the user has finished their action, rather than multiple times.

• This reply was modified 2 months, 3 weeks ago by falselight.
• This reply was modified 2 months, 3 weeks ago by falselight.

Just to continue previous topic with your another (rate) plugin can we use the same code to transfer converted data to checkout ? I mean this code

nope, this is another.

Of course, you can use a button if you prefer.

Users can simply test this converter and the button should work as some kind of agreement to proceed checkout.

Can you, please, provide example for button with your code, which will transfer data to checkout price ?

The thing is that the plugin is designed in such a way that the conversion process happens instantly as soon as a person has entered the required amount and the button there is of no use. But if you want to click on the button separately to send a request – it is possible. The main thing is that users should realize that they need to do one more additional action, because as I wrote earlier – the conversion process happens instantly when the value is entered.

document.addEventListener('DOMContentLoaded', function () {
    // Function to initialize the event listener once the converter is rendered
    function initializeSendButton() {
        const inputField = document.querySelector('.cr-exchange-rates .amount input');
        const sendButton = document.querySelector('.send-button'); // YOUR CUSTOM BUTTON!!!
        const resultField = document.querySelector('.cr-exchange-rates .result');

        if (!inputField || !sendButton || !resultField) return; // If any required elements are not available, exit

        // Add a click event listener to the "Send" button
        sendButton.addEventListener('click', function () {
            const amount = inputField.value; // Get the amount entered by the user
            const result = resultField.textContent; // Get the result of the conversion

            // Send the collected data to the server
            fetch('/path-to-your-server-endpoint', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    amount: amount,
                    fromCurrency: document.querySelector('.cr-exchange-rates select').value, // Get the selected "from" currency
                    toCurrency: document.querySelector('.cr-exchange-rates select:last-child').value, // Get the selected "to" currency
                    conversionResult: result // Include the conversion result in the data sent to the server
                }),
            })
            .then(response => response.json())
            .then(data => {
                console.log('Conversion logged:', data); // Log the response data for debugging
            })
            .catch(error => {
                console.error('Error:', error); // Log any errors that occur
            });
        });
    }

    // Use a MutationObserver to detect when the converter is added to the DOM
    const observer = new MutationObserver((mutationsList) => {
        for (let mutation of mutationsList) {
            if (mutation.type === 'childList') {
                if (document.querySelector('.cr-exchange-rates')) {
                    // If the currency converter is found, initialize the send button listener
                    initializeSendButton();
                    observer.disconnect(); // Stop observing once initialized
                }
            }
        }
    });

    // Start observing the body for added nodes (i.e., when the converter is injected into the DOM)
    observer.observe(document.body, { childList: true, subtree: true });
});

I`ve just add your code via Fluent Snippets to sitewide header (footer tested too). Also made button send.</p> <p>But after Send button was clicked there was empty cart on Checkout.</p> <p>Should we use additional products to calculate it via converter and add to cart ?</p> <p>(Also I`ve test 1 variation of the code, without button. There is no redirection to checkout even the endpoint is /checkout)

What you write is not a trivial case for this widget. This needs to be seen on your website.

Thank you. If you have any more questions, please open new topics. We will be happy to help you.