passer objet / JSON à wp_localize_script


15

J'ai un morceau de travail de javascript qui contient un objet littéral. Mais j'ai besoin de le localiser, et je cherche à réécrire pour que je puisse obtenir wp_localize_script () pour y accéder et produire le format correct.

La version non localisée (non dynamique) ressemble à ceci:

var layoyt_config = {
    'header'        : 1 
,   'footer'        : 1
,   'ls'            : {'sb1':1}
,   'rs'            : {'sb1':1,'sb2':1}
,   'align'         : 'center'
};  

Maintenant, pour avoir ces valeurs générées par php (basé sur certains wp_settings), je veux utiliser wp_localize_script, donc je peux le prendre à partir de là:

var layoyt_config = my_localized_data.layoyt_config;

Et pour obtenir ces données dans cette propriété d'objet, j'ai «pensé» que je pouvais le faire, mais évidemment pas:

$data = array(
    'layout_config' => {
        'header' : 1
    ,   'footer' : 1
    ,   'ls' : {'sb1': 1}
    ,    'rs' : {'sb1': 1,'sb2': 1}
    ,    'align' : 'center'
    }
);
wp_localize_script('my-script-handle', 'my_localized_data', $data);

Comme cela entraînera une erreur d'analyse PHP, j'ai essayé de réécrire la syntaxe json en tableau, car wp_localize_script le convertira en notation objet, mais cela ne fonctionne pas non plus pour moi:

$data = array(
    'layout_config' => array(
        'header' => 1
    ,   'footer' => 1
    ,   'ls' => array('sb1'=>1)
    ,    'rs' => array('sb1'=>1,'sb2'=>1)
    ,    'align' => 'center'
    )
);
wp_localize_script('my-script-handle', 'my_localized_data', $data);

Et bien que cela fonctionne sans problème à travers l'analyseur php, je n'obtiens pas la sortie attendue dans ma source de page, car my_localized_data.layout_config devient une chaîne "Array", voici la sortie:

<script type='text/javascript'>
    /* <![CDATA[ */
    var wpkit_localized_data = {
    layout_config: "Array"
    };
    /* ]]> */
</script>

Alors .. Comment puis-je faire cela (ou dois-je simplement accepter que je dois «aplatir» mon objet en vars discrets comme:

lc_header = '1';
ls_ls_sb1 = '1';
etc...

Réponses:


15

En effet, wp_localize_script()c'est simple , il ajoute simplement des guillemets autour des valeurs et échappe au contenu, s'attendant à ce que ce soient toutes des chaînes.

Cependant, il y a la l10n_print_afterclé du tableau, qui sera imprimée sans aucune interférence. Il peut être utilisé pour exécuter du code arbitraire après le passage des chaînes. Vous pouvez l'utiliser pour transmettre vos données supplémentaires.

$data = array(
    'layout_config' => {
      'ls' : {'sb1': 1}
    }
);
$reshuffled_data = array(
    'l10n_print_after' => 'my_localized_data = ' . json_encode( $data ) . ';'
);
wp_localize_script('my-script-handle', 'my_localized_data', $reshuffled_data);

Vous vous retrouverez avec un code comme celui-ci:

var my_localized_data = {}; // What is left of your array
my_localized_data = {'layout_config': {'ls': {'sb1': 1}}}; // From l10n_print_after

Très utile, bien que je pense que vous vouliez dire un point-virgule après json_encode, pas une virgule, ai-je raison?
kovshenin

1
@kovshenin: Bonne prise! Je l'ai corrigé, mais si vous l'auriez proposé comme édition, vous auriez obtenu +2 représentants pour cela.
Jan Fabry

Ne pas vouloir détourner cette question, mais cette question / réponse a été donnée comme référence pour rechercher wordpress.stackexchange.com/questions/53842 (au cas où quelqu'un aurait des pointeurs ici). Merci!
Zach

1

Clause de non-responsabilité - Je suis hors de ma profondeur sur les choses de sécurité JS ici.

Tout d'abord, pour correspondre à la sortie souhaitée, vous êtes désactivé par niveau d'imbrication. Le nom de l'objet va comme paramètre dans l'appel localize (au lieu de la clé du tableau):

$data = array(
        'header' => 1
    ,   'footer' => 1
    ,   'ls' => array('sb1'=>1)
    ,    'rs' => array('sb1'=>1,'sb2'=>1)
    ,    'align' => 'center'
);
wp_localize_script('my-script-handle', 'layout_config', $data);

Mais lset rssont toujours rompus car la WP_Scripts->print_scripts_l10n()méthode ne gère pas le cas lorsque la variable est un tableau.

Le mieux que je pourrais trouver pour corriger ce filtre suivant (comme ci-dessus - je ne sais pas comment il serait sûr de l'utiliser en production, mais pour donner une idée générale):

add_filter('js_escape','js_escape_nested', 10, 2);

function js_escape_nested($safe_text, $text) {

     if(is_array($text) )
         return str_replace( '"', "'", json_encode ($text) );

     return $safe_text;
}

Je comprends que le nom de l'objet principal entre en tant que paramètre 2dn dans l'appel à wp_localize_script, mais, je le fais déjà, mon nom d'objet localisé est censé être «my_localized_data», cet objet aura une variété de propriétés dont la plupart ont valeurs de chaîne simples, mais j'ai besoin que l'une de ces propriétés soit un objet multidimensionnel.
mikkelbreum

Cela semble être hors de portée de wp_localize_script sans modification. Il ne peut pas gérer les tableaux multidimensionnels. J'ai maintenant trouvé une méthode différente, où je stocke mon objet multidimensionnel localazed comme une valeur html data- *. Cela fonctionne bien, mais laissez des questions supplémentaires: wordpress.stackexchange.com/questions/8684
mikkelbreum
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.