11 апреля 2022 в 10:29
Добрый день.
Сейчас загружаются ноды или вебформы с помощью "use-ajax" - встроенными в ядро библиотеками.
Хочется добавить что-то более интересное.
Например, в Drupal 7 это можно было делать с помощью colorbox_node и достаточно шустро работало.
Попробовал модуль colorbox_load, который работает через NG Lightbox, которому достаточно указать ссылку. Ни по одной ссылке этот NG Lightbox не грузит. Похоже, что его забросили.
Еще пробовал Colorbox simple load - он грузит вообще всю ноду с футерами и шапкой.
Не подскажите какое-нибудь рабочее решение для Colorbox или Slick?
Тема используется Bootstrap 4.
Комментарии
Не знаю я пока рабочего решения через кликбилдинг без быдлокодинга.
Получается через use-ajax - пользуйстесь.
Еще вариант: вывести блок вебформы вниз старницы, задать ему по умолчанию display: none и "появлять" по кнопке Заказа. Можно даже с параметрами, например цены товара. Не могу написать точный код, но думаю на JS можно состряпать.
Добавьте стили и будет вам поинтереснее.
Зачем городить,если коробочного решения хватает?
Bootstrap модальный окна случайно не подходят?
Colorbox мельком видел, но не знаком.
Может вариант ниже поможет.
Тоже модальные окна сейчас делаю. Встроенный ajax хорошая вещь использую там где надо. Только почему то иногда он Title не загружает в таксономии и в нодах (пишет вместо тайтлов "Array").
Выбор пал на Bootstrap модальные окна так, как немного знаком с ними.
И в итоге в моем случае Bootstrap модальные окна подошли. Создал вьюху, где выводятся некие ноды в виде карточек с кнопками и картинкой. Во этой же вьюхе прописал классы модальные Bootstrap. Таким образом при генерации карточек добавляются классы модального окна для кнопок и картинок, что бы они были триггерами для окна.
<a href="#item{{ nid }}" class="thumbnail btn btn-default" role="button" data-toggle="modal">
<img src="{{ field_img }}" class="img-responsive" alt="{{ title }}">
</a>
<div class="caption">
<p><h2>
<a href="#item{{ nid }}" class="btn btn-default" role="button" data-toggle="modal">{{ title}}</a>
</h2></p>
</div>
</div><br>
У меня тема на Bootstrap 3.
В еще одном блок-вюхе основной вьюхи создал данные, которые нужно помещать в модальные окна. Там тоже прописал классы модальные. И потом этот блок вставил в подвал основного представления. Этот контент на странице будет скрыт благодаря классам бутстрапа, ведь это данные для вставки окна, они подгружаются по триггеру.
Конкретный код зависит от того какие поля выводить надо и каких нод. В моем случае нужно было вывести не столько информацию основных нод, сколько информацию из связанных нод. Пригодился модуль Views Field View https://www.drupal.org/project/views_field_view.
У меня в модальном окне надо выводить картинку и некоторые поля из основной ноды, а в низу далее выводить список нод на которые ссылаются эти основные ноды. Поэтому код такой получился.
Это код основных данных для модалов. В него вставляется код из третей вьюхи (если есть контент на который ссылается нода).
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<a href="" class="close btn btn-default" role="button" data-dismiss="modal">×</a>
<h4 class="modal-title">{{ title }}</h4>
</div>
<div class="modal-body">
{{ view }}
</div>
<div class="modal-footer">
<a href="" class="btn btn-default" role="button" data-dismiss="modal">Закрыть</a>
</div>
</div>
</div>
</div>
В общем там не так сложно. В будущем есть задача вставлять в эти модальные окна несколько картинок из ноды и показать маленькой каруселькой. В общем модальный окна теперь есть. Дальше теперь надо думать, как вставлять в них тот или иной контент (текст, видео, таблицы, карсусели, аккордионы, табы) и генерировать соответствующие представления-вьюсы.