检查当前的 WooCommerce 产品是否有一个图库到 运行 一个 jQuery 脚本

Question

出于某种原因，除非我检查并 运行 调试，否则我使用的代码似乎无法加载。也许其他人可以查看并确定？

虽然第一次检查确保它是产品页面，但我想进行二次检查以确保产品有图库，如果没有 - return。

这是代码：

add_action( 'wp_footer', 'image_swap_on_hover' );
function image_swap_on_hover() {

    if ( ! is_product() ) return;
    // if (???) // check if product has image gallery

    ?>

        <script>

            jQuery( document ).ready( function($) {

                $( window ).load( function() {
        
                    $( '.flexslider' ).flexslider( {
            
                    animation: "slide",
                    controlNav: "thumbnails",
                    start: function() {
                }
            }
        );

        $( ".flex-control-thumbs li img" ).hover( function() {

            $(this).click();
        
            }
        );
            }
        );
            }
        );

    </script>

<?php
}

Answer 1

对于您的加载问题，不要使用 jQuery ready 事件，因为它发生在 load 事件之后，所以 load 事件永远不会在您的代码中触发。

您可以使用WC_Product方法get_gallery_image_ids()如下：

add_action( 'wp_footer', 'image_swap_on_hover' );
function image_swap_on_hover() {
    if ( ! is_product() ) 
        return;

    global $product;

    if ( ! is_a( $product, 'WC_Product' ) ) {
        $product = wc_get_product( get_the_id() );
    }

    // Get product gallery image ids
    $gallery_image_ids = $product->get_gallery_image_ids();
    
    // Check if product gallery image ids is not empty
    if ( ! empty($gallery_image_ids) ) :
    ?>
    <script>
    jQuery( function($) {
        $( window ).load( function() {
            console.log( 'window LOAD event' ); // Only for testing (to be removed)

            $( '.flexslider' ).flexslider( {
                animation: "slide",
                controlNav: "thumbnails",
                start: function() {
                    // do something
                }
            });
    
            $( ".flex-control-thumbs li img" ).hover( function() {
                $(this).click();
            });
        });
    });
    </script>
    <?php
    endif;
}