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

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

HIT

14.11.2018

5908

Прочитал в одной из статей — как подгружать методом 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
[site-socialshare]
  • Похожие записи
  • Комментарии
  • Вложения
Подгрузка постов «налету» II: Кнопка

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

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

Ajax форма с вложением файла

Ajax форма с вложением файла

Долго искал и нашел (здесь www.thenerdyblog.com) отличное решение — форма с вложением файла на ajax. Форма Скрипт Файл-обработчик Если нужно чтобы вложение было обязательным, то в условии else прописываем ошибку: Читать далее »

/
Новинка (товар 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

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

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