Elementor: product-tab-carousel.php

<?php
namespace PixelPlus\Elementor\Widget;

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly.
}

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Repeater;

class Product_Tab_Carousel extends Widget_Base {

    public function get_name() {
        return 'pixelplus-product-tab-carousel';
    }

    public function get_title() {
        return __( 'Product Tab Carousel', 'pixelplus' );
    }

    public function get_icon() {
        return 'eicon-slider-push';
    }

    public function get_keywords() {
        return [ 'carousel', 'slider', 'product', 'product-tab' ];
    }

    public function get_categories() {
        return [ 'pixelplus' ];
    }

    public function get_script_depends() {
        return [ 'imagesloaded', 'pixelplus-elementor' ];
    }

    protected function _register_controls() {
        $this->start_controls_section(
            'section_items',
            [
                'label' => __( 'Items', 'pixelplus' ),
            ]
        );

        $repeater = new Repeater();

        $categories = get_terms( 'product_cat' );

        $options = [];
        foreach ( $categories as $category ) {
            $options[ $category->term_id ] = $category->name;
        }

        $repeater->add_control(
            'term',
            [
                'label' => __( 'Categories', 'elementor-pro' ),
                'type' => Controls_Manager::SELECT2,
                'options' => $options,
                'default' => [],
                'label_block' => true,
            ]
        );

        $this->add_control(
            'terms',
            [
                'label' => '',
                'type' => Controls_Manager::REPEATER,
                'fields' => $repeater->get_controls(),
            ]
        );

        $this->add_control(
            'number',
            [
                'label' => __( 'Posts Per Page', 'elementor-pro' ),
                'type' => Controls_Manager::NUMBER,
                'default' => 5,
            ]
        );

        $this->add_responsive_control(
            'slides_per_view',
            [
                'label' => __( 'Slides Per View', 'elementor-pro' ),
                'type' => Controls_Manager::NUMBER,
                'default' => 4,
            ]
        );

        $this->end_controls_section();

    }

    protected function render() {
        if ( ! class_exists( 'WooCommerce' ) ) {
            return;
        }

        $settings = $this->get_settings_for_display();

        $options = [
            'slides_per_view'        => $settings['slides_per_view'],
            'slides_per_view_tablet' => $settings['slides_per_view_tablet'],
            'slides_per_view_mobile' => $settings['slides_per_view_mobile'],
        ];

        $this->add_render_attribute( [
            'container' => [
                'class' => 'pixelplus-product-tab-carousel-container',
                'dir' => 'ltr',
                'data-settings' => wp_json_encode( $options ),
            ],
            'wrapper' => [
                'class' => 'pixelplus-product-tab-carousel-wrapper swiper-wrapper',
            ],
        ] );

        $product_args = array(
            'post_type'           => 'product',
            'posts_per_page'      => $settings['number'],
            'ignore_sticky_posts' => 1,
        );

        if ( $settings['terms'] ) {
            $product_args['tax_query'][] = array(
                'taxonomy' => 'product_cat',
                'terms'    => absint( $settings['terms'][0]['term'] ),
            );
        }

        $products = new \WP_Query( $product_args );
        ?>
        <?php if ( $products->have_posts() ) : ?>
        <div <?php echo $this->get_render_attribute_string( 'container' ); ?>>
            <?php if ( $settings['terms'] ) : ?>
            <div class="pixelplus-product-tab-carousel-navs">
            <?php $id = 0; foreach ( $settings['terms'] as $term ) : $i++; ?>
                <div<?php echo ( $i == 1 ) ? ' class="active"' : ''; ?> data-id="<?php echo absint( $term['term'] ); ?>"><?php echo esc_html( get_term_name( $term['term'], 'product_cat' ) ); ?></div>
            <?php endforeach; ?>
            </div>
            <?php endif; ?>
            <div class="swiper-container">
                <div <?php echo $this->get_render_attribute_string( 'wrapper' ); ?>>
                    <?php while ( $products->have_posts() ) : $products->the_post(); ?>
                    <div class="product-item-slide swiper-slide">
                        <?php wc_get_template_part( 'content', 'product' ); ?>
                    </div>
                    <?php endwhile; ?>
                    <?php wp_reset_postdata(); ?>
                </div>
            </div>
            <?php if ( 4 < $products->post_count ) : ?>
            <div class="pixelplus-product-tab-carousel-prev"><i class="icofont-simple-left"></i></div>
            <div class="pixelplus-product-tab-carousel-next"><i class="icofont-simple-right"></i></div>
            <?php endif; ?>
        </div>
        <?php endif; ?>
        <?php
    }
}

