Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<?php
namespace PixelPlus\Elementor\Widget;
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Repeater;
use Elementor\Utils;
class Product_Tab_Grid_Modern extends Widget_Base {
public function get_name() {
return 'pixelplus-product-tab-grid-modern';
}
public function get_title() {
return __( 'Product Tab Grid Modern', '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' => 6,
]
);
$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, {{WRAPPER}} .recommended-list__read-more a' => 'background: {{VALUE}};',
'{{WRAPPER}} .product-section-title .product-section-title__link-group a' => 'color: {{VALUE}};',
],
]
);
$this->end_controls_section();
$this->start_controls_section(
'section_recommended',
[
'label' => __( 'Recommended', 'pixelplus' ),
]
);
$this->add_control(
'recommended_title',
[
'label' => __( 'Title', 'pixelplus' ),
'type' => Controls_Manager::TEXT,
'default' => esc_html__( 'Gới ý dành cho bạn', 'pixelplus' ),
]
);
$this->add_control(
'recommended_cat',
[
'label' => __( 'Categories', 'pixelplus' ),
'type' => Controls_Manager::SELECT2,
'options' => $options,
'default' => [],
'label_block' => true,
]
);
$this->add_control(
'media',
[
'label' => __( 'Choose Image', 'elementor' ),
'type' => Controls_Manager::MEDIA,
'dynamic' => [
'active' => true,
],
'default' => [
'url' => Utils::get_placeholder_image_src(),
],
]
);
$this->add_control(
'media_link',
[
'label' => __( 'Link', 'elementor' ),
'type' => Controls_Manager::URL,
'dynamic' => [
'active' => true,
],
'placeholder' => __( 'https://your-link.com', 'elementor' ),
'show_label' => false,
]
);
$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-modern-container',
],
'wrapper' => [
'class' => ['pixelplus-product-tab-grid-modern-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' => $settings['term'],
);
$term_link = get_term_link( absint( $settings['term'] ), 'product_cat' );
} else {
$term_link = '';
}
$products = new \WP_Query( $product_args );
$recommended_args = array(
'post_type' => 'product',
'posts_per_page' => 3,
'ignore_sticky_posts' => 1,
);
if ( $settings['recommended_cat'] ) {
$product_args['tax_query'][] = array(
'taxonomy' => 'product_cat',
'terms' => $settings['recommended_cat'],
);
$recommended_link = get_term_link( absint( $settings['recommended_cat'] ), 'product_cat' );
} else {
$recommended_link = '';
}
$recommended = new \WP_Query( $recommended_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' ); ?>>
<div class="pixelplus-product-tab-grid-modern-grid-wrapper">
<div class="pixelplus-product-tab-grid-modern-grid pixelplus-grid">
<?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>
<div class="pixelplus-product-tab-grid-modern-grid__recommended">
<?php if ( $recommended->have_posts() ) : ?>
<div class="recommended-list">
<?php if ( $settings['recommended_title'] ) : ?>
<div class="recommended-list_title"><?php echo esc_html( $settings['recommended_title'] ); ?></div>
<?php endif; ?>
<div class="recommended-list_main">
<?php while ( $recommended->have_posts() ) : $recommended->the_post(); ?>
<?php get_template_part( 'template-parts/content', 'product-thumb-left' ); ?>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<div class="recommended-list__read-more"><a href="<?php echo esc_url( $recommended_link ); ?>">Xem tất cả</a></div>
</div>
</div>
<?php endif; ?>
<?php if ( $settings['media'] ) : ?>
<div class="recommended-media">
<?php if ( $settings['media_link'] ) : ?>
<a href="<?php echo $settings['media_link']['url']; ?>"><img src="<?php echo $settings['media']['url']; ?>" alt=""></a>
<?php else : ?>
<img src="<?php echo $settings['media']['url']; ?>" alt="">
<?php endif; ?>
</div>
<?php endif; ?>
</div>
</div>
</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>
/* content-product-thumb-left */
<?php
$regular_price = get_post_meta( get_the_ID(), '_regular_price', true );
$sale_price = get_post_meta( get_the_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 );
}
?>
<div class="product-item-thumb-left">
<a href="<?php the_permalink(); ?>" class="product-item__thumb">
<?php the_post_thumbnail( 'medium' ); ?>
</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>
</div>
<?php
/* 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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.