Elementor: product-modern-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_Modern_Carousel extends Widget_Base {

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

	public function get_title() {
		return __( 'Product Modern 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_control(
			'row',
			[
				'label' => __( 'Row', 'elementor-pro' ),
				'type' => Controls_Manager::NUMBER,
				'default' => 2,
			]
		);

		$this->end_controls_section();

	}

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

		$settings = $this->get_settings_for_display();

		$this->add_render_attribute( [
			'container' => [
				'class' => 'pixelplus-product-modern-carousel-container',
				'dir' => 'ltr',
			],
			'wrapper' => [
				'class' => 'pixelplus-product-modern-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'] ),
			);
		}

		$productss = get_posts( $product_args );

		global $post;

		?>
		<?php if ( $productss ) :
			$productss = array_chunk( $productss, $settings['row'] ? $settings['row'] : 2 );
		?>
		<div <?php echo $this->get_render_attribute_string( 'container' ); ?>>
			<div class="swiper-container">
				<div <?php echo $this->get_render_attribute_string( 'wrapper' ); ?>>
					<?php foreach ( $productss as $products ) : ?>
					<div class="product-item-slide swiper-slide">
						<?php foreach ( $products as $post ) : setup_postdata( $post ); ?>
							<?php get_template_part( 'template-parts/content', 'product-horizontal' ); ?>
						<?php endforeach; ?>
						<?php wp_reset_postdata(); ?>
					</div>
					<?php endforeach; ?>
				</div>
			</div>
			<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>
		</div>
		<?php endif; ?>
		<?php
	}
}

/* content-product-horizontal */
<?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 );
$text_field_2 = get_post_meta( $id, '_text_field_2', true );
$text_field_3 = get_post_meta( $id, '_text_field_3', true );
?>

<div class="product-item product-item-full">
	<a href="<?php the_permalink(); ?>" class="product-item__thumb">
		<?php the_post_thumbnail( 'medium' ); ?>
		<div class="product-item__meta">
			<span class="product-item__meta--new">Mới</span>
			<?php if ( $percent ) : ?>
			<span class="product-item__meta--percent"><?php echo esc_html( $percent ); ?></span>
			<?php endif; ?>
		</div>
	</a>
	<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__info">
			<?php if ( $text_field_1 || $text_field_2 || $text_field_3 ) : ?>
			<ul class="product-item__info--meta list-unstyled">
				<?php if ( $text_field_1 ) : ?>
				<li><strong>Kích thước: </strong><?php echo esc_html( $text_field_1 ); ?></li>
				<?php endif; ?>
				<?php if ( $text_field_2 ) : ?>
				<li><strong>Chất liệu: </strong><?php echo esc_html( $text_field_2 ); ?></li>
				<?php endif; ?>
				<?php if ( $text_field_3 ) : ?>
				<li><strong>Bảo hành: </strong><?php echo esc_html( $text_field_3 ); ?></li>
				<?php endif; ?>
			</ul>
			<?php endif; ?>
			<div class="product-item__info--action">
				<div class="product-item__quick-view" data-id="<?php the_ID(); ?>"><i class="icofont-search"></i> Xem nhanh</div>
				<a href="?add-to-cart=<?php the_ID(); ?>" data-quantity="1" class="product-item__buynow add_to_cart_button ajax_add_to_cart" data-product_id="<?php the_ID(); ?>" data-product_sku="" title="Thêm “<?php the_title(); ?>” vào giỏ hàng" rel="nofollow">Mua hàng</a>
			</div>
		</div>
	</div>
</div>

<?php
/* Javascipt */
var WidgetProductModernCarouselHandler = function ($scope, $) {
  var elem      = $scope.find('.pixelplus-product-modern-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');

  if (elem.length > 0) {
    var swiper = new Swiper(container, {
      loop: true,
      slidesPerView: 2,
      spaceBetween: 30,
      navigation: {
        nextEl: prev,
        prevEl: next,
      },
      breakpoints: {
        320: {
          slidesPerView: 1,
          spaceBetween: 0,
        },
        480: {
          slidesPerView: 1,
          spaceBetween: 0,
        },
        768: {
          slidesPerView: 2,
          spaceBetween: 10,
        },
        1024: {
          slidesPerView: 2,
          spaceBetween: 20,
        },
        1366: {
          slidesPerView: 2,
          spaceBetween: 30,
        },
      }
    });
  }
}

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


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