/* content-product */
<?php
$id = get_the_ID();

$regular_price = get_post_meta( $id, '_regular_price', true );
$sale_price    = get_post_meta( $id, '_sale_price', true );

$percent = '';
if ( $regular_price && $sale_price && $regular_price > $sale_price ) {
	$percent = ceil( ( ($regular_price - $sale_price) / $regular_price ) * 100 ) . '%';
}

if ( $regular_price ) {
	$regular_price = number_format_i18n( $regular_price );
}
if ( $sale_price ) {
	$sale_price = number_format_i18n( $sale_price );
}

$text_field_1 = get_post_meta( $id, '_text_field_1', true );
?>

<div class="product-item">
	<div class="product-item__thumb">
		<?php the_post_thumbnail( 'medium' ); ?>
		<div class="product-item__meta">
			<!-- <span class="product-item__meta--new">Hot</span> -->
			<?php if ( $percent ) : ?>
			<span class="product-item__meta--percent"><?php echo esc_html( $percent ); ?></span>
			<?php endif; ?>
		</div>
		<div class="product-item__info">
			<div class="product-item__info--action">
				<a href="?add-to-cart=<?php echo $id; ?>" data-quantity="1" class="product-item__buynow add_to_cart_button ajax_add_to_cart" data-product_id="<?php echo $id; ?>" data-product_sku="" title="Thêm “<?php the_title(); ?>” vào giỏ hàng" rel="nofollow"><i class="icofont-bag"></i> Thêm vào giỏ</a>
				<div class="product-item__quick-view" data-id="<?php the_ID(); ?>"><i class="icofont-search"></i></div>
				<a href="<?php the_permalink(); ?>" class="product-item__view-detail" data-id="<?php the_ID(); ?>"><i class="icofont-eye"></i></a>
			</div>
		</div>
	</div>
	<div class="product-item__desc">
		<?php the_title( '<div class="product-item__title"><a href="' . get_permalink() . '">', '</a></div>' ); ?>
		<?php if ( $regular_price || $sale_price ) : ?>
		<div class="product-item__price">
			<?php if ( $sale_price ) : ?>
			<div class="product-item__price--sale">
				<?php echo esc_html( $sale_price ) . 'đ'; ?>
			</div>
			<?php endif; ?>
			<?php if ( $sale_price ) : ?>
			<div class="product-item__price--regular">
				<?php echo esc_html( $regular_price ) . 'đ'; ?>
			</div>
			<?php endif; ?>
		</div>
		<?php endif; ?>
		<div class="product-item__ratings">
			<i class="icofont-star"></i>
			<i class="icofont-star"></i>
			<i class="icofont-star"></i>
			<i class="icofont-star"></i>
			<i class="icofont-star"></i>
		</div>
	</div>
</div>

<?php
/**
 * Ajax Product Tab Carousel.
 *
 * @return void
 */
