/ Scripts & jquery / Перезагрузка слайдера Owl Carousel

Перезагрузка слайдера Owl Carousel

HIT

26.04.2024

1022

Перезагрузим содержимое слайдера Owl Carousel с помощью Ajax.

Предположим что у нас есть слайдер с классом doctors и поле select с переключением категорий докторов. Вывод в данном примере специфический, кастомный тип записи и таксономия.

<div class="owl-carousel owl-theme doctors">

	<?php $args = array( 
			'post_type' => 'nashi-vrachi',
			'posts_per_page' => -1,
			'tax_query' => [
				[
					'taxonomy' => 'vrachi_cat',
					'field'    => 'id',
					'terms'    => 34,
				]
			]

		);
		$myposts = get_posts( $args );
		foreach( $myposts as $post ): setup_postdata($post);

		get_template_part( 'solus-doc' );

		endforeach;
	wp_reset_postdata(); ?>

</div>

Функции обновления слайдера

function add_site_load_more() { 
	wp_enqueue_script( 'site-load-more' );
}  
add_action( 'wp_enqueue_scripts', 'add_site_load_more', 20 );


add_action( 'wp_enqueue_scripts', 'slm_register_scripts', 1 );
function slm_register_scripts() {
	/* Register JavaScript Functions File */
    wp_register_script( 'site-load-more', plugins_url('/site-load-more.js', __FILE__), array( 'jquery' ), '1.0', true );

	/* Localize Scripts */
	wp_localize_script( 'site-load-more', 'ajax_posts', array(
		'ajaxurl' => admin_url( 'admin-ajax.php' ),
		'noposts' => __('No more posts', 'twentyfifteen'),
	));
}


// Подгрузка постов Ajax
function site_load_more(){

    $doc_type = (isset($_POST["doc_type"])) ? $_POST["doc_type"] : 0;

    header("Content-Type: text/html");

    $args = array( 
		'post_type' => 'nashi-vrachi',
		'posts_per_page' => -1,
		'tax_query' => [
			[
				'taxonomy' => 'vrachi_cat',
				'field'    => 'id',
				'terms'    => $doc_type,
			]
		]
	);

    $loop = new WP_Query($args);

    $out = '';
    if ($loop -> have_posts()) :  while ($loop -> have_posts()) : $loop -> the_post();
        $out .= get_template_part( 'solus-doc' );
    endwhile;
    endif;
    wp_reset_postdata();

    die($out);
}

add_action('wp_ajax_nopriv_site_load_more', 'site_load_more');
add_action('wp_ajax_site_load_more', 'site_load_more');

Скрипт обновления слайдера

Содержимое файла site-load-more.js (который мы функцией подключили):

function load_posts(){

	var doc_type = jQuery('select[name="doc_type"]').find(":selected").val();
	var str = '&doc_type=' + doc_type + '&action=site_load_more';


	jQuery.ajax({
		type: "POST",
		dataType: "html",
		url: ajax_posts.ajaxurl,
		data: str,
		success: function(data){

			var $data = jQuery(data);

			if ($data.length) {

			} else {

			}
			
			// Печатаем полученные элементы
            jQuery(".doctors .owl-stage").html($data);
            $html = jQuery(".doctors .owl-stage").html();

			// Обновляем карусель
			jQuery('.doctors').trigger('replace.owl.carousel', $html);
			jQuery('.doctors').trigger('refresh.owl.carousel');
			
		},
		// error : function(jqXHR, textStatus, errorThrown) {
		// 	$loader.html(jqXHR + " :: " + textStatus + " :: " + errorThrown);
		// }

	});
	return false;
}


// При изменении списка врачей

jQuery('select[name="doc_type"]').on('change',function(){
	load_posts();
});
[site-socialshare]
  • Похожие записи
  • Комментарии
  • Вложения
Технология Ajax

Технология Ajax

AJAX — это технология, позволяющая обмениваться данными между браузером и сервером без перезагрузок страницы, что бывает весьма удобно, иногда необходимо. Простой запрос и обновление контента Создаем файл time.php с содержимым Читать далее »

Подгрузка постов «налету» I: Скроллинг

Подгрузка постов «налету» I: Скроллинг

Добавляем на сайт функционал подгрузки постов «налету». Данная технология применяется в соц. сетях, а также крупных интернет-магазинах. В funсtion.php // Добавляем подгрузку постов function true_loadmore_scripts() { wp_enqueue_script('jquery'); // скорее всего Читать далее »

Новинка (товар NEW полем)

Новинка (товар NEW полем)

Ранее были рассмотрены варианты добавления лэйбла New полуавтоматическим способом (последние созданные товары, либо по времени от текущего), либо назначением метки NEW. Здесь разберем как сделать данный функционал полем и какие Читать далее »

/

Добавить комментарий

Notice: Функция WP_Styles::add вызвана неправильно. Стиль с дескриптором "editor-buttons" был поставлен в очередь с незарегистрированными зависимостями: dashicons. Дополнительную информацию можно найти на странице «Отладка в WordPress». (Это сообщение было добавлено в версии 6.9.1.) in /home/t/tiberi6w/opttour.ru/public_html/wp-includes/functions.php on line 6260

Пока нет комментариев. Будь первым!

Перезагрузка слайдера Owl Carousel
Оформляем вход в админку
Рекомендации для васОформляем вход в админкуOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.