Ситуации, когда нужна форма обратной связи с получением данных из материала Joomla, могут быть самыми разными. Наиболее распространенная из них — необходимость создания формы, с помощью которой пользователи могут задавать вопросы по какой-то конкретной статье (например, в каталоге товаров при отсутствии системы комментирования или иного интерактивного функционала). О создании такой формы с помощью компонента Chronorofms 6 и пойдет речь.

Для начала определим задачу:

  1. У нас есть некая категория статей, которая выводится на сайте как «список материалов категории» и для которой нужна форма «задать вопрос». Форма у нас будет одна, и выводиться она будет после основного контента, но в теле статьи. Поэтому для нее необходима новая позиция в шаблоне материала Joomla.
  2. Нам нужно создать и настроить саму форму, включающую следующие поля, заполняемые пользователем: имя и e-mail пользователя, текст сообщения, средство защиты (капча).
  3. Тема — обязательное поле для любых сообщений, оправляемых с помощью форм Chronoforms. Ее будем получать с той страницы сайта, откуда пользователь отправляет свой вопрос, и получать мы ее будем несколькими способами, подробно рассматривая каждый из них. А затем, вы уже сами решите, какой из них наиболее оптимален для вашего случая.

Получилось три основных этапа.

Первый этап — подготовительный, связанный больше с самой Joomla, чем с Chronoforms. Он рассчитан скорее на новичков и для более опытных вебмастеров, возможно, не представляет интереса. Исходя из этого вы можете приступить сразу либо к созданию формы, либо к способам извлечения данных из материала joomla для формы обратной связи (если форма уже имеется). Остальным предлагаю начать с подготовки позиции для будущей формы.

Создание альтернативного шаблона материала Joomla и настройка его отображения на сайте

Компонент Chronoforms любой версии предусматривает размещение форм в любом месте сайта с помощью специального кода вставки. Для этого необходима установка и включение плагина (plg_chronoforms6).

В CF6 этот код вывода формы выглядит так: {chronoforms6}my_form_alias{/chronoforms6}.

У применения плагина есть как положительная, так и отрицательная стороны. Плюс в том, что можно при желании убирать/публиковать форму в статье и размещать ее абсолютно в любом месте. Минус же заключается в одном (и он довольно существенный): и публиковать, и убирать форму придется вручную, в каждой статье. Если таких статей сто и более, то этот процесс станет весьма трудоемким и займет больше времени, чем, к примеру, снятие с публикации модуля формы или замена в настройках какого-либо материала альтернативного шаблона на дефолтный.

В нашем случае будет создаваться альтернативный шаблон для материалов «подопытной» категории, в котором  мы определим позицию для публикации модуля с  будущей формой.

Первое, что нам понадобится — это файл www\templates\текущий_шаблон_сайта\templateDetails.xml. Здесь обозначим новую позицию (внутри раздела positions), присваивая ей имя и заключая в соответствующие теги:

    <position>cf6questions</position>

С этим файлом закончили. Его можно сохранять и закрывать.

Теперь нужно создать альтернативный шаблон материала Joomla дополнительно к уже имеющемуся дефолтному. Этот шаблон будем устанавливать в настройках нашей категории статей или любой другой статьи на сайте, где будет использоваться форма. Если же в каких-либо конкретных статьях «подопытной» категории необходимость в отображении формы отпадет, можно всегда в настройках самого материала выбрать дефолтный шаблон. (Настройки каждого материала имеют больший приоритет, чем настройки для всех материалов в списке категории, поэтому форма при замене шаблона в настройках статьи на дефолтный отображаться не будет).

Для создания альтернативного шаблона материала нужны копии файлов:

  1. www\components\com_content\views\article\tmpl\default.xml
  2. www\components\com_content\views\article\tmpl\default.php

если в текущем шаблоне сайта их нет, или копии файлов:

  1. www\templates\текущий_шаблон_сайта\html\com_content\article\default.xml
  2. www\templates\текущий_шаблон_сайта\html\com_content\article\default.php

если такие файлы уже есть в папке html шаблона.

