Как загружать информацию о продукте при открытии в модальном окне?
Есть обычный каталог с товарами. На страницу выводится примерно 20 товаров за один раз.
Для товара доступно две кнопки "быстрый просмотр" и "подробное описание"
"Подробное описание" - открывается новая страница с описанием товара
"быстрый просмотр" - должно открываться модальное окно с описанием товара на той же странице.
Такой вопрос: Когда загружать данные для модального окна.
1) Во время загрузки страницы (для каждого товара хранить своё скрытое модальное окно с уже заполненной информацией)
2) Загружать данные с помощью ajax при открытии модального окна. В окне показывать preloader, пока грузятся данные.
3) Загружать данные с помощью ajax при наведении мышкой на товар, независимо от того, откроет ли пользователь модальное окно.
4) ???
4) Загружать данные с помощью ajax при открытии модального окна. В окне показывать ту информацию, что уже была загружена (1 картинка, название, теги, etc) списком товаров + плейсхолдеры там, где нужно грузить информацию (full info, больше картинок, etc)
и 1, и 2 можно, только для 1 не обязательно плодить под каждый товар модальное окно, можно по клику по кнопке быстрого просмотра передавать данные в одно и то же модальное окно
как уже написали - аяксом грузить в модалку данные неплохой вариант, однако если таких данных не очень много, их можно хранить в дата атрибутах кнопки "быстрый просмотр" и при клике заполнять поля модалки этими данными. Плюсы только в случае небольшого объема данных, но чаще всего так и есть, данных там 2 строчки описания и линк на 2-3 картинки.
Тоже кстати как вариант неплохой, но только если меняется заголовок\цена\картинка\краткое описание
Если же там надо подгружать кучу параметров то уже нет.
Картинка все равно будет подгружаться только в модалке из data-attr (так что общий вес исходной страницы не меняется)
я за второй вариант
1 - на странице 20 товаров и в невидимом блоке грузится подробная информация, большой объем страницы, плохо
3 - захочет ли юзер открыть "быстрый просмотр" или нет мы не знаем - опять же грузится объем, плохо (не забываем про мобильный тырнет)
Потому делаю так - тыкаем в быстрый, ajax запрос на сервер получает информацию и показываем в модалке
