Для реализации вывода табов из Bootstrap 4 в ModX вам потребуется выполнить несколько шагов.
1. Установка Bootstrap 4:
Вам необходимо загрузить и установить библиотеки Bootstrap 4 на ваш сервер или использовать ссылки на CDN-версию.
2. Создание шаблона для вывода табов:
Создайте новый шаблон в ModX для вывода табов. Откройте редактор ресурсов и создайте новый ресурс с типом "Шаблон пустой страницы". Внутри шаблона, добавьте необходимую структуру HTML и CSS классы, чтобы связать с табами Bootstrap 4.
3. Создание нового модуля для вывода табов:
Временное разделение логики и представления поможет вам в дальнейшей разработке. Создайте новый сниппет ModX и назовите его, например, "tabs".
<?php $output = ''; // Получение всех дочерних ресурсов $children = $modx->getCollection('modResource', array('parent' => $modx->resource->get('id'))); if (!empty($children)) { $output .= '<ul class="nav nav-tabs" role="tablist">'; foreach ($children as $child) { $output .= '<li class="nav-item">'; $output .= '<a class="nav-link" data-toggle="tab" href="#tab-' . $child->get('id') . '" role="tab">' . $child->get('pagetitle') . '</a>'; $output .= '</li>'; } $output .= '</ul>'; $output .= '<div class="tab-content">'; foreach ($children as $child) { $output .= '<div class="tab-pane" id="tab-' . $child->get('id') . '">'; // Вывод содержимого дочернего ресурса $output .= $modx->runSnippet('getPageContent', array('id' => $child->get('id'))); $output .= '</div>'; } $output .= '</div>'; } return $output; ?>
4. Добавление шорткода в ресурс:
Теперь можно добавить шорткод в требуемый ресурс, чтобы вывести табы.
В свойствах ресурса перейдите во вкладку "Параметры" и в поле "Сниппет" добавьте вызов созданного сниппета:
[[tabs]]
Нажмите "Сохранить", чтобы применить изменения.
Теперь при просмотре ресурса, вы должны увидеть табы, сгенерированные из дочерних ресурсов. Вы можете добавить или удалить дочерние ресурсы, и табы будут автоматически обновлены при каждом просмотре страницы.