Эти копии файлов нужно переименовать и оставить их здесь же, в папке html текущего шаблона сайта.

У меня здесь (www\templates\текущий_шаблон_сайта\html) получились такие файлы:

  1. Копия default.xml переименована на defCF6questions.xml
  2. Копия default.php — на defCF6questions.php

Открываем файл defCF6questions.xml. Здесь ничего особенного. Можно только добавить пояснения для себя на случай, если этот шаблон будет использоваться для одиночных статей (т. е. не в списках материалов категории или блогах) и его придется искать в списке типов пунктов меню. Я в своем файле изменила только атрибут title тега layout и получилось следующее:

 

Редактирование файла xml альтернативного шаблона материала joomla для формы CF6

Рис. 1

Сохраняем и закрываем этот файл.

Итак, мы переопределили основные файлы и создали своеобразную «заготовку» для альтернативного шаблона материала. Сразу же настроим его отображение на сайте.

Для настройки списка материалов категории открываем для редактирования соответствующий пункт меню, переходим во вкладку «Отображение» и сверху, в поле «Выбор макета», устанавливаем значение «defCF6questions».

 

Настройка альтернативного шаблона материала joomla для списка материалов категории

Рис. 2

Если форма нужна для одиночного материала, то также открываем соответствующий пункт меню, и во вкладке «Пункт меню» в поле «Тип пункта меню» щелчком по кнопке «Выбрать» находим в списке и устанавливаем наш шаблон.

 

Настройка пункта меню «Материал» для вывода альтернативного шаблона с будущей формой Chronoforms 6

Рис. 3

Для исключения/добавления статьи, представленной на сайте в списке материалов категории, из числа/в число тех, где будет отображена форма, нужно установить значение шаблона в настройках статьи в менеджере материалов Joomla. Для этого открываем статью для редактирования и во вкладке «Отображение» в поле «Альтернативный макет» выбираем соответствующее значение:

  1. «По умолчанию» (из компонента) — если форма не нужна, но для списка статей категории в меню выбран альтернативный шаблон «defCF6questions»
  2. «defCF6questions» — если для всего списка категории выбран шаблон «По умолчанию», а именно для этой статьи требуется отображение формы.

 

Настройка статьи в менеджере материалов Joomla с выбором альтернативного шаблона для формы Chronoforms 6

Рис. 4

Итак, мы создали альтернативный шаблон материала Joomla и настроили его отображение на сайте.

Создание и тестирование позиции для формы Chronoforms 6 в шаблоне материала Joomla

Теперь главное на этом подготовительном этапе  — создание позиции в нашем альтернативном шаблоне материала Joomla, где будет отображаться наша будущая форма обратной связи.

Открываем файл www\templates\текущий_шаблон_сайта\html\com_content\article\defCF6questions.php и вверху, где-нибудь после строчки:

    JHtml::_('behavior.caption');

помещаем следующий код:

    jimport( 'joomla.application.module.helper' );           // подключаем требуемый класс
    $module = JModuleHelper::getModules('cf6questions');     // заполняем массив модулями,
                                                             //название позиции берем из файла templateDetails.xml
    $attribs['style'] = 'none';

Затем ниже, в коде тела статьи или после закрывающих тегов, ищем место для размещения кода позиции. Неважно, где именно расположена позиция. Главное — чтобы в итоге не «сломалась» существующая разметка страницы.

Я расположила позицию после основного содержимого статьи, представленного этим блоком:

    <div itemprop="articleBody">
        <?php echo $this->item->text; ?>
    </div>

Вот код самой позиции:

    <?php foreach($module as $mod_item){ // перебираем в цикле и выводим по очереди все,
                                                  // что опубликовано в позиции
                      echo JModuleHelper::renderModule($mod_item, $attribs);
           } ?>

Его можно дополнительно обернуть в блок div, а можно оставить, как есть.

У меня получилось, так:

 

Редактирование файла php альтернативного шаблона материала joomla для формы CF6

Рис. 5

