Как в ajax запросе подгружать только определенный div в magnific popup?

Question

[Stacy None]

Есть вот такой вот плагин окон
Хочу вызвать окно и подгрузить в него контент начиная с определенного div в интернете пишут про какой-то ?tmpl=component

<a class="simple-ajax-popup" href="https://vipadmin.club/o-proekte.html?tmpl=component">Загрузить страницу в мод. окне Ajax</a>

Но у меня ничего не выходит, подгружается не только контент с div но и вся страница с меню и т д.
Пишут так "Чтобы показать только контент, отбросив ненужные блоки (шапка сайта, сайдбар, подвал и т.д.) я добавлю в конец адреса параметр — ?tmpl=component." Что это за параметр?
Как правильно настроить этот запрос?

Comments

[imdeveloper]

Где вы такое прочитали?

[Stacy None]

imdeveloper, https://zaurmag.ru/priyatny-e-poleznosti-dlya-sajt...

Answer 1

[Павел]

У вас Joomla? Похоже ?tmpl=component связано с этой CMS, и как-то форматирует вывод информации CMS, который в последующем можно использовать для popup окна, как вариант.
Тут вроде написано:
https://boxapp.net/blog/joomla/ispolzovanie-tmpl-c...

ЗЫ Для Магенто ?tmpl=component ни как не актуально.

Если вам нужно подгрузить в всплывающее окно какой-то div на сайте, используйте стандартный конфиг https://dimsemenov.com/plugins/magnific-popup/docu...

Подгрузить определённый элемент с другой страницы:

<a href="АДРЕС СТРАНИЦЫ.html" class="open-popup-link">Показать всплывающее окно</a>

Используем callback в вызове:

$('.open-popup-link').magnificPopup({
  type:'ajax',
  callbacks: {
  parseAjax: function(mfpResponse) {
    mfpResponse.data = $(mfpResponse.data).find('#какой-то элемент');
  }
}
});

Если элемент не имеет прямых родителей, меняем find на filter:

$('.open-popup-link').magnificPopup({
  type:'ajax',
  callbacks: {
  parseAjax: function(mfpResponse) {
    mfpResponse.data = $(mfpResponse.data).filter('#какой-то элемент');
  }
}
});

Comments

[Stacy None]

А как это сделать? Там нет ничего про определенный div

[Павел]

<div id="test-popup" class="white-popup mfp-hide">
  Тут код, который  будет во всплывающем окне
</div>

Ваша кнопка:

<a href="#test-popup" class="open-popup-link">Показать всплывающее окно</a>

И, соответственно инициализация плагина:

$('.open-popup-link').magnificPopup({
  type:'inline',
  midClick: true // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
});

Или если вы хотите подгрузить стороннюю html страницу

<a href="ПУТЬ ДО ВАШЕЙ СТРАНИЦЫ.html" class="ajax-popup-link">Показать всплывающее окно</a>

Инициализация плагина:

$('.ajax-popup-link').magnificPopup({
  type: 'ajax'
});

[Павел]

Если у вас на странице есть div, который вы хотите показывать во всплывающем окне, оберните его в ещё 1 div:

<div id="test-popup" class="white-popup mfp-hide">
  Тут div, который вы хотите видеть во всплывающем окне
</div>

[Stacy None]

Asokr, Всё круто! Вопросов нет. Но суть моей проблемы не в этом. Я знаю как работает окно.
Дело в том что по ссылке которую я хочу подгрузить загружается то что не нужно то же, меню, сайдбар и т д
А мне нужно чтобы подгружалась только статья! которая находится в div class="statya"

[Stacy None]

Asokr, Ничего не понимаю.. Обернул и содержимое вообще пропало

[Павел]

Прошу прощения, не так понял вопрос.
Ссылка:

<a href="article.html" class="open-popup-link">Показать всплывающее окно</a>

Добавляем callback: замените атрибут #article на свой

$('.open-popup-link').magnificPopup({
  type:'ajax',
  callbacks: {
  parseAjax: function(mfpResponse) {
    mfpResponse.data = $(mfpResponse.data).find('#article');
  }
}
});

Answer 2

[imdeveloper]

tmpl=component - это особенность джумлы и никак не оносится к плагину всплывающего окна. Дело в том, что при передаче этого параметра в джумлу CMS будет выдавать только контентную часть без остальных блоков -подробнее здесь
Соответственно у Вас это не сработает(если только у Вас не Joomla). Здесь нужен другой подход. Например , как вариант начиная от пути попапа(отталкиваясь от селектора попапа, что бы это не коснулось основного сайта) скрыть /удалить ненужные элементы(хедер, футер) или же создавать страницы отдельно без хедра и футера