web-dev-qa-db-fra.com

Comment passer de la variable $ atts du shortcode à la fonction Javascript du plugin

Je dois passer la variable $ atts d'un plugin à une fonction javascript, mais je ne sais pas comment le faire. La fonction javascript nécessite la variable de latitude php du shortcode afin de construire la carte.

Mon plugin ressemble à ceci:

<?php
/*
Plugin Name: Lax Google Map Plugin
Plugin URI: http://www.mysite.com
Description: Makes Map
Version: 1.0
Author URI: http://www.mysite.com
*/

function lax_google_map_init() {
    wp_enqueue_script('google-maps', 'http://maps.googleapis.com/maps/api/js?sensor=false');
    wp_enqueue_script('lax_google_map_script', plugins_url('js/lax_google_map_script.js', __FILE__), array('google-maps','jquery'));
}

add_action('init', 'lax_google_map_init');


function lax_google_map_maker($atts,$content=null) {

    $atts = shortcode_atts( array(
        'width' => '600', 
        'height'=>'600',
        'latitude'=>'38.9205'
        ),
        $atts);


    $output .= '<div id="map_canvas" style="width:'. $atts['width'] .'px; height: '. $atts['height'] .'px; border:1px solid black;"></div>';

    return $output;
}

 add_shortcode('lax-google-map', 'lax_google_map_maker');

?>

Le fichier javascript ressemble à:

jQuery.noConflict();

jQuery(document).ready(function($) {

  var latlng = new google.maps.LatLng(39.73, -76.02);
  var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

      var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);

});

Je dois donc remplacer "39.73" par quelque chose comme:

pseudo-code:

var latlng = new google.maps.LatLng (+ $ atts ['latitude'] +, -76.02);

En outre, le javascript est chargé avant que le shortcode $ atts soit disponible. Quelle est la meilleure façon de le changer?

Désolé, pour les questions de base. J'apprends à écrire un plugin.

Aucune suggestion?

Je vous remercie.

-Laxmidi

METTRE À JOUR:

Si j'ajoute ceci:

$params = array (
        'latitude'=>  '39.01',
        'longitude'=> '-76.02'
        );

    wp_localize_script('lax_google_map_script', 'lax_map_params', $params);

à lax_google_map_init()

Et j'ajoute:

var latlng = new google.maps.LatLng( lax_map_params.latitude, csf_crime_map_params.longitude);

pour ma fonction javascript, la carte fonctionne. Comment remplacer "39 .01" par $atts[latitude] et -76.02 par $atts[longitude]? J'apprends encore à propos de la portée en php. Je vous remercie.

pluginsshortcode
1
Laxmidi

Vous devez avoir un js var markers_array = []; initial (peut-être global). Utilisez ensuite une fonction de rappel ajax pour insérer vos marqueurs dans ce tableau.

Enregistrez vos scripts

// Define
$root_url = plugin_dir_path(); // Example path
$ajax_nonce = 'your_nonce';
$ajax_nonce_val = 'your_val';

// Ajax
wp_register_script( 'json2', false, false, false, true );
wp_enqueue_script( 'json2' );

wp_enqueue_script( 
     'ajax-script'
    ,"{$root_url}js/ajax_json.js" // your ajax callback script that handles the request (inside a /js folder)
    ,array( 
        'json2'
     )
    ,false
    ,true 
);
wp_localize_script( 
     'ajax-script' 
    ,'ajax_object' // YOUR MAIN DATA OBJECT
    ,array( 
         'ajaxurl'          => admin_url( 'admin-ajax.php' )
        ,$ajax_nonce    => wp_create_nonce( $ajax_nonce_val ) 
    ) 
);

Les marqueurs initiaux

// inside some <script> part: You need the following php function to build your markers array:
// This js array will be used by your custom build markers js function to build the initial markers. It can also be used to update markers and overlays.
var mapsInitMarkers = <?php echo build_markers_array(); ?>;

// Markers builder callback function for init js-var
function build_markers_array()
{
    $output = '';
    $markers = array( /* DEFINE MARKERS HERE */ );
    foreach ( $markers as $marker )
    {
        // id, lat, lng, name
        $output .= "[
             {$marker['ID']}, 
             {$marker['lat']}, 
             {$marker['lng']}, 
            '{$marker['name']}', 
        ],";
    }
    $output = substr( $output, 0, -1 ); // get rid of last comma
    $output = "[{$output}]";

    return $output;
}

La fonction de rappel Ajax

function ajax_cb_fn() 
{

    check_ajax_referer( 'referer_name', $ajax_nonce ); // needed if performed some update via some ex. form

    $output = ''; // do stuff here - example, use build_markers_array(); with some input to update your markers

    $response = json_encode( array( 
         'data' => $output 
    ) );
    header( "Content-Type: application/json" );
    echo $response;

    exit();
}

La gestion des données dans ajax_json.js

Vous pouvez maintenant écrire une fonction document.ready() dans votre nouveau fichier de traitement ajax json. Vous pouvez y accéder via l’objet javascript ajax_object. Vous pouvez utiliser $.post() pour effectuer le traitement des données via des formulaires, ou bien. Vous pouvez également insérer vos marqueurs dans une fonction createMarkers js que vous pouvez également utiliser pour construire votre tableau initial (vous devez gérer la création du marqueur quelque part.

Pourquoi vous ne devriez pas ajouter ces données en tant qu'attributs d'élément de balisage

Marquez get rendu par le navigateur, les données simplement traitées. Imaginez à quoi ressemblera votre division si vous y déposez des centaines de données. En peu de temps, vous devrez abandonner la prise en charge des navigateurs de périphériques, des ordinateurs portables netbooks, des tablettes, etc.

3
kaiser

Vous pouvez utiliser wp_localize_script pour prendre vos variables PHP et les mettre en JavaScript.

2
Toby

Je le ferais de cette façon:

dans le code du plugin, ajoutez data-latitude attr à div # map_canvas:

$output .= '<div id="map_canvas" data-latitude="'.$atts['latitude'].'" style="width:'. $atts['width'] .'px; height: '. $atts['height'] .'px; border:1px solid black;"></div>';

et en javascript, permettre à JQuery de lire l'attribut data-latitude depuis div # map_canvas

var latlng = new google.maps.LatLng($('#map_canvas').attr('data-latitude'), -76.02);

Vous aurez probablement besoin d’extraits de code similaires pour la longitude.

utilisez des attributs préfixés par "data-" afin d'avoir une validation html5.

J'espère que ça aide

0
Maciej Kuś