Ecommerce Shopify WordPress Discussion

WordPress data persistence and increment in checkout bill with Snippets plugin

This is about a Woocommerce, from scratch, delivery website. I also use Neve theme and Elementor. When I clic on a product of my cart page I make appear a modal in which the user can enter additional infos. I would like that the inputted data from the modal still persist after the page get refreshed and save that data to the order after checkout. I tried AJAX and localstorage but obviously did it wrong. The following code is how I generate the modal with its form, when user clic on a product of the list. Additionnal data is added via an extra div with jQuery. I know it's far from state of the art, but that's what I have: <script type="text/javascript"> // Assurez-vous que jQuery est chargé if (typeof jQuery !== 'undefined') { jQuery(document).ready(function($) { // Attendre que la page soit entièrement chargée jQuery(".woocommerce table.shop_table.cart tr").on("click", function(e) { // Empêcher tout comportement par défaut (par exemple, un lien) e.preventDefault(); // Afficher la modale avec les champs d'entrée showWelcomeModalWithInputs(this); }); // Empêcher la propagation du clic à l'intérieur de la modale jQuery(".woocommerce table.shop_table.cart tr").on("click", ".welcome-modal input, .welcome-modal button, .welcome-modal label", function(e) { e.stopPropagation(); }); // Fermer la modale lors du clic sur la croix de fermeture jQuery(".woocommerce table.shop_table.cart tr").on("click", ".welcome-modal .close, .welcome-modal .close-modal", function() { closeWelcomeModal(); }); // Fermer la modale lors du clic sur le bouton "Soumettre" jQuery(".woocommerce table.shop_table.cart tr").on("click", ".welcome-modal button", function() { submitWelcomeForm(); }); }); } // Fonction pour remplir les champs de la modale avec les valeurs existantes function fillModalInputs(clickedRow) { // Récupérer les valeurs existantes à partir des divs ajoutées précédemment var infoDiv = clickedRow.find('.info-container'); // Remplir les champs de la modale avec les valeurs existantes jQuery('#input1').val(infoDiv.find('p:eq(0)').text()); jQuery('#input2').val(infoDiv.find('p:eq(1)').text()); jQuery('#datepicker').val(infoDiv.find('p:eq(2)').text()); } // Fonction pour fermer la modale de bienvenue function closeWelcomeModal() { // Supprimer la modale en dehors de l'élément cliqué jQuery('.welcome-modal').remove(); // Supprimer la classe "active" de tous les éléments jQuery(".woocommerce table.shop_table.cart tr").removeClass("active"); } // Attacher l'événement de fermeture en cliquant en dehors de la modale au document jQuery(document).on("click", closeWelcomeModalOutsideClick); // Fonction pour afficher la modale de bienvenue avec les champs d'entrée et le calendrier function showWelcomeModalWithInputs(clickedRow) { var input1Value = jQuery(clickedRow).find('.info-container p:eq(0)').text(); var input2Value = jQuery(clickedRow).find('.info-container p:eq(1)').text(); var datepickerValue = jQuery(clickedRow).find('.info-container p:eq(2)').text(); var modal = jQuery('<div class="welcome-modal">' + '<div class="modal-content">' + '<span class="close">×</span>' + '<div class="column">' + '<p><label for="input1">Numéro de colis:</label><br><input type="text" id="input1" name="input1" value="' + input1Value + '"></p>' + '<p><label for="input2">Adresse du relais colis:</label><br><input type="text" id="input2" name="input2" value="' + input2Value + '"></p>' + '<p><label for="datepicker">Sélectionner une date:</label><br><input type="text" id="datepicker" name="datepicker" value="' + datepickerValue + '"></p>' + '<button class="submitModal">Soumettre</button>' + '</div>' + '</div>'); // Ajout de la classe "active" pour cibler spécifiquement le conteneur cliqué jQuery(clickedRow).addClass("active"); // Ajout de la modale à l'élément cliqué jQuery(clickedRow).append(modal); // Activer le Datepicker sur le champ d'entrée avec l'ID "datepicker" jQuery("#datepicker").datepicker(); // Remplir les champs de la modale avec les valeurs existantes $('#input1').val(input1Value); $('#input2').val(input2Value); $('#datepicker').val(datepickerValue); } // Fonction pour fermer la modale de bienvenue function closeWelcomeModal() { // Supprimer la modale en dehors de l'élément cliqué jQuery('.welcome-modal').remove(); // Supprimer la classe "active" de tous les éléments jQuery(".woocommerce table.shop_table.cart tr").removeClass("active"); } // // Attacher l'événement de fermeture au document avec délégation d'événement // jQuery(document).on("click", ".welcome-modal .close, .welcome-modal .close-modal", function() { // closeWelcomeModal(); // }); // Attacher l'événement de fermeture en cliquant en dehors de la modale au document jQuery(document).on("click", closeWelcomeModalOutsideClick); // Fonction pour soumettre le formulaire dans la modale et mettre à jour les informations existantes function submitWelcomeForm() { // Récupérer le conteneur actif (celui qui a été cliqué) var clickedRow = jQuery(".woocommerce table.shop_table.cart tr.active"); // Récupérer les valeurs des champs var input1Value = jQuery('#input1').val(); var input2Value = jQuery('#input2').val(); var datepickerValue = jQuery('#datepicker').val(); // Vérifier si les champs contiennent une valeur avant de mettre à jour les informations existantes if (input1Value || input2Value || datepickerValue) { // Vérifier s'il existe déjà une div d'informations var infoDiv = clickedRow.find('.info-container'); if (infoDiv.length > 0) { // Mettre à jour les valeurs existantes dans la div d'informations infoDiv.find('p:eq(0)').text(input1Value); infoDiv.find('p:eq(1)').text(input2Value); infoDiv.find('p:eq(2)').text(datepickerValue); } else { // Créer une nouvelle div pour afficher les informations en bas du conteneur infoDiv = jQuery('<div class="info-container same-style-as-existing-content"></div>'); // Ajouter les balises <p> avec les valeurs des inputs à la nouvelle div infoDiv.append('<p>' + input1Value + '</p>'); infoDiv.append('<p>' + input2Value + '</p>'); infoDiv.append('<p>' + datepickerValue + '</p>'); // Ajouter la nouvelle div à la fin du conteneur existant clickedRow.append(infoDiv); } } // Fermer la modale après la soumission closeWelcomeModal(); } </script>
TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.