Last active
December 16, 2024 16:13
-
-
Save namncn/2701e52cbcca230c76c5ab459cf25365 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment