File: //home/karalev/www/wp-content/plugins/woolentor-addons/includes/addons/wl_product_video_gallery.php
<?php
namespace Elementor;
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
class Woolentor_Wl_Product_Video_Gallery_Widget extends Widget_Base {
public function get_name() {
return 'wl-product-video-gallery';
}
public function get_title() {
return __( 'WL: Product Video Gallery', 'woolentor' );
}
public function get_icon() {
return 'eicon-video-camera';
}
public function get_categories() {
return array( 'woolentor-addons' );
}
public function get_help_url() {
return 'https://woolentor.com/documentation/';
}
public function get_style_depends(){
return [
'woolentor-widgets',
];
}
public function get_script_depends() {
return [
'woolentor-widgets-scripts',
];
}
public function get_keywords(){
return ['video','gallery','product video gallery'];
}
protected function register_controls() {
$this->start_controls_section(
'product_thumbnails_content',
array(
'label' => __( 'Video Thumbnails', 'woolentor' ),
'tab' => Controls_Manager::TAB_CONTENT,
)
);
$this->add_control(
'tab_thumbnails_position',
[
'label' => __( 'Thumbnails Position', 'woolentor' ),
'type' => Controls_Manager::CHOOSE,
'options' => [
'left' => [
'title' => __( 'Left', 'woolentor' ),
'icon' => 'eicon-h-align-left',
],
'right' => [
'title' => __( 'Right', 'woolentor' ),
'icon' => 'eicon-h-align-right',
],
'top' => [
'title' => __( 'Top', 'woolentor' ),
'icon' => 'eicon-v-align-top',
],
'bottom' => [
'title' => __( 'Bottom', 'woolentor' ),
'icon' => 'eicon-v-align-bottom',
],
],
'default' => 'bottom',
'toggle' => false,
'label_block' => true,
]
);
$this->end_controls_section();
// Product Main Image Style
$this->start_controls_section(
'product_image_style_section',
[
'label' => __( 'Main Video Area', 'woolentor' ),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->add_control(
'main_video_height',
[
'label' => __( 'Height', 'woolentor' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px', '%' ],
'range' => [
'px' => [
'min' => 0,
'max' => 1000,
'step' => 1,
],
'%' => [
'min' => 0,
'max' => 100,
],
],
'default' => [
'unit' => 'px',
'size' => 550,
],
'selectors' => [
'{{WRAPPER}} .embed-responsive' => 'height: {{SIZE}}{{UNIT}};overflow:hidden;',
'{{WRAPPER}} .embed-responsive iframe' => 'height: {{SIZE}}{{UNIT}};',
],
]
);
$this->add_group_control(
Group_Control_Border::get_type(),
[
'name' => 'product_image_border',
'label' => __( 'Product image border', 'woolentor' ),
'selector' => '{{WRAPPER}} .woolentor-product-gallery-video',
]
);
$this->add_responsive_control(
'product_image_border_radius',
[
'label' => __( 'Border Radius', 'woolentor' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%' ],
'selectors' => [
'{{WRAPPER}} .woolentor-product-gallery-video img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}',
'{{WRAPPER}} .woolentor-product-gallery-video' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}',
'{{WRAPPER}} .embed-responsive' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}',
],
]
);
$this->add_responsive_control(
'product_margin',
[
'label' => __( 'Margin', 'woolentor' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', 'em', '%' ],
'selectors' => [
'{{WRAPPER}} .woolentor-product-gallery-video' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}',
],
]
);
$this->end_controls_section();
// Product Thumbnails Image Style
$this->start_controls_section(
'product_image_thumbnails_style_section',
[
'label' => __( 'Thumbnails', 'woolentor' ),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->add_group_control(
Group_Control_Border::get_type(),
[
'name' => 'product_thumbnais_image_border',
'label' => __( 'Product image border', 'woolentor' ),
'selector' => '{{WRAPPER}} .woolentor-product-video-tabs li a',
]
);
$this->add_responsive_control(
'product_thumbnais_image_border_radius',
[
'label' => __( 'Border Radius', 'woolentor' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%' ],
'selectors' => [
'{{WRAPPER}} .woolentor-product-video-tabs li a img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}',
'{{WRAPPER}} .woolentor-product-video-tabs li a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}',
],
]
);
$this->add_responsive_control(
'product_product_thumbnais_padding',
[
'label' => __( 'Padding', 'woolentor' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', 'em', '%' ],
'selectors' => [
'{{WRAPPER}} .woolentor-product-video-tabs li' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}',
],
]
);
$this->end_controls_section();
}
protected function render() {
$settings = $this->get_settings_for_display();
$this->add_render_attribute( 'wl_product_thumbnails_attr', 'class', 'wlpro-product-videothumbnails thumbnails-tab-position-'.$settings['tab_thumbnails_position'] );
global $post;
if( woolentor_is_preview_mode() ){
$product = wc_get_product( woolentor_get_last_product_id() );
} else{
global $product;
}
if ( empty( $product ) ) { return; }
if ( $product && !is_a( $product, 'WC_Product' ) ) {
$product = wc_get_product( $post->ID );
}
$gallery_images_ids = $product->get_gallery_image_ids() ? $product->get_gallery_image_ids() : array();
if ( $product->get_image_id() ){
array_unshift( $gallery_images_ids, $product->get_image_id() );
}
?>
<div <?php echo $this->get_render_attribute_string( 'wl_product_thumbnails_attr' ); ?>>
<div class="wl-thumbnails-image-area">
<?php if( $settings['tab_thumbnails_position'] == 'left' || $settings['tab_thumbnails_position'] == 'top' ): ?>
<ul class="woolentor-product-video-tabs">
<?php
$j=0;
foreach ( $gallery_images_ids as $thkey => $gallery_attachment_id ) {
$j++;
if( $j == 1 ){ $tabactive = 'htactive'; }else{ $tabactive = ''; }
$video_url = get_post_meta( $gallery_attachment_id, 'woolentor_video_url', true );
?>
<li class="<?php if( !empty( $video_url ) ){ echo 'wlvideothumb'; }?>">
<a class="<?php echo esc_attr($tabactive); ?>" href="#wlvideo-<?php echo esc_attr($j); ?>">
<?php
if( !empty( $video_url ) ){
echo '<span class="wlvideo-button"><i class="sli sli-control-play"></i></span>';
echo wp_get_attachment_image( $gallery_attachment_id, 'woocommerce_gallery_thumbnail' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
}else{
echo wp_get_attachment_image( $gallery_attachment_id, 'woocommerce_gallery_thumbnail' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
}
?>
</a>
</li>
<?php
}
?>
</ul>
<?php endif; ?>
<div class="woolentor-product-gallery-video">
<?php
if( woolentor_is_preview_mode() ){
if ( $product->is_on_sale() ) {
echo apply_filters( 'woocommerce_sale_flash', '<span class="onsale">' . esc_html__( 'Sale!', 'woolentor-pro' ) . '</span>', $post, $product ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
}
}else{
woolentor_show_product_sale_flash();
}
if(function_exists('woolentor_custom_product_badge')){
woolentor_custom_product_badge();
}
do_action('woolentor_product_thumbnail_image');
$i = 0;
foreach ( $gallery_images_ids as $thkey => $gallery_attachment_id ) {
$i++;
if( $i == 1 ){ $tabactive = 'htactive'; }else{ $tabactive = ''; }
$video_url = get_post_meta( $gallery_attachment_id, 'woolentor_video_url', true );
?>
<div class="video-cus-tab-pane <?php echo esc_attr($tabactive); ?>" id="wlvideo-<?php echo esc_attr($i); ?>">
<?php
if( !empty( $video_url ) ){
?>
<div class="embed-responsive embed-responsive-16by9">
<?php echo wp_oembed_get( $video_url ); ?>
</div>
<?php
}else{
echo wp_get_attachment_image( $gallery_attachment_id, 'woocommerce_single' );
}
?>
</div>
<?php
}
?>
</div>
<?php if( $settings['tab_thumbnails_position'] == 'right' || $settings['tab_thumbnails_position'] == 'bottom' ): ?>
<ul class="woolentor-product-video-tabs">
<?php
$j=0;
foreach ( $gallery_images_ids as $thkey => $gallery_attachment_id ) {
$j++;
if( $j == 1 ){ $tabactive = 'htactive'; }else{ $tabactive = ''; }
$video_url = get_post_meta( $gallery_attachment_id, 'woolentor_video_url', true );
?>
<li class="<?php if( !empty( $video_url ) ){ echo 'wlvideothumb'; }?>">
<a class="<?php echo esc_attr($tabactive); ?>" href="#wlvideo-<?php echo esc_attr($j); ?>">
<?php
if( !empty( $video_url ) ){
echo '<span class="wlvideo-button"><i class="sli sli-control-play"></i></span>';
echo wp_get_attachment_image( $gallery_attachment_id, 'woocommerce_gallery_thumbnail' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
}else{
echo wp_get_attachment_image( $gallery_attachment_id, 'woocommerce_gallery_thumbnail' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
}
?>
</a>
</li>
<?php
}
?>
</ul>
<?php endif; ?>
</div>
</div>
<script>
;jQuery(document).ready(function($) {
'use strict';
var $default_data = {
src:'',
srcfull:'',
srcset:'',
sizes:'',
width:'',
height:'',
};
$( '.single_variation_wrap' ).on( 'show_variation', function ( event, variation ) {
// Active First Tab
$( '#wlvideo-1' ).addClass('htactive').siblings().removeClass('htactive');
$('.woolentor-product-video-tabs li a[href="#wlvideo-1"]').addClass('htactive').parent().siblings().children('a').removeClass('htactive');
var currentImage = $('.woolentor-product-gallery-video').find('.video-cus-tab-pane.htactive img'),
currentTab = $('.woolentor-product-gallery-video').find('.video-cus-tab-pane.htactive');
// Get First image data
if( $default_data?.src?.length === 0 ){
$default_data.srcfull = currentImage.attr('src');
$default_data.src = currentImage.attr('src');
$default_data.srcset = currentImage.attr('srcset');
}
if( currentImage.length === 0 ){
currentTab.find('.embed-responsive').css({"display":"none"});
currentTab.prepend('<img class="attachment-woocommerce_single size-woocommerce_single" src="'+variation.image.full_src+'" />');
}
if( currentTab.children('.embed-responsive').length > 0 ){
currentTab.children('.embed-responsive').css({"display":"none"});
currentTab.children('img').css({"display":"block"});
}
currentImage.wc_set_variation_attr('src',variation.image.full_src);
currentImage.wc_set_variation_attr('srcset',variation.image.srcset);
currentImage.wc_set_variation_attr('src',variation.image.src);
$('.variations').find('.reset_variations').on('click', function(e){
if( currentTab.children('.embed-responsive').length > 0 ){
currentTab.children('.embed-responsive').css({"display":"block"});
currentTab.children('img').css({"display":"none"});
}
currentImage.wc_set_variation_attr('src', $default_data.srcfull );
currentImage.wc_set_variation_attr('srcset', $default_data.srcset );
});
});
});
</script>
<?php
}
}