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

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

HIT

14.11.2018

5780

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

Отложенная загрузка изображений

Если на странице есть несколько изображений или есть изображения дублирующиеся на всех страницах (header, footer), то чтобы ускорить общую загрузку сайта, можно установить для изображений отложенную загрузку. Изображение будет появляться Читать далее »

Опросы на сайте без плагина

Опросы на сайте без плагина

Создадим функционал сбора информации (опросов) от посетителей без использования плагинов, дорабатывая нужные аспекты так как нам нужно. Как создать функционал опросов с помощью плагинов описано здесь. Создадим форму опроса для Читать далее »

Фильтр по меткам (изменение основного запроса)

Фильтр по меткам (изменение основного запроса)

Реализуем фильтрацию записей по меткам путем изменения основного запроса на лету (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

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

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