Elementor: product-carousel.php

<?php
namespace PixelPlus\Elementor\Widget;

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

use Elementor\Widget_Base;
use Elementor\Controls_Manager;

class Product_Carousel extends Widget_Base {

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

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

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

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

	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' ),
			]
		);

		$categories = get_terms( 'product_cat' );

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

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

		$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-carousel-container',
				'dir' => 'ltr',
				'data-settings' => wp_json_encode( $options ),
			],
			'wrapper' => [
				'class' => 'pixelplus-product-carousel-wrapper swiper-wrapper',
			],
		] );

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

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

		$products = new \WP_Query( $product_args );
		?>
		<?php if ( $products->have_posts() ) : ?>
		<div <?php echo $this->get_render_attribute_string( 'container' ); ?>>
			<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-carousel-navigation">
				<div class="pixelplus-product-carousel-prev"><i class="icofont-simple-left"></i></div>
				<div class="pixelplus-product-carousel-next"><i class="icofont-simple-right"></i></div>
			</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
/* Javascript */
var WidgetProductCarouselHandler = function ($scope, $) {
	var elem      = $scope.find('.pixelplus-product-carousel-container').eq(0);
	var container = elem.find('.swiper-container');
	var prev      = elem.find('.pixelplus-product-carousel-prev');
	var next      = elem.find('.pixelplus-product-carousel-next');

	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,
				},
			}
		});
	}
}

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

/* 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;
}