Как получить данные из БД и вывести в модальном окне

[LingVist]

Я в скрипте, когда буду передавать данные, полученные от контроллера, в шаблон

$(".product-preview, .stage").empty();
                        $.each(response[1], function() {
                           

                            $(".product-preview").append("<li><img src='{{ asset('img') }}/catalog/"+response[0].category_alias+"/"+this.img+"'></li>");

                            

                        });
                        $('.modal_details').addClass("show-modal");

[laimas]

В какой шаблон? Это РНР код шаблонизатора сервера.

@foreach($product->image as $item)
<li class="">
<img src="{{ asset('img') }}/catalog/{{ $product->category_alias }}/{{ $item->img }}" alt="">
</li>
@endforeach

это {{ asset('img') }} синтаксис его, вставка переданных в него значений в html код. Такой же синтаксис использует шаблонизатор Twig. Все шаблоны выполняет РНР, который находит это и производит подстановки.

А это JS

$.each(response[1], function() {
$(".product-preview").append("<li><img src='{{ asset('img') }}/catalog/"+response[0].category_alias+"/"+this.img+"'></li>");
});

Откуда на клиенте asset('img'), что это такое, и кто на что будет делать подмену? Нет такого в JS {{}}. Здесь это будет работать +response[0].category_alias+"/"+this.img+. В современном языке добавлено еще возможностей.

[LingVist]

В моадльном окне, которое будет открываться, есть такой код

<div class="product-image flex flex-between js-product-slider" data-start-position="0">
                            <ul class="product-preview">

                            </ul>
                            <div class="product-image-wrap">
                                <div class="product-slider slider owl-loaded owl-drag">
                                    <div class="owl-stage-outer">
                                        <div class="owl-stage stage" style="transform: translate3d(0px, 0px, 0px); transition: all 0s ease 0s; width: 1853px;">

                                         </div>
                                    </div>
                                </div>
                                <ul class="element-labels museo">
                                    <li><span class="new">Новинка</span></li>
                                </ul>
                                <a href="/#" data-pjax="0" data-controller="Fav" class="product-fav icon link-fav is-install" data-id="6291" onclick="return false;"></a>
                            </div>
                        </div>

Вот в ul с классом product-preview я буду подставлять миниатюры

$(".product-preview").append("<li><img src='{{ asset('img') }}/catalog/"+response[0].category_alias+"/"+this.img+"'></li>");

А в див с классом owl-stage большие картинки

$(".stage").append("<div class='owl'><div class='product-slide easyzoom is-ready'><a href='{{ asset('img') }}/catalog/"+response[0].category_alias+"/"+this.img+"' data-fancybox=''><img src='{{ asset('img') }}/catalog/"+response[0].category_alias+"/"+this.img+"' alt=''></a></div></div>");

{{ asset('img') }} можно и не вставлять, достаточно будет /img
Если Вас смущают скобки {{ }}, то в ajax-запросе можно так писать и url: {{ route('product.show') }} и все работает

[laimas]

в ajax-запросе можно так писать и url: {{ route('product.show') }} и все работает

Оно будет работать только в том случае, если весь код что вы тут показываете, включая и js, это страница обрабатываемая шаблонизатором.

[LingVist]

Это так, если вынести скрипт в отдельный файл, такой вариант не прокатит. Но на этот случай есть хороший пакет - https://github.com/aaronlord/laroute

[laimas]

Это так, если вынести скрипт в отдельный файл, такой вариант не прокатит.

Так надо было бы сразу и сказать, а то представленный сначала ajax запрос никаким боком к шаблону отношения не имеет и все далее я то представлял в контексте этого запроса, поэтому и задал вопрос как такое может быть.

[LingVist]

laimas, в общем, так как я хотел сделать, не получилось. Может подскажете, как правильно сделать Быстрый просмотр как на этом сайте - https://likadress.ru/
Я посмотрел в исходном коже страницы, там файл модального окна пустой, данные грузятся в него после нажатия на кнопку Быстрый просмотр. Я так думаю, что после нажатия кнопки контроллер получает ID товара, выводит данные и отправляет в шаблон. Если это так, то как это реализовать?
Или может есть какие-то другие варианты?
Спасибо

[laimas]

Быстрый просмотр чего, то что показывается при наведении на изображение товара? Если да, то это уже есть на странице и показывается при этом событии, никаких асинхронных запросов не делается. Тут ведь нет никакого окна модального, это обычная панель. Ну а способов только 2: первый, это выводить сразу на страницу затем показывая/скрывая, либо выводятся сразу данные, которые затем используются при показе, второй, это запрашивают на сервере и выводят при наведении.

[LingVist]

Да, я имел в виду быстрый просмотр товара.

Если использовать первый способ, то придется для каждого товара выводить сразу подробные данные, я правильно понял? Но если это так, то слишком много придется грузить.

А как сделать вторым способом?

Я пытался сделать так - сделал модальное окно, в котором шаблон карточки товара. Остается только подставить идентификатор нужного товара и все будет работать. Идентификатор я получил ajax-запросом, но вот как его передать в шаблон, не могу сообразить.

Еще я пробовал к каждой карточке приделать модальное окно, тогда вообще без проблем, но опять же, если товаров будет много, то и модальных окон будет куча.

В общем, четыре дня уже маюсь, никак не соображу

[laimas]

Не обязательно все сразу грузить, можно подгрузить после загрузки страницы.

А вторым способом так и делается - загружается/отображается по запросу. Нет ведь никакого окна, это панель, в которую что-то вставить проще паренной репы. Тут только два момента могут быть: 1) панель уже есть на странице, ответ запроса помещают в нее и показывают, 2) создается панель, в нее помещают ответ, показывают и удаляют после события. При этом запросы либо кешируют, либо панель не удаляют, а создают новые с запросами только для тех, у которых их нет.