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

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

26.04.2024

961

Перезагрузим содержимое слайдера 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]
  • Похожие записи
  • Комментарии
  • Вложения
Варианты при вводе запроса в поиск

Варианты при вводе запроса в поиск

При вводе поискового запроса удобно чтобы сразу выводились несколько вариантов с ссылками на страницы с искомым словосочетанием. Реализуем это минимальными действиями. Подлючение скрипта и стилей Подключаем все необходимые стили и Читать далее »

/
Json Начало

Json Начало

JSON (JavaScript Object Notation) — это текстовый протокол обмена данными, чем-то похожий на более привычный XML, но данные записываются в нем более компактно. Изначально он был разработан для нужд JavaScript Читать далее »

Подгрузка отдельных блоков на странице

Подгрузка отдельных блоков на странице

Прочитал в одной из статей — как подгружать методом ajax целые куски кода, в том числе и php. Сам метод действительно оказался прост. В данной статье опишем ситуации где этот Читать далее »

/

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

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 6170

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

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