如何使用简单天气 JS 的 Redux 框架文本字段选项

Question

Hello Currently i am using Simple weather JS ( http://simpleweatherjs.com/ ) in my wordpress theme for showing live weather and also for options i am using redux framework.i've create a text field for "Name of your City" and my Option Unique ID is > " cpv-hm-cat-op-8 ". Preview of My Redux framework option is below.

array(
'id'       => 'cpv-hm-cat-op-8',
'type'     => 'text',
'title'    => __( 'Name of your city', 'redux' ),
'desc'    => __( 'Write your city which you want to show in weather', 'redux' ),
'default'  => 'New York',
), 

Now i want to use that option in my simple weather JS file and i want my output, when i input name of my city its show in weather of that city. simple weather js option look like =>

  $.simpleWeather({
    location: 'New Jersey',
    woeid: '',
    unit: 'c',
    success: function(weather) {
      html = '<h2><i class="symbol-weather  icon-'+weather.code+'"></i> '+weather.temp+'&deg;'+weather.units.temp+'</h2>';
      html += '<ul><li>'+weather.city+'</li>';  
      $("#weather").html(html);
    },
    error: function(error) {
      $("#weather").html('<p>'+error+'</p>');
    }
  });

Here "Location" i want to add my redux plugin option. but its not working.

  $.simpleWeather({
    location: '<?php global $cpv; echo $cpv['cpv-hm-cat-op-8'];?>',

Kindly Help me how can i add there my redux framework option.

Answer 1

I've found a solution, it works for me, but I don't know if it's the ideal solution.

My solution is adding the value to the head of the page, so it's accessable for further hooks. Make sure this code will be loaded before your code which needs this code (fe load all other stuff to the footer where it's used to be)

in function.php add

add_action ( 'wp_head', 'yourjs' );
function yourjs(){ global $cpv; //your global redux Var ?>
  <script type="text/javascript"> 
    var weatherinfo = <?php echo json_encode( array( 
         'city' => $cpv['cpv-hm-cat-op-8'],
         'zip' => $cpv['cpv-hm-cat-op-7'], // just an example for another value in the array
       ) ); ?>
  </script><?php
}

this will be put in the header on the page like:

<script type="text/javascript"> 
    var weatherinfo = {"city":"Austin","zip":"12345"}  </script>

so now you have an array of values you can access in your code - just call the var.

Hope this helps you.