Viết widget featured cateogry product woocommerce slide sử dụng owlcarousel jquery

06/10/2017 02:46 38356

ANh chị xem video để biết cách làm nha còn code thì đính kèm dưới video:

Import thư viện owlcarousel (file functions.php) nhé anh chị:

add_action( 'wp_enqueue_scripts', 'standard_load_scripts' );
function standard_load_scripts() {
	wp_enqueue_script( 'owl-carousel-js', get_stylesheet_directory_uri(). '/js/owl.carousel.js', array( 'jquery' ), '1.0.0',false );
	wp_enqueue_style( 
        'add-owl-carousel-css', get_stylesheet_directory_uri(). '/js/owl.carousel.css', array(),'1.0.0'
    );
	}

add_action( 'wp_enqueue_scripts', 'standard_load_scripts' );

function standard_load_scripts() {

wp_enqueue_script( 'owl-carousel-js', get_stylesheet_directory_uri(). '/js/owl.carousel.js', array( 'jquery' ), '1.0.0',false );

wp_enqueue_style(

'add-owl-carousel-css', get_stylesheet_directory_uri(). '/js/owl.carousel.css', array(),'1.0.0'

);

}

Code widget đây:

<?php
class slide_product_cat extends WP_Widget
{
     function __construct(){
        $widget_ops = array('description' => 'Home - Featured Product Category');
        $control_ops = array('width' => 300, 'height' => 300);
        parent::__construct(false,$name='Home - Featured Product Category',$widget_ops,$control_ops);
    }
	function form($instance){
		global $wpdb;
        //Defaults
        $instance = wp_parse_args( (array) $instance, array('title'=>'','product_ids'=>'') );
		$title = htmlspecialchars($instance['title']);
		$product_ids = htmlspecialchars($instance['product_ids']);
		
		?>
      	<p><label for="<?php echo $this->get_field_id('title'); ?>">Title: </label>  
        <input   name="<?php echo $this->get_field_name('title'); ?>" id="<?php echo $this->get_field_id('title'); ?>" value="<?php echo $title; ?>">
        
        </p>
        <p><label for="<?php echo $this->get_field_id('product_ids'); ?>">Category IDs: </label>  
        <input   name="<?php echo $this->get_field_name('product_ids'); ?>" id="<?php echo $this->get_field_id('product_ids'); ?>" value="<?php echo $product_ids; ?>">
        
        </p>
      	
        
        	
       
        
<?php		 
		
    }
    /*Saves the settings. */
    function update($new_instance, $old_instance){
        $instance = $old_instance;
		$instance['title'] = stripslashes($new_instance['title']);
        $instance['product_ids'] = stripslashes($new_instance['product_ids']);
		
        return $instance;
    }
	function widget($args, $instance) {
		global $wpdb,$post;
		extract($args);
		$term_ids = explode(",", $instance['product_ids']);
		echo $before_widget;
		?>
        <h2><span><?php echo $instance['title']; ?></span></h2>
        <div class="home-slide-<?php echo $term_ids[0]; ?> owl-carousel owl-theme">
        <?php


		$args = array(
		'post_type' => 'product',
			'tax_query' => array(
				array(
				'taxonomy' => 'product_cat',
				'field' => 'term_id',
				'terms' => $term_ids,
				)
			),
		'posts_per_page' => -1,
		);
		$the_query = new WP_Query( $args );
		if ( $the_query->have_posts() ):
			while ( $the_query->have_posts() ):
		$the_query->the_post();
		?>
        <div class="product-item-custom type-product">
		<?php 
			do_action("woocommerce_before_shop_loop_item"); 
			do_action("woocommerce_before_shop_loop_item_title");
			do_action("woocommerce_shop_loop_item_title"); 
			do_action("woocommerce_after_shop_loop_item_title"); 
			do_action("woocommerce_after_shop_loop_item"); 
		?>
        </div>
		<?php     endwhile;        endif; ?>
		<?php wp_reset_postdata();
		?>
        </div>
        <script>
		jQuery(function($){
			$(document).ready(function() {
				var owl = $('.home-slide-<?php echo $term_ids[0]; ?>');
              owl.owlCarousel({
                loop: true,
                margin: 10,
				 autoplay:true,
    			autoplayTimeout:3000,
    			autoplayHoverPause:true,
                responsiveClass: true,
				dotsEach: true,
                dotData: true,
				nav: true,
                responsive: {
                  0: {
                    items: 1,
                   	nav: false,
                  },
                  449: {
                    items: 2
                  
                  },
				  650: {
                    items: 2
                  
                  },
				   768: {
                    items: 3
                  
                  },
                  1000: {
                    items: 4,
                    
              
                  }
                }
              });
			  owl.on('mousewheel', '.owl-stage', function (e) {
					if (e.deltaY>0) {
						owl.trigger('next.owl');
					} else {
						owl.trigger('prev.owl');
					}
   				 e.preventDefault();
				});
            });
		})
           
          </script>
       <?php
        echo $after_widget;
	}
}// end class
register_widget('slide_product_cat');
//add class woocommerce
add_filter( 'body_class', 'custom_class' );
function custom_class( $classes ) {
   
        $classes[] = 'woocommerce';
    
    return $classes;
}
//cái này là thêm excerpt dưới title thôi
add_action("woocommerce_shop_loop_item_title","show_subtitle_below_title",11);
function show_subtitle_below_title(){
	global $post;
	?>
    <p class="sub-title"><?php echo custom_excerpt(get_the_content($post->ID),4,'...'); ?></p>
    <?php
}
remove_action("woocommerce_after_shop_loop_item","woocommerce_template_loop_add_to_cart",10);
?>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

