jquery – ¿Creando múltiples wp_localize_script para Shortcode?

Pregunta:

Tengo un código corto que muestra los productos recientes de WooCommerce en un carrusel, sin embargo, me gustaría que el usuario final pudiera usar el código corto varias veces en la misma página, actualmente cuando esto sucede, el carrusel jQuery tiene conflictos.

Aquí está el código que estoy usando para el shortcode,

function recent_products_slider_func($atts) {
global $woocommerce_loop;
static $count = 0;
if (empty($atts)) return;

extract(shortcode_atts(array(
    'title'            => 'Recent Products',
    'order'         => 'DESC',
    'orderby'         => 'date',
    'mousewheel'     => 'false',
    'autoscroll'     => '1',
    'swipe'         => 'false',
    'scroll'         => '1',
    'items'         => 6
), $atts));

$args = array(
    'post_type'    => 'product',
    'post_status' => 'publish',
    'posts_per_page' => $items,
    'ignore_sticky_posts'    => 1,
    'orderby' => $orderby,
    'order' => $order,
    'meta_query' => array(
        array(
            'key'         => '_visibility',
            'value'     => array('catalog', 'visible'),
            'compare'     => 'IN'
        )
    )
);
wp_enqueue_script('owlcarouselcustom', get_template_directory_uri() . '/includes/pixelstores/shortcodes/js/' . 'owlcarousel.js');
wp_localize_script('owlcarouselcustom', 'carouselvars', array(
  'autoscroll' => $autoscroll
  )
);

ob_start();

$products = new WP_Query( $args );

if ( $products->have_posts() ) : ?>

    <div class="row ps-carousel">
        <div class="col-xs-10">        
            <h3><?php echo $title; ?></h3>
        </div>
        <div class="col-xs-2">
            <div class="ps-carousel-btns">        
                <a class="btn prev"><i class="fa fa-angle-left" /></a>
                <a class="btn next"><i class="fa fa-angle-right" /></a>
            </div>    
        </div>    
    </div>

    <div class="row">
        <div id="owl-example" class="owl-carousel">
            <?php while ( $products->have_posts() ) : $products->the_post(); ?>
                <?php if ( class_exists('woocommerce') ) {  woocommerce_get_template_part( 'content', 'product' ); } ?>
            <?php endwhile; ?>
        </div>
    </div>

<?php endif; 

wp_reset_query();       
$count++;                  

return ob_get_clean();
}                  
add_shortcode('recent_products_slider', 'recent_products_slider_func'); 

Para jQuery utilizo lo siguiente,

jQuery(document).ready(function($) {
var settingObj = carouselvars;
var owlcontainer = $("#owl-example");

if(settingObj.autoscroll == 1) {settingObj.autoscroll = true;} else {settingObj.autoscroll = false;}

$(owlcontainer).owlCarousel({
    autoPlay: settingObj.autoscroll,

    });
});

Sé por qué esto no funciona, pero no estoy seguro de cuál es la mejor solución, el identificador 'carouselvars' en wp_localize_script se llama sin un nombre único, por lo que la variable se llama dos veces.

Cualquier solución muy apreciada.

Saludos cordiales

Respuesta:

No soy un experto en jQuery, pero me encontré con el mismo problema y creo que tengo una solución viable. El problema es que cada vez que ejecuta wp_localize_script, crea una variable javascript usando la configuración $ name. En su caso, eso es 'carruselvars'. Como esto se establece antes de la ejecución de jQuery, jQuery solo 've' los últimos valores pasados ​​a la variable, por lo que nuevamente en su caso, settingObj.autoscroll siempre será el valor que se estableció en la última instancia del shortcode .

Mi solución es establecer un nombre de variable dinámica para la llamada wp_localize_script, algo como:

wp_localize_script('owlcarouselcustom', 'carouselvars' . $instance, array(
  'autoscroll' => $autoscroll
  )
);

donde $ instancia puede ser lo que el usuario quiera configurar. Entonces el uso sería:

[recent_products_slider instance=1 autoscroll=0]
[recent_products_slider instance=2 autoscroll=1]

y su código para extraer la configuración debería ser:

extract(shortcode_atts(array(
    'title'            => 'Recent Products',
    'order'         => 'DESC',
    'orderby'         => 'date',
    'mousewheel'     => 'false',
    'autoscroll'     => '1',
    'swipe'         => 'false',
    'scroll'         => '1',
    'items'         => 6,
    'instance'      => 1
), $atts));

Estoy seguro de que hay una forma más inteligente de hacer esto, por lo que no es necesario configurar una instancia, pero, como dije, no soy un experto en jQuery.

Entonces, el truco consiste en obtener los datos correctos para ingresar a la instancia correcta del código corto. Lo hice usando tipos de datos html5. Entonces, en la parte php de su código, creo que sería mejor hacer esto:

<div id="owl-' . $instance . '" class="owl-carousel" data-instance="' . $instance . '">

Entonces su jQuery se vería así:

jQuery(document).ready(function($) {
    $('.owl-carousel').each(function( index ) {
        var instance = $( this ).data('instance');
        SetOwlCarousel(instance);
    });
});

function SetOwlCarousel(instance) {
    var settingObj = window["carouselvars"+instance];
    var owlcontainer = $("#owl-" + instance);

    if(settingObj.autoscroll == 1) {settingObj.autoscroll = true;} else {settingObj.autoscroll = false;}

    jQuery(owlcontainer).owlCarousel({
        autoPlay: settingObj.autoscroll,

        });
    });
}

Entonces, este script jQuery recorrerá cada instancia de '.owl-carousel' y ejecutará la función SetOwlCarousel en él. Llamar al objeto de ventana cuando estableces settingObj te permite evaluar "carouselvars" + instancia a la variable que estableciste usando wp_localize_script, así que en mi ejemplo carouselvars1 y carouselvars2.

Si alguien tiene una forma más limpia de hacer esto, me encantaría usarla, pero esto debería darte lo que estás buscando. No he probado este código, pero es sustancialmente el mismo que usé yo mismo, que funcionó.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top

web tasarım