0 Пользователей и 1 Гость просматривают эту тему.
  • 22 Ответов
  • 289 Просмотров
*

zeus07

  • Давно я тут
  • 711
  • 9 / 0
Всем привет  ^-^
Разрабатываю лендинг, свой кастомный шаблон. Некоторые материалы необходимо вывести в модальном окне, к примеру "Условия использования" и "Политику конфиденциальности".

Что сделал:
1. К шаблону подключил Bootstrap 5 modal:
Код
\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.modal', '.modal', []);

2. Сделал блок с выводом модального окна(пока тестовое, взято из документации Bootstrap 5):
Код
<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Далее пытаюсь понять, как правильно в модальное окно грузить содержимое материала. Буду рад, если кто-то сможет подсказать, спасибо.
*

b2z

  • Глобальный модератор
  • 7187
  • 776 / 0
  • Разраблю понемногу
Попробуй renderModal
Пример использования можно здесь посмотреть /administrator/components/com_cpanel/tmpl/cpanel/default.php

В качестве 'url' передавай ссылку на материал:
Код
\Joomla\CMS\Router\Route::_('index.php?option=com_content&view=article&id=1&tmpl=component')
Это ссылка на материал, ID которого равно единице.

В общем наверное вот так:
Код
use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Language\Text;
use Joomla\CMS\Router\Route;

$modalHTML = HTMLHelper::_(
    'bootstrap.renderModal',
    'myModal',
    [
        'title'      => Text::_('MY_MODAL'),
        'url'        => Route::_('index.php?option=com_content&view=article&id=1&tmpl=component'),
        'bodyHeight' => 70,
        'modalWidth' => 80,
        'footer'     => '<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">' . Text::_('CLOSE_MODAL') . '</button>',
    ]
);

<a data-bs-target="#myModal" class="mybuttonclass" title="<?php echo Text::_('MY_BUTTON'); ?>" data-bs-toggle="modal" role="button">
    <?php echo Text::_('MY_BUTTON'); ?>
</a>

<?php echo $modalHTML; ?>
*

zeus07

  • Давно я тут
  • 711
  • 9 / 0
Ага, спасибо. Пример рендереа модального окна нашёл. Единственное, мне не совсем понятно, где передавать ссылку.
Чуть подробнее объясню.
Ссылка на разрабатывамемый сайт: https://club.artcolorit.com/

Там есть блок Наши игры. При клике на Подробнее хочу рендерить модальное окно и в нём текст нужной статьи. Это будет примерно вот так выглядеть: https://prnt.sc/20ngwem. Тот же принцип хочу использовать и при клике на ссылки "Условия использования" и "Политика конфиденциальности".

Где именно прописывать код для рендера? В index.php? А то надо как-то динамически получается рендерить контент
*

b2z

  • Глобальный модератор
  • 7187
  • 776 / 0
  • Разраблю понемногу
Цитировать
Где именно прописывать код для рендера? В index.php? А то надо как-то динамически получается рендерить контент]Где именно прописывать код для рендера? В index.php? А то надо как-то динамически получается рендерить контент
Ну я написал - передавать в параметре url ссылку на материал. Привёл выше пример кода.
*

zeus07

  • Давно я тут
  • 711
  • 9 / 0
Ну я написал - передавать в параметре url ссылку на материал. Привёл выше пример кода.
Да, я понимаю. Пытаюсь как раз понять, как именно динамически передать URL нужного материала. Прописать как-то так ссылку в нужном месте:
Код
<a href="index.php?option=com_content&view=article&id=2&catid=2" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Подробнее</a>

И по JS забирать содержимое атрибута href и подставлять в параметр URL рендера? Или как-то иначе?
*

b2z

  • Глобальный модератор
  • 7187
  • 776 / 0
  • Разраблю понемногу
*

zeus07

  • Давно я тут
  • 711
  • 9 / 0
А кто знает, какой нужный, а какой нет? Как они в список попадают?
В блоке Наши игры там можно вручную прописать данные ссылки и по клику передавать уже. Этот блок у меня сделан через модуль, обычный HTML
*

b2z

  • Глобальный модератор
  • 7187
  • 776 / 0
  • Разраблю понемногу
Понятно. Ну тогда действительно вопрос.
Цитировать
И по JS забирать содержимое атрибута href и подставлять в параметр URL рендера?
Так не получится. renderModal - это PHP.

Я вижу тут такое решение - написать простенький модуль и там в макете уже выводить. В параметрах модуля сделать возможность выбора материалов, или по простому ID материалов через запятую ^-^
*

zeus07

  • Давно я тут
  • 711
  • 9 / 0
Понятно. Ну тогда действительно вопрос.Так не получится. renderModal - это PHP.

