web-dev-qa-db-ja.com

ショートコード用に複数のwp_localize_scriptを作成しますか？

私は最近の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_localize_scriptの 'carouselvars'ハンドルが一意の名前なしで呼び出されているため、変数が2回呼び出されています。

どんな解決策でも大歓迎です。

敬具

jqueryshortcodewoocommercewp-localize-script
6
Shoebox

私はjQueryの専門家ではありませんが、私は同じ問題に遭遇し、私は実行可能な解決策を持っていると思います。問題は、wp_localize_scriptを実行するたびに、$ name設定を使用してjavascript変数を作成することです。あなたの場合、それは「カルーセルバー」です。これは実行中のjQueryの前に設定されるので、変数に渡された最後の値だけがjQueryによって「見られる」ので、あなたの場合も、settingObj.autoscrollは常にショートコードの最後のインスタンスで設定された値になります。 。

私の解決策は、wp_localize_script呼び出しに動的変数名を設定することです。

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を設定するときにウィンドウオブジェクトを呼び出すと、wp_localize_scriptを使用して設定した変数に "carouselvars" +インスタンスを評価できます。この例では、carouselvars1とcarouselvars2です。

誰かがこれを実行するためのよりクリーンな方法を持っているなら、私はそれを使用したいと思いますが、これはあなたが探しているものをあなたに得るはずです。私はこのコードをテストしていませんが、それは私が自分で使ったものとほぼ同じです。

4
MatthewLee

他のすべてのものを提供することはうまくいきます - スライダーをターゲットにするためにIDを使うためには、それはユニークでなければなりません。そのため、すべてのスライダーコンテナに#owl-exampleというIDを付けることはできません - #owl-example-1、#owl-example-2などである必要があります。

これを完全に回避するには、代わりに.owl-carouselクラスを使用してみてください。

0
Steven Jones