<?php

class slide_product_cat extends WP_Widget

{

function __construct(){

$widget_ops = array('description' => 'Home - Featured Product Category');

$control_ops = array('width' => 300, 'height' => 300);

parent::__construct(false,$name='Home - Featured Product Category',$widget_ops,$control_ops);

}

function form($instance){

global $wpdb;

//Defaults

$instance = wp_parse_args( (array) $instance, array('title'=>'','product_ids'=>'') );

$title = htmlspecialchars($instance['title']);

$product_ids = htmlspecialchars($instance['product_ids']);

<p><label for="<?php echo $this->get_field_id('title'); ?>">Title: </label>

<input name="<?php echo $this->get_field_name('title'); ?>" id="<?php echo $this->get_field_id('title'); ?>" value="<?php echo $title; ?>">

</p>

<p><label for="<?php echo $this->get_field_id('product_ids'); ?>">Category IDs: </label>

<input name="<?php echo $this->get_field_name('product_ids'); ?>" id="<?php echo $this->get_field_id('product_ids'); ?>" value="<?php echo $product_ids; ?>">

</p>

<?php

}

/*Saves the settings. */

function update($new_instance, $old_instance){

$instance = $old_instance;

$instance['title'] = stripslashes($new_instance['title']);

$instance['product_ids'] = stripslashes($new_instance['product_ids']);

return $instance;

}

function widget($args, $instance) {

global $wpdb,$post;

extract($args);

$term_ids = explode(",", $instance['product_ids']);

echo $before_widget;

<div class="home-slide-<?php echo $term_ids[0]; ?> owl-carousel owl-theme">

<?php

$args = array(

'post_type' => 'product',

'tax_query' => array(

array(

'taxonomy' => 'product_cat',

'field' => 'term_id',

'terms' => $term_ids,

)

'posts_per_page' => -1,

);

$the_query = new WP_Query( $args );

if ( $the_query->have_posts() ):

while ( $the_query->have_posts() ):

$the_query->the_post();

<?php

do_action("woocommerce_before_shop_loop_item");

do_action("woocommerce_before_shop_loop_item_title");

do_action("woocommerce_shop_loop_item_title");

do_action("woocommerce_after_shop_loop_item_title");

do_action("woocommerce_after_shop_loop_item");

</div>

<?php endwhile; endif; ?>

<?php wp_reset_postdata();

</div>

jQuery(function($){

$(document).ready(function() {

var owl = $('.home-slide-<?php echo $term_ids[0]; ?>');

owl.owlCarousel({

loop: true,

margin: 10,

autoplay:true,

autoplayTimeout:3000,

autoplayHoverPause:true,

responsiveClass: true,

dotsEach: true,

dotData: true,

nav: true,

responsive: {

0: {

items: 1,

nav: false,

449: {

items: 2

650: {

items: 2

768: {

items: 3

1000: {

items: 4,

}

});

owl.on('mousewheel', '.owl-stage', function (e) {

if (e.deltaY>0) {

owl.trigger('next.owl');

} else {

owl.trigger('prev.owl');

}

e.preventDefault();

});

})

</script>

<?php

echo $after_widget;

}

}// end class

register_widget('slide_product_cat');

//add class woocommerce

add_filter( 'body_class', 'custom_class' );

function custom_class( $classes ) {

$classes[] = 'woocommerce';

return $classes;

}

//cái này là thêm excerpt dưới title thôi

add_action("woocommerce_shop_loop_item_title","show_subtitle_below_title",11);

function show_subtitle_below_title(){

global $post;

<?php

}

remove_action("woocommerce_after_shop_loop_item","woocommerce_template_loop_add_to_cart",10);

4.5/5 (17 Đánh giá)

Gửi Phản Hồi

0 Bình Luận

có thể bạn cần xem:

Các vấn đề liên quan tới customize woocommerce [ 15/05/2023 02:30 ]
Thêm một item menu vào my account woocommerce [ 25/03/2023 08:38 ]
Disable animation trong revolution slider [ 20/09/2022 08:07 ]
Cách tạo button printer một element bằng javascript [ 19/09/2022 12:56 ]
Cho phép chỉnh sửa xóa sản phẩm ở trang thanh toán checkout [ 31/08/2022 02:43 ]
Code sử dụng vue js, quasar, axios, sweetalert2 trong tác vụ quản lý danh sách [ 19/07/2022 10:26 ]
Add to cart woocommerce with meta item [ 13/07/2022 08:11 ]
Code xử lý giỏ hàng cart woocommerce [ 08/07/2022 11:32 ]
Cách làm sản phẩm đã xem woocommerce [ 25/06/2022 09:31 ]
Thêm một item vào nav my account woocommerce [ 21/06/2022 14:48 ]

Viết widget featured cateogry product woocommerce slide sử dụng owlcarousel jquery

có thể bạn cần xem:

Đăng ký nhận bài viết mới

Hướng dẫn thiết kế theme

Thiết kế theme wordpress phần 8

Thiết kế theme wordpress phần 7

Thiết kế theme wordpress phần 6

Thiết kế theme wordpress phần 5

Thiết kế theme wordpress-phần 4

Các functions thường dùng

Function xử lý upload to media wordpress

Function get ip address

Thay thế file_get_contents

Code tích hợp acf vào theme và plugin

Một số function thường dùng khi làm theme wordpress (some functions popular for work do theme worpdress)