Я вижу тут такое решение - написать простенький модуль и там в макете уже выводить. В параметрах модуля сделать возможность выбора материалов, или по простому ID материалов через запятую ^-^
То есть именно модуль, котоырй будет рендерить модальное окно с нужным контентом? Ну это да, в целом получается, что можно под каждую нужную ссылку, при клике на которую я буду показывать модальное окно, вывести свой модуль, и в каждом модуле будет 2 параметра: ID модалки и выбор материала получается.

Ну ID модалки подставить конечно проблем не составить. А поле с выбором материала можно где-то посмотреть?
*

b2z

  • Глобальный модератор
  • 7187
  • 776 / 0
  • Разраблю понемногу
Цитировать
Ну это да, в целом получается, что можно под каждую нужную ссылку, при клике на которую я буду показывать модальное окно, вывести свой модуль, и в каждом модуле будет 2 параметра: ID модалки и выбор материала получается.
Зачем несколько модулей? В параметрах модуля сделать возможность выбора нескольких материалов.

Цитировать
А поле с выбором материала можно где-то посмотреть?
Да сделайте просто текстовое поле, где будут прописывать ID. Либо тогда писать своё поле, где можно из списка накликать материалы.
*

zeus07

  • Давно я тут
  • 711
  • 9 / 0
Зачем несколько модулей? В параметрах модуля сделать возможность выбора нескольких материалов.
Стараюсь понять вашу идею. При клике на одну ссылку должна же выводиться модалка с одним определённым материалом. Для чего возможность вывода нескольких материалов?
*

zeus07

  • Давно я тут
  • 711
  • 9 / 0
В общем, сделал модуль, поставил на сайт, удалось вывести контент статьи в модальном окне.

Если кликните на этот блок: https://prnt.sc/20ooiut - то увидите. Единственное, пока не могу разобраться с высотой самого окна, почему-то постоянно прокрутка имеется.

В админке выглядит вот так: https://prnt.sc/20op16u

Тут я получается прописал ID самого модального окна, и ID статьи, которую надо вывести. По поводу вашей идеи не очень понял, как можно сделать.
*

effrit

  • Легенда
  • 10094
  • 1112 / 13
  • effrit.com
я бы просто в ссылку вставлял data-url и по классу ссылки аяксом тянул саму статью, загружал полученное содержимое в 1 блок модального окна и потом его показывал.
типа все статьи динамически грузятся в 1 блок по клику на ссылке, ибо зачем на странице скрытый блок с "политикой конфиденциальности" и прочей требухой?
*

b2z

  • Глобальный модератор
  • 7187
  • 776 / 0
  • Разраблю понемногу
Стараюсь понять вашу идею. При клике на одну ссылку должна же выводиться модалка с одним определённым материалом. Для чего возможность вывода нескольких материалов?
Чтобы в цикле пройтись и вывести все разом, а не делать 4 модуля.

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

@effrit
Цитировать
ибо зачем на странице скрытый блок с "политикой конфиденциальности" и прочей требухой?
А с чего ты взял, что они в скрытом блоке? Подгрузка по клику.
*

zeus07

  • Давно я тут
  • 711
  • 9 / 0
Чтобы в цикле пройтись и вывести все разом, а не делать 4 модуля.
Буду рад, если подскажете, как это правильно сделать, и к какому условию привязаться.

Привожу код файла default.php
Код
defined('_JEXEC') or die;

use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Language\Text;
use Joomla\CMS\Router\Route;

$modId = $module->id;
$modalId = $params->get('modal-id');
$articleId = $params->get('article-id');


$modalHTML = HTMLHelper::_(
    'bootstrap.renderModal',
    $modalId,
    [
        'url'        => Route::_('index.php?option=com_content&view=article&id='. $articleId .'&tmpl=component'),
        'height'     => '100%',
        'width'      => '100%',
        'bodyHeight' => 100,
        'modalWidth' => 100
    ]
);
?>

<?php echo $modalHTML; ?>

И на всякий случай прикрепляю сам архив с модулем
*

b2z

  • Глобальный модератор
  • 7187
  • 776 / 0
  • Разраблю понемногу
Я правильно понял, что модуль выводится внутри кнопки "Подробнее"? Тогда всё правильно сделано.

По поводу высоты самого окна - попробуй убрать 'height'  и 'width' и оставить 'bodyHeight'  => '70', 'modalWidth'  => '80'.
*

zeus07

  • Давно я тут
  • 711
  • 9 / 0
Я правильно понял, что модуль выводится внутри кнопки "Подробнее"? Тогда всё правильно сделано.
Кнопка Подробнее - это ссылка на вызов модального окна по сути. Я не совсем понял идею о прохождении по циклу. Как определять, какую статью подставлять.

