Skip to content

Instantly share code, notes, and snippets.

@namncn

namncn/Elementor: product-carousel.php

Last active February 8, 2025 20:30
Download ZIP

Revisions

  1. namncn revised this gist Apr 28, 2020. 1 changed file with 10 additions and 8 deletions.
    18 changes: 10 additions & 8 deletions Elementor: product-carousel.php
    View file
    Original file line number Diff line number Diff line change
    @@ -224,16 +224,18 @@ protected function render() {
    var slides_per_view_tablet = 3;
    var slides_per_view_mobile = 2;

    if ( typeof settings.slides_per_view != undefined && settings.slides_per_view != '' ) {
    slides_per_view = settings.slides_per_view;
    }
    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_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 ( 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) {
  2. namncn revised this gist Apr 10, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion Elementor: product-carousel.php
    View file
    Original file line number Diff line number Diff line change
    @@ -127,7 +127,7 @@ protected function render() {
    <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 get_template_part( 'template-parts/content', 'product' ); ?>
    <?php wc_get_template_part( 'content', 'product' ); ?>
    </div>
    <?php endwhile; ?>
    <?php wp_reset_postdata(); ?>
  3. namncn revised this gist Apr 10, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion Elementor: product-carousel.php
    View file
    Original file line number Diff line number Diff line change
    @@ -210,7 +210,7 @@ protected function render() {
    </div>
    </div>


    <?php
    /* Javascript */
    var WidgetProductCarouselHandler = function ($scope, $) {
    var elem = $scope.find('.pixelplus-product-carousel-container').eq(0);
  4. namncn revised this gist Apr 10, 2020. 1 changed file with 67 additions and 1 deletion.
    68 changes: 67 additions & 1 deletion Elementor: product-carousel.php
    View file
    Original file line number Diff line number Diff line change
    @@ -127,7 +127,7 @@ protected function render() {
    <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 get_template_part( 'template-parts/content', 'product-rating' ); ?>
    <?php get_template_part( 'template-parts/content', 'product' ); ?>
    </div>
    <?php endwhile; ?>
    <?php wp_reset_postdata(); ?>
    @@ -145,6 +145,72 @@ protected function render() {
    }
    }

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


    /* Javascript */
    var WidgetProductCarouselHandler = function ($scope, $) {
    var elem = $scope.find('.pixelplus-product-carousel-container').eq(0);
  5. namncn revised this gist Apr 9, 2020. 1 changed file with 5 additions and 5 deletions.
    10 changes: 5 additions & 5 deletions Elementor: product-carousel.php
    View file
    Original file line number Diff line number Diff line change
    @@ -147,12 +147,12 @@ protected function render() {

    /* 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 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 settings = elem.data('settings');

    var slides_per_view = 4;
    var slides_per_view_tablet = 3;
  6. namncn revised this gist Apr 9, 2020. 1 changed file with 63 additions and 33 deletions.
    96 changes: 63 additions & 33 deletions Elementor: product-carousel.php
    View file
    Original file line number Diff line number Diff line change
    @@ -69,6 +69,15 @@ protected function _register_controls() {
    ]
    );

    $this->add_responsive_control(
    'slides_per_view',
    [
    'label' => __( 'Slides Per View', 'elementor-pro' ),
    'type' => Controls_Manager::NUMBER,
    'default' => 4,
    ]
    );

    $this->end_controls_section();

    }
    @@ -80,10 +89,17 @@ protected function render() {

    $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',
    @@ -136,39 +152,53 @@ protected function render() {
    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: 4,
    spaceBetween: 30,
    navigation: {
    nextEl: next,
    prevEl: prev,
    },
    breakpoints: {
    320: {
    slidesPerView: 1,
    spaceBetween: 0,
    },
    480: {
    slidesPerView: 1,
    spaceBetween: 0,
    },
    768: {
    slidesPerView: 2,
    spaceBetween: 10,
    },
    1024: {
    slidesPerView: 3,
    spaceBetween: 20,
    },
    1366: {
    slidesPerView: 4,
    spaceBetween: 30,
    },
    }
    });
    }
    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.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.
  7. namncn revised this gist Apr 7, 2020. 1 changed file with 4 additions and 0 deletions.
    4 changes: 4 additions & 0 deletions Elementor: product-carousel.php
    View file
    Original file line number Diff line number Diff line change
    @@ -146,6 +146,10 @@ protected function render() {
    prevEl: prev,
    },
    breakpoints: {
    320: {
    slidesPerView: 1,
    spaceBetween: 0,
    },
    480: {
    slidesPerView: 1,
    spaceBetween: 0,
  8. namncn revised this gist Apr 6, 2020. 1 changed file with 16 additions and 1 deletion.
    17 changes: 16 additions & 1 deletion Elementor: product-carousel.php
    View file
    Original file line number Diff line number Diff line change
    @@ -168,4 +168,19 @@ protected function render() {
    }

    // Run this code under Elementor.
    elementorFrontend.hooks.addAction( 'frontend/element_ready/pixelplus-product-carousel.default', WidgetProductCarouselHandler );
    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;
    }
  9. namncn revised this gist Apr 6, 2020. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions Elementor: product-carousel.php
    View file
    Original file line number Diff line number Diff line change
    @@ -142,8 +142,8 @@ protected function render() {
    slidesPerView: 4,
    spaceBetween: 30,
    navigation: {
    nextEl: prev,
    prevEl: next,
    nextEl: next,
    prevEl: prev,
    },
    breakpoints: {
    480: {
  10. namncn revised this gist Apr 3, 2020. 1 changed file with 5 additions and 1 deletion.
    6 changes: 5 additions & 1 deletion Elementor: product-carousel.php
    View file
    Original file line number Diff line number Diff line change
    @@ -129,6 +129,7 @@ protected function render() {
    }
    }

    /* Javascript */
    var WidgetProductCarouselHandler = function ($scope, $) {
    var elem = $scope.find('.pixelplus-product-carousel-container').eq(0);
    var container = elem.find('.swiper-container');
    @@ -164,4 +165,7 @@ protected function render() {
    }
    });
    }
    }
    }

    // Run this code under Elementor.
    elementorFrontend.hooks.addAction( 'frontend/element_ready/pixelplus-product-carousel.default', WidgetProductCarouselHandler );
  11. namncn created this gist Apr 3, 2020.
    167 changes: 167 additions & 0 deletions Elementor: product-carousel.php
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,167 @@
    <?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->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-carousel-container',
    'dir' => 'ltr',
    ],
    '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 get_template_part( 'template-parts/content', 'product-rating' ); ?>
    </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
    }
    }

    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');

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