function pixelplus_product_tab_carousel_navs() {
    // Validate nonce token.
    check_ajax_referer( 'pixelplus_nonce', 'security' );

    ob_start();

    $data = $_POST['data'];
    $id   = $data['id'];

    if ( $id && ! is_wp_error( get_term( $id, 'product_cat' ) ) ) :
        $product_args = array(
            'post_type'           => 'product',
            'posts_per_page'      => 4,
            'ignore_sticky_posts' => 1,
        );

        $product_args['tax_query'][] = array(
            'taxonomy' => 'product_cat',
            'terms'    => absint( $id ),
        );

        $products = new \WP_Query( $product_args );
        if ( $products->have_posts() ) : ?>
            <?php while ( $products->have_posts() ) : $products->the_post(); ?>
            <div class="product-item-slide swiper-slide">
                <?php wc_get_template_part( 'template-parts/content', 'product' ); ?>
            </div>
            <?php endwhile; ?>
            <?php wp_reset_postdata(); ?>
        <?php
        endif;
    endif;

    $results = ob_get_clean();

    wp_send_json_success( $results );

    die();
}
add_action( 'wp_ajax_pixelplus_product_tab_carousel_navs', 'pixelplus_product_tab_carousel_navs' );
add_action( 'wp_ajax_nopriv_pixelplus_product_tab_carousel_navs', 'pixelplus_product_tab_carousel_navs' );


/* Javascript */
var WidgetProductTabCarouselHandler = function ($scope, $) {
  var elem      = $scope.find('.pixelplus-product-tab-carousel-container').eq(0);
  var container = elem.find('.swiper-container');
  var prev      = elem.find('.pixelplus-product-tab-carousel-prev');
  var next      = elem.find('.pixelplus-product-tab-carousel-next');

  var term      = elem.find('.pixelplus-product-tab-carousel-navs div');

  var settings  = elem.data('settings');

    var slides_per_view        = 4;
    var slides_per_view_tablet = 3;
    var slides_per_view_mobile = 2;

    if ( typeof settings !== undefined ) {
	    if ( typeof settings.slides_per_view != undefined && settings.slides_per_view != '' ) {
		slides_per_view = settings.slides_per_view;
	    }

	    if ( typeof settings.slides_per_view_tablet != undefined && settings.slides_per_view_tablet != '' ) {
		slides_per_view_tablet = settings.slides_per_view_tablet;
	    }

	    if ( typeof settings.slides_per_view_mobile != undefined && settings.slides_per_view_mobile != '' ) {
		slides_per_view_mobile = settings.slides_per_view_mobile;
	    }
    }

    if (elem.length > 0) {
        var swiper = new Swiper(container, {
            loop: true,
            slidesPerView: 4,
            spaceBetween: 30,
            navigation: {
                nextEl: next,
                prevEl: prev,
            },
            breakpoints: {
                320: {
                    slidesPerView: 1,
                    spaceBetween: 0,
                },
                375: {
                    slidesPerView: slides_per_view_mobile,
                    spaceBetween: 0,
                },
                1024: {
                    slidesPerView: slides_per_view_tablet,
                    spaceBetween: 20,
                },
                1366: {
                    slidesPerView: slides_per_view,
                    spaceBetween: 30,
                },
            }
        });

    term.each(function(index, el) {
      var t    = $(this);
      var id   = t.data('id');
      var data = {
        action: 'pixelplus_product_tab_carousel_navs',
        data: {
          id: id
        },
        security: pixelplus._nonce
      };

      t.click(function(event) {
        event.preventDefault();
        if ( undefined == id ) {
          swiper.removeSlide(1);
          swiper.slideTo(0);
        }
        t.siblings().removeClass('active');
        t.addClass('active');

        elem.css({
          opacity: '.5',
          cursor: 'not-allowed'
        });

        $.post( pixelplus.ajax_url, data, function(response) {
          if (response.success && response.data) {
            swiper.removeAllSlides();
            swiper.addSlide(1, response.data);
            swiper.update();
            elem.css({
              opacity: '1',
              cursor: 'default'
            });
          }
        });
      });
    });
  }
}

// Run this code under Elementor.
elementorFrontend.hooks.addAction( 'frontend/element_ready/pixelplus-product-tab-carousel.default', WidgetProductTabCarouselHandler );

/* CSS */
.product-item__thumb {
    position: relative;
    display: flex !important;
    height: 0;
    padding-bottom: 75%;
}

.product-item__thumb img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}