是否为短码创建多个wp_LOCALIZE_SCRIPT？

时间：2014-02-24 作者：Shoebox

我有一个在旋转木马中显示最新WooCommerce产品的短代码，但是我希望最终用户能够在同一页面上多次使用该短代码，目前这种情况发生时，jQuery旋转木马存在冲突。

这是我用于短代码的代码，

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\');

对于jQuery，我使用以下命令：，

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,

    });
});

我知道为什么这样做不起作用，但不确定什么是最好的解决方案，wp\\u localize\\u脚本中的“carouselvars”句柄在没有唯一名称的情况下被调用，因此变量被调用了两次。

非常感谢任何解决方案。

亲切的问候

2 个回复

最合适的回答,由SO网友:MatthewLee 整理而成

我不是jQuery专家，但我遇到了同样的问题，我相信我有一个可行的解决方案。问题是，每次运行wp\\u localize\\u脚本时，它都会使用$name设置创建一个javascript变量。在你的情况下，这就是“旋转木马”。由于这是在jQuery运行之前设置的，因此jQuery只能“看到”传递给变量的最后一个值，所以在您的示例中，再次设置Obj。autoscroll将始终是在最后一个短代码实例中设置的值。

我的解决方案是为wp\\u localize\\u脚本调用设置一个动态变量名，类似于：

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

其中$instance可以是用户想要设置的任何值。因此，用法是：

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

提取设置的代码需要是：

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

我相信有一种更聪明的方法可以做到这一点，所以不需要设置任何实例，但正如我所说，我不是jQuery方面的专家。

然后，诀窍是获得正确的数据，以便将其拉入到正确的短代码实例中。我是用html5数据类型做的。因此，在代码的php部分，我认为最好这样做：

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

那么jQuery将如下所示：

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,

        });
    });
}

因此，这个jQuery脚本将在“”的每个实例上循环。owl carousel\'并在其上运行SetOwlCarousel函数。设置settingObj时调用window对象允许您使用wp\\u localize\\u脚本将“carouselvars”+实例计算为您设置的变量，因此在我的示例中是carouselvars1和carouselvars2。

如果有人有一个更干净的方法来做这件事，我很乐意使用它，但这应该会让你得到你想要的。我没有测试过这段代码，但它与我自己使用的代码基本相同。

SO网友:Steven Jones

如果其他一切都正常工作，则为了使用ID来定位滑块，它必须是唯一的。因此，所有滑块容器的ID都不能为#owl-example - 它必须是#owl-example-1, #owl-example-2 等

要完全避免这种情况，您可能需要尝试使用.owl-carousel 而不是类。

结束

小码农CODE

是否为短码创建多个wp_LOCALIZE_SCRIPT？

相关推荐

Gist shortcode is not working