/ Сайтостроение / Scripts & jquery / Подгрузка отдельных блоков на странице

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

HIT

14.11.2018

1672

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

Метод подгрузки

Еще раз привожу метод подгрузки отдельных блоков:

1. Создаем php-файл с выводом требуемого кода, вверху прописываем следующее:

<?php require_once("../../../wp-load.php"); ?>

2. Прописываем скрипт, чтобы при определенном событии в определенный контейнер (#container) подгружался код из файла созданного в шаге 1 (file.php).

$(document).ready(function() { 
	$("#container").load("/wp-content/themes/template-name/file.php");
});

Альтернативный способ: создать необходимый для подгрузки файл php в виде шаблона и назначить его какой-либо странице и в этом случае в скрипте при вызове функции нужно указать путь на страницу:

$(document).ready(function() { 
	$("#container").load("/page-file/");
});

Собственно все. Очень просто, но дает такой потенциал возможностей!

Области применения

Полный каталог (в основе это решение), если мы часть категорий держим в спойлере, то при нажатии кнопки мы можем и получать эти категории:

$(document).ready(function() { 
	$('.spoiler-title').click(function(){
		$(".full-catalog").load("/wp-content/themes/magazin/full-catalog.php");
	});	
});

Или подгружать содержимое одного из табов:

$(document).ready(function() { 
	$('#li-hit').click(function(){
		$("#tab-hit").load("/wp-content/themes/magazin-3.0/hits.php");
	});	
});

Еще одним востребованным местом применения будут лэндинги. Можно подгружать «на лету» целый блоки. Будем использовать решение viewportChecker.

1. У необходимого блока прописываем require_once(«../../../wp-load.php»);
2. В том месте где он вызывался прописываем div с идентификатором, вместо непосредственного вызова get_template_part( ‘promo’ );
3. Прописываем скрипт:

$(document).ready(function() { 
	jQuery("#promo").viewportChecker({
		callbackFunction: function(elem, action){
			$("#promo").load("/wp-content/themes/meinland/promo.php");
		}
	});
});

Попытаться подгрузить таким образом Contact Form 7

Тэги: ,

Поделится информацией с друзьями

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

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

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

/
Json Начало

Json Начало

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

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

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

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

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

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

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