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

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

HIT

14.11.2018

4580

Прочитал в одной из статей — как подгружать методом 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

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

  • Похожие записи
  • Комментарии
  • Вложения
Отложенная загрузка изображений

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

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

Рекомендации по созданию лэндинга

Рекомендации по созданию лэндинга

Лэндинг является довольно специфическим вариантом сайта, требующим учитывать множество нюансов. Разбираемся в особенностях верстки и функционирования лэндинга. Рекомендации по верстке лэндинга Использование библиотек Animated (эффекты появления элементов) и iHover (эффекты Читать далее »

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

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

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

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

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

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