По поводу высоты самого окна - попробуй убрать 'height'  и 'width' и оставить 'bodyHeight'  => '70', 'modalWidth'  => '80'.
Пробовал так, окно такое же, но контент по ширине в 2 раза меньше
*

b2z

  • Глобальный модератор
  • 7187
  • 776 / 0
  • Разраблю понемногу
Кнопка Подробнее - это ссылка на вызов модального окна по сути. Я не совсем понял идею о прохождении по циклу. Как определять, какую статью подставлять.

Идея была такой:

Код
$ids = explode(',', $params->get('articles'));

foreach ($ids as $id)
{
    $modalHTML = HTMLHelper::_(
        'bootstrap.renderModal',
        'modal' . $id,
        [
            'url'        => Route::_('index.php?option=com_content&view=article&id=' . $id . '&tmpl=component'),
            'height'     => '100%',
            'width'      => '100%',
            'bodyHeight' => 100,
            'modalWidth' => 100
        ]
);

<?php echo $modalHTML; ?>
}

Пробовал так, окно такое же, но контент по ширине в 2 раза меньше
Мхм, ну надо поиграться с этими параметрами. Может CSS какой добавить ещё.

*

zeus07

  • Давно я тут
  • 711
  • 9 / 0
Идея была такой:

Код
$ids = explode(',', $params->get('articles'));

foreach ($ids as $id)
{
    $modalHTML = HTMLHelper::_(
        'bootstrap.renderModal',
        'modal' . $id,
        [
            'url'        => Route::_('index.php?option=com_content&view=article&id='. $id .'&tmpl=component'),
            'height'     => '100%',
            'width'      => '100%',
            'bodyHeight' => 100,
            'modalWidth' => 100
        ]
);

<?php echo $modalHTML; ?>
}
Касательно идеи. Да, по прохождению по циклу я понимаю. Но как подставлять значение статьи в ссылку нужную? Вот в этом вопрос  ^-^
Мхм, ну надо поиграться с этими параметрами. Может CSS какой добавить ещё.
Да, надо будет ещё попробовать, в крайнем случае CSS добавлю, то уже не проблема)
*

zeus07

  • Давно я тут
  • 711
  • 9 / 0
Аааа, стоп, дошло. Увидел, что в имени модального окна добавляется ID статьи  ^-^

Попробую так сделать, спасибо)
*

zeus07

  • Давно я тут
  • 711
  • 9 / 0
Заработало! Огромное спасибо.
С высотой решил вопрос, просто прописав у параметра height значение в пикселях.

Привожу итоговый код, возможно кому-то пригодится
Код
defined('_JEXEC') or die;

use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Language\Text;
use Joomla\CMS\Router\Route;

$modId = $module->id;
$modalId = $params->get('modal-id');
$articleIds = explode(',', $params->get('article-id'));

foreach ($articleIds as $articleId) {
   $modalHTML = HTMLHelper::_(
      'bootstrap.renderModal',
      $modalId . $articleId,
      [
         'url' => Route::_('index.php?option=com_content&view=article&id='. $articleId .'&tmpl=component'),
         'height' => '700px',
         'width' => '100%',
         'bodyHeight' => 100,
         'modalWidth' => 100
      ]
   );
   echo $modalHTML;
}
?>

Ссылка на вызов модалки такая:
Код
<a href="#" data-bs-toggle="modal" data-bs-target="#modal2">Подробнее</a></div>
Параметр data-bs-target содержит ID модального окна, которое вы прописали в модуле и ID статьи, которую необходимо вывести

Прикрепляю модуль также, пользуйтесь
*

b2z

  • Глобальный модератор
  • 7187
  • 776 / 0
  • Разраблю понемногу
*

zeus07

  • Давно я тут
  • 711
  • 9 / 0
А модуль по факту выводится в какую-то неиспользуемую позицию?
Да в целом всё равно, но да, сделал под него позицию отдельно. Сейчас решаю другой вопрос - это применение стилей к iframe, как оказалось, из общего файла стилей прописанные стили не применяются
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Некорректный вывод блога

Автор valexi1980

Ответов: 5
Просмотров: 149
Последний ответ 06.11.2021, 09:53:31
от draff
Call to a member function getContent() on null при добавлении материала

Автор AlexP750

Ответов: 3
Просмотров: 129
Последний ответ 29.09.2021, 09:54:32
от b2z
Перенесено: Вывод хитов в одном из макетов компонента com_tags в Joomla4

Автор b2z

Ответов: 0
Просмотров: 66
Последний ответ 17.09.2021, 09:41:08
от b2z