Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #21 (permalink)  
Старый 20.09.2019, 19:11
Аспирант
Отправить личное сообщение для LingVist Посмотреть профиль Найти все сообщения от LingVist
 
Регистрация: 21.09.2010
Сообщений: 39

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

$(".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");
Ответить с цитированием
  #22 (permalink)  
Старый 20.09.2019, 19:41
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

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

@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+. В современном языке добавлено еще возможностей.
Ответить с цитированием
  #23 (permalink)  
Старый 20.09.2019, 20:04
Аспирант
Отправить личное сообщение для LingVist Посмотреть профиль Найти все сообщения от LingVist
 
Регистрация: 21.09.2010
Сообщений: 39

В моадльном окне, которое будет открываться, есть такой код
<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') }} и все работает
Ответить с цитированием
  #24 (permalink)  
Старый 20.09.2019, 20:36
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от LingVist
в ajax-запросе можно так писать и url: {{ route('product.show') }} и все работает
Оно будет работать только в том случае, если весь код что вы тут показываете, включая и js, это страница обрабатываемая шаблонизатором.
Ответить с цитированием
  #25 (permalink)  
Старый 20.09.2019, 21:00
Аспирант
Отправить личное сообщение для LingVist Посмотреть профиль Найти все сообщения от LingVist
 
Регистрация: 21.09.2010
Сообщений: 39

Это так, если вынести скрипт в отдельный файл, такой вариант не прокатит. Но на этот случай есть хороший пакет - https://github.com/aaronlord/laroute
Ответить с цитированием
  #26 (permalink)  
Старый 20.09.2019, 21:31
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от LingVist
Это так, если вынести скрипт в отдельный файл, такой вариант не прокатит.
Так надо было бы сразу и сказать, а то представленный сначала ajax запрос никаким боком к шаблону отношения не имеет и все далее я то представлял в контексте этого запроса, поэтому и задал вопрос как такое может быть.
Ответить с цитированием
  #27 (permalink)  
Старый 22.09.2019, 11:39
Аспирант
Отправить личное сообщение для LingVist Посмотреть профиль Найти все сообщения от LingVist
 
Регистрация: 21.09.2010
Сообщений: 39

laimas, в общем, так как я хотел сделать, не получилось. Может подскажете, как правильно сделать Быстрый просмотр как на этом сайте - https://likadress.ru/
Я посмотрел в исходном коже страницы, там файл модального окна пустой, данные грузятся в него после нажатия на кнопку Быстрый просмотр. Я так думаю, что после нажатия кнопки контроллер получает ID товара, выводит данные и отправляет в шаблон. Если это так, то как это реализовать?
Или может есть какие-то другие варианты?
Спасибо
Ответить с цитированием
  #28 (permalink)  
Старый 22.09.2019, 13:37
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Быстрый просмотр чего, то что показывается при наведении на изображение товара? Если да, то это уже есть на странице и показывается при этом событии, никаких асинхронных запросов не делается. Тут ведь нет никакого окна модального, это обычная панель. Ну а способов только 2: первый, это выводить сразу на страницу затем показывая/скрывая, либо выводятся сразу данные, которые затем используются при показе, второй, это запрашивают на сервере и выводят при наведении.
Ответить с цитированием
  #29 (permalink)  
Старый 22.09.2019, 14:07
Аспирант
Отправить личное сообщение для LingVist Посмотреть профиль Найти все сообщения от LingVist
 
Регистрация: 21.09.2010
Сообщений: 39

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

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

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

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

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

В общем, четыре дня уже маюсь, никак не соображу
Ответить с цитированием
  #30 (permalink)  
Старый 22.09.2019, 14:23
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

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

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как вывести данные JSON в аттрибут data-* wintersoft Общие вопросы Javascript 7 09.08.2018 10:15
как получить данные с другого сайта? dobush jQuery 2 19.01.2013 17:39
Как убрать боковой скрол в модальном окне? pahannew Элементы интерфейса 6 08.01.2013 13:13
Как получить данные переданные методом POST? layla Общие вопросы Javascript 3 13.12.2010 10:16
как получить данные из reader.xmlData lfs2008 ExtJS 3 02.11.2010 19:12