web-dev-qa-db-fra.com

passer l'objet/JSON à wp_localize_script

J'ai un morceau de javascript fonctionnel qui contient un littéral d'objet. Mais je dois le localiser, et je vais essayer de comprendre comment le réécrire afin que je puisse obtenir wp_localize_script () pour y accéder et afficher 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 que ces valeurs soient générées par php (sur la base de wp_settings), je veux utiliser wp_localize_script, afin que je puisse le prendre à partir de là:

var layoyt_config = my_localized_data.layoyt_config;

Et pour obtenir ces données dans la propriété de cet 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 ceci entraînerait une erreur d'analyse de PHP, j'ai essayé de réécrire la syntaxe json en tableau, car wp_localize_script le reconvertira 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 se passe sans encombre grâce à l’analyseur php, je n’obtiens pas le résultat attendu dans le code source de ma page, car my_localized_data.layout_config devient un "tableau", voici le résultat:

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

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

lc_header = '1';
ls_ls_sb1 = '1';
etc...
theme-developmentjqueryjavascripttranslation
14
mikkelbreum

En effet, wp_localize_script() est simple , il ajoute simplement des guillemets autour des valeurs et échappe au contenu, en s’attendant à ce qu’ils soient tous des chaînes.

Cependant, il existe la clé l10n_print_after du tableau, qui sera imprimée sans aucune interférence. Il peut être utilisé pour exécuter du code arbitraire une fois les chaînes passées. 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 allez vous retrouver 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
14
Jan Fabry

Clause de non-responsabilité - Je suis hors de propos pour ce qui est de la sécurité de JS ici.

Tout d'abord, pour correspondre à la sortie souhaitée, vous êtes désactivé par niveau d'imbrication. Le nom de l'objet est utilisé comme paramètre dans l'appel localize (au lieu de la clé de 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 ls et rs sont toujours cassés car la méthode WP_Scripts->print_scripts_l10n() ne gère pas le cas où variable est un tableau.

Le mieux que je puisse trouver pour corriger cela est le filtre suivant (comme ci-dessus - je ne suis pas sûr de pouvoir 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;
}
1
Rarst