私は最近の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回呼び出されています。
どんな解決策でも大歓迎です。
敬具
私は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です。
誰かがこれを実行するためのよりクリーンな方法を持っているなら、私はそれを使用したいと思いますが、これはあなたが探しているものをあなたに得るはずです。私はこのコードをテストしていませんが、それは私が自分で使ったものとほぼ同じです。
他のすべてのものを提供することはうまくいきます - スライダーをターゲットにするためにIDを使うためには、それはユニークでなければなりません。そのため、すべてのスライダーコンテナに#owl-example
というIDを付けることはできません - #owl-example-1
、#owl-example-2
などである必要があります。
これを完全に回避するには、代わりに.owl-carousel
クラスを使用してみてください。