Woocommerce 产品视频内容

Question

我正在尝试显示产品的视频内容。不想禁用产品缩略图，而是在产品库中有可用的视频内容时显示视频内容。视频内容将上传到媒体库和 Youtube。我尝试了几种方法，但都没有奏效。

1. 使用 ACF： 我创建了一个自定义字段 product_video，字段类型为 oembed。我使用下面的代码。没有错误消息，但视频不显示或显示。

add_action( 'woocommerce_before_shop_loop_item_title', 'action_template_loop_product_thumbnail', 9 );
function action_template_loop_product_thumbnail() {
    global $product;

    $file = get_field('product_video', $product->get_id());
    // $file2 = get_field('product_video_text', $product->get_id());

    if( isset($file['url']) && ! empty($file['url']) ) {
        remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );

        echo '<video width="200" muted loop autoplay src="' . $file['url'] . '"></video>';
        // echo $file2 ;
    }
}

为什么不显示？

2)Use product video plugin. 它可以在前端工作，但文件afpv_front.js 中有错误Uncaught TypeError: jQuery(...).slick is not a function。我将slick.js 排入队列，认为它会纠正问题，但事实并非如此。它带来了更多的错误。

    
 function enqueue_slick() {
        if(is_shop() || is_product() || is_product_category() ) {  
        wp_enqueue_script( 'slick-css', get_stylesheet_directory_uri() . '/assets/js/slick/slick.css'); //do not mind the relevancy of the folder name, just a quick fix for now
        wp_enqueue_script( 'slick-theme-css', get_stylesheet_directory_uri() . '/assets/js/slick/slick-theme.css');
        wp_enqueue_script( 'slick-min-css', get_stylesheet_directory_uri() . '/assets/js/slick/slick.min.js');
        }
 }
        add_action( 'wp_enqueue_scripts', 'enqueue_slick' );
 

它会产生如下错误： Uncaught SyntaxError: expected expression, got '.' 来自 slick.css
Uncaught SyntaxError: illegal character U+0040 来自 slick-theme.css:1
Error: Promised response from onMessage listener went out of scope

为产品添加视频内容的正确方法是什么？

Answer 1

对于 ACF 的第一个选项 - 您是否尝试获取 $file 变量中的内容？如果您没有收到错误，则可能是密钥错误（例如，不是“url”）或“product_video”字段为空。 作为快速测试，您可以在 'if' 语句之前使用 print_r( $file ) 进行测试。

对于第二个选项 - 我可以建议您将脚本设置为依赖于 jquery，例如：

wp_enqueue_script( 'slick-min-css', get_stylesheet_directory_uri() . '/assets/js/slick/slick.min.js', array('jquery') );

同时，样式连接应该使用wp_enqueue_style，而不是wp_enqueue_script。