Сохраняем и закрываем файл defCF6questions.php. Позицию мы добавили и теперь можем проверить, что у нас получилось.

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

Я создала для теста вот такой модуль:

 

Создание и проверка модуля для тестирования позиции, добавленной в альтернативный шаблон материала joomla

Рис. 6

и проверила его работу на сайте:

 

Тестирование на сайте модуля с позицией для формы Chronoforms 6

Рис. 7

Все работает, как надо и на этом создание и тестирование позиции для формы Chronoforms в шаблоне материала Joomla завершено. Завершили и весь подготовительный этап.

В следующей статье мы создадим и настроим форму обратной связи в панели управления Chronoforms 6 со всеми полями, предназначенными для заполнения пользователем, а также опубликуем ее в позиции нашего альтернативного шаблона.

Хостинг TimeWeb

Комментарии
  • #
  • Степан
Здравствуйте! Если форма располагается в конце страницы материала, то после отправки соощения выбрасывает в начало страницы. Как сделать, чтобы после отправки сообщения месторасположение не изменялось?
  • #
  • Vilza
Здравствуйте.
Не совсем к компоненту вопрос, но постараюсь на него ответить.
Можно использовать js код в событии on submit или же вообще смотреть в сторону ajax-отправки формы.
Я на одной из форм использовала вот такой код (к сожалению уже не помню, где я его изначально взяла):
Код:<script>
window.smoothScrollTo = (function () {
var timer, start, factor;

return function (target, duration) {
var offset = window.pageYOffset,
delta = target - window.pageYOffset;
duration = duration || 1000;
start = Date.now();
factor = 0;

if( timer ) {
clearInterval(timer);
}

function step() {
var y;
factor = (Date.now() - start) / duration;
if( factor >= 1 ) {
clearInterval(timer); // stop animation
factor = 1; // clip to max 1.0
}
y = factor * delta + offset;
window.scrollBy(0, y - window.pageYOffset);
}

timer = setInterval(step, 10);
return timer;
};
}());

if (document.getElementById('medinterview'))
smoothScrollTo(document.getElementById('interview').offsetTop);
</script>

С jquery даже попроще будет вариант.
interview - это был дополнительный блок в альтернативном шаблоне статьи, где помимо формы было еще кое-какое динамическое содержимое. Можно на саму форму идентификатор повесить, но выглядеть будет не очень
  • #
  • Степан
Код не сработал, использовал другой вариант - включил отправку ajaх в форме
  • #
  • Vilza
Да, и сообщения я выводила не в системном блоке, а под формой, чтобы пользователь как раз видел подтверждение, ради которого страница вниз скроллилась.
  • #
  • Vilza
Ну, если бы не работал и я бы им лично не пользовалась бы, то не постила бы его сюда, однозначно :)
Допускаю, что может не работать, если размещен не последним в обработчике события submit
  • #
  • Денис
Доброго дня. Хотел уточнить у вас. Не могли бы вы помочь (конечно за оплату) сделать небольшую форму регистрации с подтверждением по почте (как реализовано в демо-форме регистрации) и последующим перенаправлением на определенную страницу после активации учетной записи (допустим для продолжения заполнения другой формы или тестирования). Очень надеюсь на вашу помощь...
Как можно с вами связаться? Спасибо.
  • #
  • s.elena133
Здесь уже отвечали на подобные вопросы.
Повторюсь: на данный момент заказы на выполнение этих работ не принимаются. В будущем, возможно, но однозначно не в ближайшее время.
Вы верно подметили, такая форма среди демок есть. А как переадресовать юзера с формы на форму, подробно описано в статье про пятерку https://chronoforms.net/articles/realizatsiya-qiwi-platezhej-po-protokolu-http-s-komponentom-chronoforms5. Согласна, букв много, но зато все, что вам нужно (если проблема именно в переадресации на другую форму с передачей туда данных).
Ну а если "хочется экзотики" :-) и не хочется мучиться самостоятельно, создайте на форуме топик конкретно по вашему вопросу. Там очень много народу, вам подскажут решение где-то в течение суток.
Добавить комментарий