Last active
April 10, 2020 16:09
-
-
Save namncn/a29a865967434219bb4df6f022bf6f62 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_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; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment