在Woocommerce中更改移动设备上的FlexSlider选项 [英] Change FlexSlider options on mobile in Woocommerce
问题描述
默认情况下,在单个产品页面上启用了选项'controlNav'='thumbnails'.可以在台式机上使用.但是在移动设备上,我想成为"controlNav" = true(点).我试图用ajax做到这一点,但我想我需要以某种方式用flex幻灯片刷新该片段以应用过滤器.我不明白.
By default on single product page enabled option 'controlNav' = 'thumbnails'. It's ok for desktop. But on mobile i want to be 'controlNav' = true (dots). I tried to do it with ajax, but I think I need somehow refresh that fragment with flex slides to apply filter. I cant get it.
在JS文件中:
if (window.matchMedia('(max-width: 800px)').matches) {
$.ajax({
url: wc_add_to_cart_params.ajax_url,
data: { action: 'mobile_slider'},
type: 'POST'
})
.then(res => console.log('works', res))
}
在functions.php中:
in functions.php:
function hellenik_change_slider_mobile()
{
add_filter('woocommerce_single_product_carousel_options', 'hellenik_update_woo_flexslider_options');
function hellenik_update_woo_flexslider_options($options)
{
$options['smoothHeight'] = true;
$options['controlNav'] = true;
$options['animation'] = "slide";
$options['slideshow'] = false;
return $options;
}
wp_die();
}
add_action('wp_ajax_mobile_slider', 'hellenik_change_slider_mobile');
add_action('wp_ajax_nopriv_mobile_slider', 'hellenik_change_slider_mobile');
推荐答案
以下使用WooCommerce专用woocommerce_single_product_carousel_options
筛选器挂钩并使用WordPress wp_is_mobile()
条件标记的>
The following that uses WooCommerce dedicated woocommerce_single_product_carousel_options
filter hook and using WordPress wp_is_mobile()
conditional tag:
add_filter( 'woocommerce_single_product_carousel_options', 'filter_single_product_carousel_options' );
function filter_single_product_carousel_options( $options ) {
if ( wp_is_mobile() ) {
$options['smoothHeight'] = true; // Already "true" by default
$options['controlNav'] = true; // Option 'thumbnails' by default
$options['animation'] = "slide"; // Already "slide" by default
$options['slideshow'] = false; // Already "false" by default
}
return $options;
}
代码进入您的活动子主题(或活动主题)的functions.php文件中.经过测试,可以正常工作.
Code goes in functions.php file of your active child theme (or active theme). Tested and works.
请参见WooCommerce woocommerce_single_product_carousel_options
挂钩的相关默认设置:
See WooCommerce related default settings for woocommerce_single_product_carousel_options
hook:
'flexslider' => apply_filters( 'woocommerce_single_product_carousel_options',
array(
'rtl' => is_rtl(),
'animation' => 'slide',
'smoothHeight' => true,
'directionNav' => false,
'controlNav' => 'thumbnails',
'slideshow' => false,
'animationSpeed' => 500,
'animationLoop' => false, // Breaks photoswipe pagination if true.
'allowOneSlide' => false,
)
),
文档: WordPress开发人员资源-wp_is_mobile()
条件函数
Documentation: WordPress Developer Resources - wp_is_mobile()
conditional function
这篇关于在Woocommerce中更改移动设备上的FlexSlider选项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!