web-dev-qa-db-fra.com

Localiser la variable pour plusieurs codes courts

J'ai ce code pour flexslider Shortcode

add_shortcode('flexslider', function($atts){
global $post;
$ids = explode(',', $atts[ids]);

$uniqid = uniqid();
wp_enqueue_script( 'shortcode_flexslider');
wp_localize_script( 'shortcode_flexslider', 'slider', array('id' => $uniqid)); 

foreach( $ids as $id ) {
    $imgLinks       = wp_get_attachment_image_src($id, large);
    $imgThumb       = wp_get_attachment_image_src($id, thumbnail);

    $slider     .= '<li><img src="'.$imgLinks[0].'">'.$imgCaptionContent.'</li>';
    $carousel   .= '<li><img src="'.$imgThumb[0].'"></li>'; 
}
$structure ='<div id="slider'.$uniqid.'" class="flexslider"><ul class="slides">'
            .$slider.
            '</ul></div>'.

            '<div id="carousel'.$uniqid.'" class="flexslider"><ul class="slides">'
            .$carousel.
            '</ul></div>';   
});

Je mets uniqidpour les identifiants de curseur et de carrousel afin de pouvoir placer plusieurs shortcode flexslider dans le même message et je localise le uniqiddans le fichier shortcode_flexslider JS pour trouver les identificateurs de curseur et de carrousel.

$('#carousel'+slider.id).flexslider({
  //
   asNavFor: '#slider'+slider.id
  //
});

$('#slider'+slider.id).flexslider({
 //
  sync: '#carousel'+slider.id
//
});

Le problème est que lorsque je mets plusieurs flexslider Shortcode dans le même poste, la variable localisée slider.id obtient le dernier shortcode flexslider uniqid, le dernier shortcode flexslider est donc celui qui fonctionne, comment je peux passer tous les flexslider Shortcode uniqidpas seulement le dernier ?

jqueryshortcodewp-localize-script
2
Mohamed Badawy

Votre problème est que wp_localize_script imprime dans le balisage HTML un objet javascript semblable à:

var slider = {"id":"a_unique_id_here"};

si vous l’appelez plusieurs fois, par exemple en utilisant plus de shortcodes dans la même page, whati est printend dans un balisage HTML

var slider = {"id":"a_unique_id_here"};
var slider = {"id":"another_unique_id_here"};
var slider = {"id":"third_unique_id_here"};

de sorte que vous écrasez encore et encore la même variable.

Vous avez besoin de ce genre de chose, vous devriez transformer la sortie en quelque chose comme ceci:

var slider_ddAsfe2ser = {"id":"a_unique_id_here"};
var slider_fsdgffereR = {"id":"another_unique_id_here"};
var slider_d4frfAd1ej = {"id":"third_unique_id_here"};

C'EST À DIRE. vous devez créer une variable nommée unique en tant qu'objet de configuration pour chaque shorcode.

Comment? Quelque chose comme:

add_shortcode('flexslider', function($atts) {
  global $post;
  $ids = explode(',', $atts[ids]);
  $uniqid = uniqid();
  wp_enqueue_script( 'shortcode_flexslider');
  $token = wp_generate_password(32, false, false);
  wp_localize_script( 'shortcode_flexslider', 'slider_' . $token, array('id' => $uniqid));
  foreach( $ids as $id ) {
    // ... your code here ...
  }
  $structure = '<div id="slider' . $uniqid. '" class="flexslider"';
  $structure .= ' data-token="' . $token . '">'; // the token as data attribute
  $structure .= '<ul class="slides">' . $slider . '</ul></div>';
  $structure .= '<div id="carousel' . $uniqid . '" class="flexslider">';
  $structure .= '<ul class="slides">' . $carousel . '</ul></div>'
});

Après cela dans votre js :

// cicle all the divs with 'flexslider' class and id that starts with 'slider'
$('div.flexslider[id^="slider"]').each( function() { 
  var $div = $(this); // the sdiv jquery object
  var token = $div.data('token');
  // use the bracket syntax to retrieve the unique named object
  // in the global (window) scope
  var settingObj = window['slider_' + token];
  $div.flexslider({
    //
    sync: '#carousel' + settingObj.id
    //
  });
  $carousel = $( '#carousel' + settingObj.id); // the carousel div jquery object
  $carousel.flexslider({
    //
    asNavFor: '#slider' + settingObj.id
    //
  });
}); // end each cycle
3
gmazzap

Bien...

wp_localize_script( 'shortcode_flexslider', 'slider', array('id' => $uniqid)); 
wp_localize_script( 'shortcode_flexslider', 'carousel', array('id' => $uniqid));

Ou...

wp_localize_script( 
  'shortcode_flexslider', 
  'slider', 
  array(
    'sliderid' => $uniqid,
    'carouselid' => $uniquid
  )
);

Vous devez juste éviter d’écraser la variable, c’est tout. Il existe probablement d'autres moyens de le faire, mais ces deux-là devraient vous aider à démarrer. Je préférerais le dernier.

1
s_ha_dum