在 Woocommerce 中更改移动设备上的 FlexSlider 选项

默认情况下，在单个产品页面上启用选项“controlNav”=“缩略图”。桌面版没问题。但在移动设备上我希望“controlNav”= true（点）。我尝试使用 ajax 来完成此操作，但我认为我需要以某种方式使用 Flex 幻灯片刷新该片段以应用过滤器。我无法得到它。

在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中：

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过滤器钩子和使用 WordPresswp_is_mobile()条件标签：

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 文件中。经过测试并有效。

请参阅 WooCommerce相关默认设置woocommerce_single_product_carousel_options hook https://github.com/woocommerce/woocommerce/blob/4.2.2/includes/class-wc-frontend-scripts.php#L484-L497:

'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()条件函数 https://developer.wordpress.org/reference/functions/wp_is_mobile/