Wordpress how to use shortcode to get a value from localStorage

user_16709045 0
Viewed 308

Problem:
I need to create a shortcode that contains a value extracted from a strong tag.
When I echo "document.write(localStorage.getItem('getnum'));";
the code shows the value 85.
But when I return it (the following code), the shortcode [showpoints] shows no value.
Would you please let me know how to return the value?

Code I tried:

    <?php
         ?>
    <script type="text/javascript">
      jQuery(document).ready(function($) {
        let getnum = $('div.elementor-widget-container p > strong').text();
        JSON.parse(localStorage.getItem('getnum'));
      });
    </script>

    <?php
    function points_show_function() {
    return "<script>document.write(localStorage.getItem('getnum'));</script>";
    }
    add_shortcode('showpoints', 'points_show_function');

Console:
No error

HTML (code came from a yith point & reward plugin):

<div class="elementor-element elementor-element-c1d0790 elementor-widget elementor-widget-text-editor" data-id="c1d0790" data-element_type="widget" id="pointsid" data-widget_type="text-editor.default">
    <div class="elementor-widget-container">
        <p>Your credit is  <strong>85</strong> Points</p>                       
    </div>
</div>
shortcode wordpress php jquery javascript
1 Answers
  1. You would need to set the value first so that you could get it later on! On line 6 you would need to set it.
  2. Replace return with echo in your callback function.
  3. You would need to call your short code by using do_shortcode in your template!

So your code would be something like this:

<script type="text/javascript">
  jQuery(document).ready(function($) {
    let getnum = $('div.elementor-widget-container p > strong').text();
    localStorage.setItem('getnum', getnum);
  });
</script>

<?php
add_shortcode('showpoints', 'points_show_function');

function points_show_function()
{
  echo "<script>document.write(localStorage.getItem('getnum'));</script>";
}

do_shortcode('[showpoints]');

This do_shortcode('[showpoints]'); will do the magic here! So place it on your template where you want to output the value.

Alternative way

According to Mozilla Docs you do not need to use JSON.stringify to set a single string value to localStorage, but just in case you can't get the first method to work, use the following code instead:

<script type="text/javascript">
  jQuery(document).ready(function($) {
    let getnum = $('div.elementor-widget-container p > strong').text();
    localStorage.setItem('getnum', JSON.stringify(getnum));
  });
</script>

<?php
add_shortcode('showpoints', 'points_show_function');

function points_show_function()
{
  echo "<script>document.write(JSON.parse(localStorage.getItem('getnum')));</script>";
}

do_shortcode('[showpoints]');

Another way using return

If you would need to return the value in your callback function, then use this code:

<script type="text/javascript">
  jQuery(document).ready(function($) {
    let getnum = $('div.elementor-widget-container p > strong').text();
    localStorage.setItem('getnum', JSON.stringify(getnum));
  });
</script>

<?php
add_shortcode('showpoints', 'points_show_function');

function points_show_function()
{
  return "<script>document.write(JSON.parse(localStorage.getItem('getnum')));</script>";
}

echo do_shortcode('[showpoints]');
user_150406270
Related