Desarrollé un complemento de wordpress que agrega un video en la galería de imágenes de un producto. El video se puede ver en el frontend de la página del producto.
Al hacer clic en esta miniatura, se puede ver el video.
En la página de edición del producto, tengo un meta cuadro a través del cual puedo seleccionar un video:
Mi complemento funciona bien en todos los temas, excepto en el tema Blocksy. No sé por qué está funcionando bien allí.
Este es el código que estoy usando:
<?php
function woocommerce_show_product_imagesx() {
defined( 'ABSPATH' ) || exit;
// Note: `wc_get_gallery_image_html` was added in WC 3.3.2 and did not exist prior. This check protects against theme overrides being used on older versions of WC.
if ( ! function_exists( 'wc_get_gallery_image_html' ) ) {
return;
}
global $product;
$columns = apply_filters( 'woocommerce_product_thumbnails_columns', 4 );
$post_thumbnail_id = $product->get_image_id();
$wrapper_classes = apply_filters(
'woocommerce_single_product_image_gallery_classes',
array(
'woocommerce-product-gallery',
'woocommerce-product-gallery--' . ( $post_thumbnail_id ? 'with-images' : 'without-images' ),
'woocommerce-product-gallery--columns-' . absint( $columns ),
'images',
)
);
?>
<div class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', $wrapper_classes ) ) ); ?>" data-columns="<?php echo esc_attr( $columns ); ?>" style="opacity: 0; transition: opacity .25s ease-in-out;">
<figure class="woocommerce-product-gallery__wrapper">
<?php
if ( $post_thumbnail_id ) {
$html = wc_get_gallery_image_html( $post_thumbnail_id, true );
} else {
$html="<div class="woocommerce-product-gallery__image--placeholder">";
$html .= sprintf( '<img src="%s" alt="%s" class="wp-post-image" />', esc_url( wc_placeholder_img_src( 'woocommerce_single' ) ), esc_html__( 'Awaiting product image', 'woocommerce' ) );
$html .= '</div>';
}
$video = get_post_meta( get_the_ID(), 'wc_product_video_url', true );
if ( !empty($video) ) {
// Sanitize video URL
$video = esc_url( $video );
if (str_contains($video, 'yout')) {
$vide = preg_replace(
"/s*[a-zA-Z//:.]*youtu(be.com/watch?v=|.be/)([a-zA-Z0-9-_]+)([a-zA-Z0-9/*-_?&;%=.]*)/i",
"<div class="responsive-video-wrap"><iframe style="width: 100%; height: 400px;" src="//www.youtube.com/embed/$2" allowfullscreen></iframe></div>",
$video
);
$vid = '
<style>
iframe {
max-width: unset;
}
#primary {
width: 100%;
}
#secondary {
width: 0;
padding: 0 !important;
}
.woocommerce-product-gallery__image img {
height: 400px !important;
}
</style>
<div data-thumb="'.plugin_dir_url(__DIR__).'mbk_wc_video/images/video-player-icon-free-vector.jpg" data-thumb-alt="" class="woocommerce-product-gallery__image" style="width: 100%; height: 400px; margin-right: 0px; float: left; display: block;"><a href="'.$video.'">
'.$vide.'
</a></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
setTimeout(() => {
document.querySelectorAll("ol li").forEach(li => {
li.onclick = function() {
$('iframe').attr('src', $('iframe').attr('src'));
}
})
}, 1000)
})
</script>
';
}
else if (str_contains($video, 'dailymotion') || str_contains($video, 'dai.ly')) {
$index = strripos($video, "https://stackoverflow.com/");
$length = strlen($video) - $index;
$link = substr($video, $index, $length);
$vid = '
<style>
iframe {
max-width: unset;
}
#primary {
width: 100%;
}
#secondary {
width: 0;
padding: 0 !important;
}
.woocommerce-product-gallery__image img {
height: 400px !important;
}
</style>
<div data-thumb="'.plugin_dir_url(__DIR__).'mbk_wc_video/images/video-player-icon-free-vector.jpg" data-thumb-alt="" class="woocommerce-product-gallery__image" style="height: 400px; width: 100%; margin-right: 0px; float: left; display: block;"><a href="'.$video.'">
<iframe id="player" frameborder="0" allowfullscreen="true" allow="autoplay" title="Dailymotion video player" width="100%" height="400px" src="https://www.dailymotion.com/embed/video/'.$link.'"></iframe>
</a></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
setTimeout(() => {
document.querySelectorAll("ol li").forEach(li => {
li.onclick = function() {
$('iframe').attr('src', $('iframe').attr('src'));
}
})
}, 1000)
})
</script>
';
}
else if (str_contains($video, 'vimeo')) {
$index = strripos($video, "https://stackoverflow.com/");
$length = strlen($video) - $index;
$link = substr($video, $index, $length);
$vid = '
<style>
iframe {
max-width: unset;
}
#primary {
width: 100%;
}
#secondary {
width: 0;
padding: 0 !important;
}
.woocommerce-product-gallery__image img {
height: 400px !important;
}
</style>
<div data-thumb="'.plugin_dir_url(__DIR__).'mbk_wc_video/images/video-player-icon-free-vector.jpg" data-thumb-alt="" class="woocommerce-product-gallery__image" style="height: 400px; width: 100%; margin-right: 0px; float: left; display: block;"><a href="'.$video.'">
<iframe src="https://player.vimeo.com/video'.$link.'" width="100%" height="400" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
</a></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
setTimeout(() => {
document.querySelectorAll("ol li").forEach(li => {
li.onclick = function() {
$('iframe').attr('src', $('iframe').attr('src'));
}
})
}, 1000)
})
</script>
';
}
else {
$vid = '
<style>
#primary {
width: 100%;
}
#secondary {
width: 0;
padding: 0 !important;
}
.woocommerce-product-gallery__image img {
height: 400px !important;
}
</style>
<div data-thumb="'.plugin_dir_url(__DIR__).'mbk_wc_video/images/video-player-icon-free-vector.jpg" data-thumb-alt="" class="woocommerce-product-gallery__image" style="height: 400px ; margin-right: 0px; float: left; display: block;"><a href="'.$video.'"><video width="100%" height="400" controls>
<source src="'.$video.'" type="video/mp4">
Your browser does not support the video tag.
</video></a></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
setTimeout(() => {
document.querySelectorAll("ol li").forEach(li => {
li.onclick = function() {
var video = document.querySelector("video");
video.pause();
}
})
}, 1000)
})
</script>
';
}
}
echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', $html, $post_thumbnail_id );
if (!empty($video) && get_option( 'mbk_wc_v_r', '2' )!=2) {
echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', $vid );
}
do_action( 'woocommerce_product_thumbnails' );
?>
</figure>
</div>
<?php
// wc_get_template( 'single-product/product-image.php' );
}
?>
.