MODX Demo bar — демо бар для демонстрации шаблонов / верстки

demo bar MODX Revo

В этом уроке поговорим как внедрить Demo bar в MODX который мы делали на прошлом уроке.

Добавление демо бара по шагам

Шаг 1. Скачиваем архив с исходниками

Прейдите в прошлый урок: Демо бар для демонстрации шаблонов / верстки (ссылка откроется в новом окне) и скачайте zip архив с исходниками и распакуйте его.

Шаг 2. Заливаем файлы на сервер

Заливаем по FTP все файлы (все кроме html файлов — в общем папку assets со всем ее содержимым) в корень сайта.

Файлы демо бара

Шаг 3. Создаем ресурс для демонстрации

Создаем ресурс (страницу) с названием demo, задаем ей пустой шаблон, пишем Псевдоним: demo, переходим во вкладку Настройки.

Создаем страницу для демонстрации

На данной вкладке:

  • отключаем html редактор
  • Замораживаем URL: demo (особенно если находиться в подпапке).
  • В общем настройки делаете как на скрине ниже. После чего в поле содержимого  копируем весь код из html файла (demo.html) и сохраняем.

Создаем страницу для демонстрации - настройки

В зависимости от настройки сайта, возможно потребуется поменять пути до спрайта, css и js — поставить впереди /.

Шаг 4. Предаем данные

В моем случае передается заголовок и ссылка которая подгружается в фрейм. Предается все через ссылку с URL параметрами, пример такой ссылки:

<a class="btn btn-warning" href="demo?data-title=Заголовок-демонстрационной-страницы&data-url=URL-демонстрационной-страницы" target="_blank" rel="noopener">Посмотреть демо</a>

Следовательно в зависимости от вашего шаблона и функционала передать можно через TV поля, MIGX и т.д. Лично мне нужно добавлять кнопку-ссылку прямо в контент (content) с html редактором TinyMSE RTE.

Поэтому для этих целей, я написал небольшой плагин для TinyMSE RTE под названием customlinkbutton, со следующим JS:

/**
 * Copyright (c) Tiny Technologies, Inc. All rights reserved.
 * Licensed under the LGPL or a commercial license.
 * For LGPL see License.txt in the project root for license information.
 * For commercial licenses see https://www.tiny.cloud/
 *
 * Version: 0.0.1 (2024-16-03)
 */
// Создаем плагин customlinkbutton
tinymce.PluginManager.add('customlinkbutton', function(editor, url) {
    // Добавляем кнопку в панель инструментов
    editor.ui.registry.addButton('customlinkbutton', {
        text: 'Вставка Demo',
        icon: 'preview',
        onAction: function() {
            showDialog(editor);
        }
    });

    // Функция отображения диалогового окна
    function showDialog(editor) {
        editor.windowManager.open({
            title: 'Вставка Demo',
            body: {
                type: 'panel',
                items: [
                    {
                        type: 'input',
                        name: 'url',
                        label: 'Ссылка (data-url)'
                    },
                    {
                        type: 'input',
                        name: 'title',
                        label: 'Название (data-title)'
                    }
                ]
            },
            buttons: [
                {
                    type: 'cancel',
                    text: 'Закрыть'
                },
                {
                    type: 'submit',
                    text: 'Вставить',
                    primary: true
                }
            ],
            onSubmit: function(api) {
                // Получаем значения из формы
                const urlValue = api.getData().url;
                const titleValue = api.getData().title;

                // Создаем HTML-код для вставки
                const linkHtml = `<p><a class="btn btn-warning" target="_blank" rel="noopener" href="https://bootstrapdocs.ru/demo?data-title=${titleValue}&data-url=${urlValue}">Посмотреть демо</a></p>`;

                // Вставляем код в редактор
                editor.insertContent(linkHtml);

                // Закрываем диалоговое окно
                api.close();
            }
        });
    }
});

Не забудьте поправить HTML-код для вставки, под себя. Так же включить плагин (tinymcerte.plugins) и добавить кнопку в редактор (tinymcerte.toolbar1).

Если все правильно сделали, то в панели TinyMSE появиться вот такая кнопка:

Кнопка вставки DEMO

А после ее нажатия должно выплывать вот такое окно:

Окно для вставки DEMO

Все) Как все это работает можно можно посмотреть например здесь: https://bootstrapdocs.ru/examples/header.

Просмотр демо

Не получается самостоятельно внедрить DEMO бар или нужна его доработка, пишите в VK или телегу.

Поделиться с друзьями
Алексей

Веб-дизайнер и SEO оптимизатор. Занимаюсь созданием сайтов с 2010 года и их продвижение с 2012 года!

Оцените автора
( Пока оценок нет )
Web-Revenue.ru
Добавить комментарий