Ecommerce Shopify WordPress Discussion

Render dynamically a custom Elementor shortcode with Javascript [closed]

Closed. This question needs to be more focused. It is not currently accepting answers. Want to improve this question? Update the question so it focuses on one problem only by editing this post. Closed 19 hours ago. Improve this question I have a Wordpress site designed with Elementor where I run code through the html element in Elementor to show a couple of dropdowns, when each one is selected with a value and the button clicked, the values of the dropdowns are passed into variables and then used in a shortcode to be passed to functions.php to run a select query to retrieve info from the database, based on the variables / attributes passed to them through the shortcode. Problem comes in where it is fine to use the shortcode with the parameters already set, but using with the parameter obtained from a variable is not passing through the shortcode (for example it will pass the actual variable name through the shortcode rather than the variable itself). Obviously php is run before javascript so I have read the only way to do this is through an ajax call. Not sure how to do this, please could you assist. This is how the code is setup: In the below, if you replace this line of code let shortf = "[my_elementor_php_output455 field_id="shortc" name_id="shorte"]"; With let shortf = "[my_elementor_php_output455 field_id="2" name_id="3"]"; It would produce the desired results, but it will obviously not pass the variable as in the firast line of code, but rather passes the variable name which is useless, need an ajax call, but need code to assist. In the html element in Elementor: <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> <center><label for="InfoPack"><b>Please choose your id</b></label><br> <select name="InfoPack" id="InfoPack"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6/option> <option value="7">7</option> <option value="8">8/option> </select></center> <center><label for="InfoPack1"><b>Please choose your name</b></label><br> <select name="InfoPack1" id="InfoPack1"> <option value="1">Moe</option> <option value="2">Dooley</option> <option value="3">Finn</option> <option value="4">James</option> <option value="5">Doe</option> <option value="6">Stanley/option> <option value="7">Day</option> <option value="8">Jay/option> </select></center> <button id="button"> process !</button> <p> <div id="result"> </div> </p> <script> $(document).ready(function() { $('#button').click(function() { document.getElementById("result").innerHTML = ""; let shortc = ""; let shorte = ""; let shortf = ""; fun(); }); }); function fun() { let shortc = document.getElementById("InfoPack").value; let shorte = document.getElementById("InfoPack1").value; let shortf = "[my_elementor_php_output455 field_id="shortc" name_id="shorte"]"; document.getElementById("result").innerHTML = shortf; } </script> </body> </html> In the functions.php: // Shortcode to output custom PHP in Elementor function wpc_elementor_shortcode455( $atts, $content = null, $tag){ $atts = shortcode_atts( [ 'field_id' => '', 'name_id' => '', ], $atts ); $myshape = $atts['field_id']; $myshape1 = $atts['name_id']; $servername = "localhost"; $username = "xxx"; $password = "xxx"; $dbname = "xxx"; // Create connection $conn = new mysqli($servername, $username, $password, $dbname); // Check connection if ($conn->connect_error) { die("Connection failed: " . $conn->connect_error); } $sql = "SELECT id, nid, firstname, lastname FROM MyGuests where id=$myshape AND nid=$myshape1"; $result = $conn->query($sql); if ($result !== false && $result->num_rows > 0) { // output data of each row while($row = $result->fetch_assoc()) { return "id: " . $row["id"]. " - Name: " . $row["firstname"]. " " . $row["lastname"]. "<br>"; } } else { return "0 results"; } $conn->close();
So I have tried adding ajax without success, when I click on the button, nothing happens, probably formatting, not sure at all, here is the code: Javascript: <script> $(document).ready(function() { $('#button').click(function() { ajaxcall(); }); }); function ajaxCall() { let shorto = document.getElementById("InfoPack").value; $.ajax({ type: "post", url: `${window.location.origin}/wp-admin/admin-ajax.php`, data: { action: "my_action", // the action to fire in the server data: shorto, // any JS object }, complete: function (response) { document.getElementById("result").innerHTML = console.log(JSON.parse(response.responseText).data); }, }); } </script> functions.php add_action('wp_ajax_my_action', 'my_function'); add_action('wp_ajax_nopriv_my_action', 'my_function'); function my_function() { $data = $_POST['data']; $data1 = "[my_elementor_php_output455 field_id=".$data." name_id=3]"; wp_send_json_success($data1); }

February 13, 2024

Based on the codes you shared for me , there is multiple syntax issue. could you share the URL ?

February 13, 2024

You can use the following code replacement (uses Ajax to render the shortcode dynamically) HTML + jQuery (Elementor): <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> <center> <label for="infopack-id"><b>Please choose your id</b></label><br> <select name="InfoPack" id="infopack-id"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6/option> <option value="7">7</option> <option value="8">8/option> </select> </center> <center> <label for="infopack-name"><b>Please choose your name</b></label><br> <select name="InfoPack1" id="infopack-name"> <option value="1">Moe</option> <option value="2">Dooley</option> <option value="3">Finn</option> <option value="4">James</option> <option value="5">Doe</option> <option value="6">Stanley/option> <option value="7">Day</option> <option value="8">Jay/option> </select> </center> <button id="button">Process !</button> <p> <div id="result"> </div> </p> <script> jQuery(function($) { $('#button').on('click', function() { const id = $('#infopack-id').val(), name = $('#infopack-name').val(); $.ajax({ type: 'post', url: window.location.origin+'/wp-admin/admin-ajax.php', data: { 'action': 'render_shortcode', 'id' : id, 'name' : name }, success: function (response) { $('#result').html(response); console.log(response); } }); }); }); </script> </body> </html> PHP (functions.php file) // Receive and process the ajax request add_action('wp_ajax_render_shortcode', 'render_shortcode_callback'); add_action('wp_ajax_nopriv_render_shortcode', 'render_shortcode_callback'); function render_shortcode_callback() { if ( isset($_POST['id']) && isset($_POST['name']) ) { $id = esc_attr($_POST['id']); $name = esc_attr($_POST['name']); echo do_shortcode("[my_elementor_php_output455 field_id='{$id}' name_id='{$name}']"); } wp_die(); } and your shortcode function (untested and unchanged): // Shortcode to output custom PHP in Elementor function wpc_elementor_shortcode455( $atts, $content = null, $tag){ $atts = shortcode_atts( [ 'field_id' => '', 'name_id' => '', ], $atts ); $myshape = $atts['field_id']; $myshape1 = $atts['name_id']; $servername = "localhost"; $username = "xxx"; $password = "xxx"; $dbname = "xxx"; // Create connection $conn = new mysqli($servername, $username, $password, $dbname); // Check connection if ($conn->connect_error) { die("Connection failed: " . $conn->connect_error); } $sql = "SELECT id, nid, firstname, lastname FROM MyGuests where id=$myshape AND nid=$myshape1"; $result = $conn->query($sql); if ($result !== false && $result->num_rows > 0) { // output data of each row while($row = $result->fetch_assoc()) { return "id: " . $row["id"]. " - Name: " . $row["firstname"]. " " . $row["lastname"]. "<br>"; } } else { return "0 results"; } $conn->close(); } Tested with a custom shortcode and works, displaying the shortcode dynamically.

February 13, 2024

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.