Elementor: product-tab-grid.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_Grid extends Widget_Base {

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

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

	public function get_icon() {
		return 'eicon-gallery-grid';
	}

	public function get_keywords() {
		return [ 'grid', 'tab', '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' ),
			]
		);

		$this->add_control(
			'title',
			[
				'label' => __( 'Title', 'elementor' ),
				'type' => Controls_Manager::TEXT,
				'default' => esc_html__( 'Hot Deal', 'pixelplus' ),
			]
		);

		$categories = get_terms( array(
			'taxonomy'   => 'product_cat',
			'hide_empty' => false,
		) );

		$options = [];
		if ( $categories ) {
			$options = wp_list_pluck( $categories, 'name', 'term_id' );
		}

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

		$repeater = new Repeater();

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

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

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

		$this->add_control(
			'color',
			[
				'label' => __( 'Color', 'pixelplus' ),
				'type' => Controls_Manager::COLOR,
				'default' => '',
				'selectors' => [
					'{{WRAPPER}} .product-section-title' => 'border-top-color: {{VALUE}};',
					'{{WRAPPER}} .product-section-title > a, {{WRAPPER}} .product-item__info--action > div, {{WRAPPER}} .product-item__info--action > a, {{WRAPPER}} .product-view-all a' => 'background: {{VALUE}};',
					'{{WRAPPER}} .product-section-title .product-section-title__link-group a' => 'color: {{VALUE}};',
				],
			]
		);

		$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-tab-grid-container',
			],
			'wrapper' => [
				'class' => ['pixelplus-product-tab-grid-wrapper', 'pixelplus-grid'],
			],
		] );

		$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'    => $settings['term'],
			);
			$term_link = get_term_link( absint( $settings['term'] ), 'product_cat' );
		} else {
			$term_link = '';
		}


		$products = new \WP_Query( $product_args );
		?>
		<?php if ( $products->have_posts() ) : ?>
		<div <?php echo $this->get_render_attribute_string( 'container' ); ?>>
			<div class="product-section-title">
				<a href="<?php echo esc_url( $term_link ); ?>"><?php echo esc_html( $settings['title'] ); ?></a>
				<div class="product-section-title__link-group">
					<?php if ( $settings['tabs'] ) : ?>
					<?php foreach ( $settings['tabs'] as $tab ) : ?>
					<a href="<?php echo esc_url( get_term_link( absint( $tab['tab'] ), 'product_cat' ) ); ?>"><?php echo esc_html( get_term_name( absint( $tab['tab'] ), 'product_cat' ) ); ?></a>
					<?php endforeach; ?>
					<?php endif; ?>
				</div>
			</div>
			<div <?php echo $this->get_render_attribute_string( 'wrapper' ); ?>>
				<?php while ( $products->have_posts() ) : $products->the_post(); ?>
					<?php wc_get_template_part( 'content', 'product' ); ?>
				<?php endwhile; ?>
				<?php wp_reset_postdata(); ?>
			</div>
			<div class="product-view-all"><a href="<?php echo esc_url( $term_link ); ?>">Xem tất cả</a></div>
		</div>
		<?php endif; ?>
		<?php
	}
}

/* conten-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>

/* CSS */
.product-section-title {
	display: flex;
	justify-content: space-between;
	border-top: 2px solid #ff5c00;
	box-shadow: 0 1px 10px #e2e2e2;
	margin-bottom: 15px;
	background: #fff;
}

.product-section-title > a {
	color: #fff;
	background: #ff5c00;
	text-align: center;
	padding: 10px 15px;
}

.product-section-title .product-section-title__link-group {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-ms-align-items: center;
	align-items: center;
}

.product-section-title .product-section-title__link-group a {
	color: #ff5c00;
	margin-right: 20px;
}

.product-section-title .product-section-title__link-group a:last-child {
	margin-right: 10px;
}