/ Scripts & jquery / Обновление слайдера Owl Carousel

Обновление слайдера Owl Carousel

26.04.2024

106

Перезагрузим содержимое слайдера 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();
});

Поделиться в соц. сетях:

  • Похожие записи
  • Комментарии
  • Вложения
Выбор города пользователя

Выбор города пользователя

Создадим модуль выбора города пользователя, на основе которого, будем менять некоторые аспекты сайта. Автоматически определяем и сохраняем город в SESSION Автоматически определяем город (в основу которого легло решение от Яндекс). Читать далее »

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

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

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

/
Юр. или физ. лицо при оформлении

Юр. или физ. лицо при оформлении

Расширим функционал Woocommerce выбором при оформлении заказа: юр. или физ. лицо. Естественно данный выбор будет влиять на множество аспектов самого процесса заказа и прочих функций WC. Создание переключателя и полей Читать далее »

/

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

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

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