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

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

26.04.2024

943

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

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

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

/
Автоматическое определение координат по адресу

Автоматическое определение координат по адресу

В данном решении используется сервис geocode-maps.yandex.ru. Функция определения координат по адресу my_url_encode, my_url_decode — вспомогательные функции по кодировке/декодировке символов для правильного url-запроса. Использование функции Ajax-функция определения координат Добавим функцию подключения Читать далее »

Подгрузка постов «налету» II: Кнопка

Подгрузка постов «налету» II: Кнопка

Данный вариант подгрузки постов «налету» является альтернативой подгрузке постов при скроллинге. Только в данном методе посты будут подгружаться по нажатию на кнопку. Также учтены некоторые особенности шаблона данного сайта высота Читать далее »

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

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 минут.