Conversation
supportHello. Thank you for this great plugin. 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 : document.addEventListener('DOMContentLoaded', function() { // Function to initialize the debouncer once the converter is rendered function initializeDebouncer() { const inputField = document.querySelector('.cr-exchange-rates .amount input'); const resultField = document.querySelector('.cr-exchange-rates .result'); let debounceTimer; if (!inputField) return; // If the input field is not yet available, exit inputField.addEventListener('input', function() { clearTimeout(debounceTimer); debounceTimer = setTimeout(() => { const amount = inputField.value; 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, toCurrency: document.querySelector('.cr-exchange-rates select:last-child').value }), }) .then(response => response.json()) .then(data => { console.log('Conversion logged:', data); }) .catch(error => { console.error('Error:', error); }); }, 500); // 500 ms delay for the debounce }); } // 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 debouncer initializeDebouncer(); 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 });});
Also Should we use additional button to start transferring data to /checkout ? Smth like this https://prnt.sc/e6Ud5R8rimXg This reply was modified 1 year, 9 months 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 1 year, 9 months ago by falselight . This reply was modified 1 year, 9 months 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.
Also Should we use additional button to start transferring data to /checkout ? Smth like this https://prnt.sc/e6Ud5R8rimXg This reply was modified 1 year, 9 months 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 1 year, 9 months ago by falselight . This reply was modified 1 year, 9 months 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.