Как сделать что бы в одно модальное окно выводился разный контент?

1 ответ

Добрый день, хотел бы поинтересоваться может кто-то знает как сделать что бы в одно модальное окно выводится разный контент. Идея такая: Есть карточка товара и кнопка "Подробнее" при нажатие на нее открывается модальное окно с содержимым этого товара. Саму верстку хочу посадить на WP ,а контент будет выводится через ACF

Может кто-то делал подобное либо знает как сделать ?

Дополнительно

Сергей delphinpro @delphinpro Куратор тега PHP frontend developer ну элементарно вроде:
Клик по кнопке -> Запрос данных -> Вставка данных в модалку -> Отображение модалки.

Если бы не тег вордпресс, то вполне возможно тс даже смог бы реализовать это )
ThunderCat, особо ничего сложного не должно быть. Делаешь плагин с хуком по обработке своей ссылки ссылки и пол работы уже сделано. Научиться делать базовый плагин - час времени
maksam07, а в ВП нет разве никакого API? Я имею ввиду, разве нельзя его использовать чисто как api endpoint для SPA фронта? Если можно, то и проблемы нет организовать эндпойнт для получения данных для модалки.
Сергей delphinpro, да, есть. Спасибо что напомнили, потому как самому еще никогда не приходилось его использовать и опыта не было, но как гласит описание в вп апи, то задачу автора, скорее всего, можно решить и через него
https://wp-kama.ru/handbook/rest

Ответы:

Ну хер его, создать модалку-шаблон, внутри модалки плейсхолдеры где на своем месте стоят нужные данные и передавать данные туда:)

TtT RrR @UNN4MED Битрикс разработчик на js обработчик события click для карточек сделать. у карт и модалок дата атрибуты должны быть с их уникальных значением. при нажатии у карт найти значение атрибута и передать в функцию, которая строит модалку.
функция делает запрос в базу, на php возвращается ответ в виде json с полной информацией товара, далее расставляешь информацию по структуре и вставляешь её в место вывода модалки. у модалки уникальное значение вставится в свой дата атрибут, равный дата атрибуту карты, и она откроется
моё - https://scake.up.railway.app/
на WordPress не работал, реализация на Vanilla JS. базы как таковой пока нет, из json файла достаю

Сергей @Summersby Fullstack В этом видео есть ответы

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь

Лучший ответ

Сергей Миронов Ответ

Одно модальное окно с разным контентом обычно делают так: на каждой карточке храните данные в data-* атрибутах или ID записи, а при клике заполняете один общий modal. Не нужно создавать отдельное модальное окно для каждого товара, если контент небольшой.

Пример разметки карточки:

&lt;button class="js-open-modal"
        data-title="Название товара"
        data-text="Краткое описание товара"
        data-price="1200 ₽"&gt;
  Подробнее
&lt;/button&gt;
 
&lt;div id="product-modal" class="modal" hidden&gt;
  &lt;button class="modal__close" type="button"&gt;×&lt;/button&gt;
  &lt;h2 class="modal__title"&gt;&lt;/h2&gt;
  &lt;div class="modal__text"&gt;&lt;/div&gt;
  &lt;div class="modal__price"&gt;&lt;/div&gt;
&lt;/div&gt;

<button class="js-open-modal" data-title="Название товара" data-text="Краткое описание товара" data-price="1200 ₽"> Подробнее </button> <div id="product-modal" class="modal" hidden> <button class="modal__close" type="button">×</button> <h2 class="modal__title"></h2> <div class="modal__text"></div> <div class="modal__price"></div> </div>

JavaScript:

const modal = document.querySelector('#product-modal');
 
document.addEventListener('click', (event) =&gt; {
  const button = event.target.closest('.js-open-modal');
  if (!button) return;
 
  modal.querySelector('.modal__title').textContent = button.dataset.title || '';
  modal.querySelector('.modal__text').textContent = button.dataset.text || '';
  modal.querySelector('.modal__price').textContent = button.dataset.price || '';
  modal.hidden = false;
});
 
document.querySelector('.modal__close').addEventListener('click', () =&gt; {
  modal.hidden = true;
});

const modal = document.querySelector('#product-modal'); document.addEventListener('click', (event) => { const button = event.target.closest('.js-open-modal'); if (!button) return; modal.querySelector('.modal__title').textContent = button.dataset.title || ''; modal.querySelector('.modal__text').textContent = button.dataset.text || ''; modal.querySelector('.modal__price').textContent = button.dataset.price || ''; modal.hidden = false; }); document.querySelector('.modal__close').addEventListener('click', () => { modal.hidden = true; });

Если контент большой, лучше передавать только ID записи и подгружать HTML через AJAX. Но для названия, цены, картинки и короткого описания data-* проще и быстрее. Важно не вставлять непроверенный HTML через innerHTML, если данные может редактировать пользователь без доверия.

В WordPress карточки можно заполнять данными из записи: заголовок через get_the_title(), описание через get_the_excerpt(), цену или характеристики через ACF. Если контент содержит HTML, передавайте не весь HTML в атрибуте, а храните скрытый блок внутри карточки и копируйте его в модалку при клике. Так меньше проблем с кавычками и экранированием. Обязательно сделайте закрытие по крестику, клику по фону и клавише Escape, иначе модальное окно будет неудобным на мобильных.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

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

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов Telegram Как добиться, чтобы Telegram прислал мне именно смс код, а не через звонок его диктовал? 0 ответов

Как сделать что бы в одно модальное окно выводился разный контент?

Дополнительно

Ответы:

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

Вам также может быть интересно

Ежедневно, круглосуточно