Александр Янк

Позвольте переписать ваш чанк ajaxForms:

{'!AjaxForm' | snippet : [
    'form' => $form,
    'hooks' => $hooks !: 'email,FormItSaveForm',
    'emailSubject' => $emailSubject !: 'Тема письма',
    'emailTo' => $emailTo !: $_modx->config.callback_email,
    'validationErrorMessage' => $validationErrorMessage !: 'В форме содержатся ошибки!',
    'successMessage' => $successMessage !: '<div class="name">Спасибо</div><p>Ваше сообщение успешно отправлено</p>',
    'vTextMaxLength' => $vTextMaxLength !: '<div>Проверьте правильность заполнения</div>',
    'vTextMinLength' => $vTextMinLength !: '<div>Проверьте правильность заполнения</div>',
    'vTextRequired' => $vTextRequired !: 'Это поле обязательно для заполнения',
    'validate' => $validate !: 'name:required',
    'formName' => $formName !: 'Имя формы',
    'formFields' => $formFields !: 'name,pageId,pagetitle,email,message,file',
]}

Так ведь намного лучше

Выложу свой способ управления множеством форм для сниппета ajaxForm, может пригодится.

Создаём чанк ajaxForms:

{if !$form} {set $form = ''}{/if}
{if !$hooks} {set $hooks = 'email,FormItSaveForm'}{/if}
{if !$emailSubject} {set $emailSubject = 'Тема письма'}{/if}
{if !$emailTo} {set $emailTo = $_modx->config['callback_email']}{/if}
{if !$validationErrorMessage} {set $validationErrorMessage = 'В форме содержатся ошибки!'}{/if}
{if !$successMessage} {set $successMessage = '<div class="name">Спасибо</div><p>Ваше сообщение успешно отправлено</p>'}{/if}
{if !$vTextMaxLength} {set $vTextMaxLength = '<div>Проверьте правильность заполнения</div>'}{/if}
{if !$vTextMinLength} {set $vTextMinLength = '<div>Проверьте правильность заполнения</div>'}{/if}
{if !$vTextRequired} {set $vTextRequired = 'Это поле обязательно для заполнения'}{/if}
{if !$validate} {set $validate = 'name:required'}{/if}
{if !$formFields} {set $formFields = 'name,pageId,pagetitle,email,message,file'}{/if}
{if !$formName} {set $formName = 'Имя формы'}{/if}
{if !$validationErrorMessage} {set $validationErrorMessage = 'В форме содержатся ошибки!'}{/if}

[[!ajaxForm?
	&form=`{$form}`
	&hooks=`{$hooks}`
	&emailSubject=`{$emailSubject}`
	&emailTo=`{$emailTo}`
	&validationErrorMessage=`{$validationErrorMessage}`
	&successMessage=`{$successMessage}`
	&vTextMaxLength=`{$vTextMaxLength}`
	&vTextMinLength=`{$vTextMinLength}`
	&vTextRequired=`{$vTextRequired}`
	&validate=`{$validate}`
	&validationErrorMessage=`{$validationErrorMessage}`
	&formName=`{$formName}`
	&formFields=`{$formFields}`
	&fieldNames=`{$fieldNames}
    `
]]

Это единый чанк, в котором вызывается сниппет ajaxForm с необходимыми параметрами.

В моём случае каждая отдельная форма — это отдельный чанк. Если эти чанки мало чем различаются, то можно использовать extends из fenom, переписывая лишь изменяющиеся значения, а остальное не трогать.

И далее в шаблоне страницы вызов нужной формы:

{include 'ajaxForms' 
    form='callback'
    emailSubject='Обратный звонок'
    validate='name:required,phone:required'
    formFields='name,phone,pagetitle'
    formName='Обратный звонок'
}

В нём мы подменили значения, передающиеся в чанк ajaxForm.

Пример чанка callback с формой:

<div style="display: none;" id="{block 'id'}callback{/block}" class="popup">
    <div class="title">{block 'title'}Заказать обратный звонок{/block}</div>
    <div class="desc">{block 'desc'}Оставьте заявку, и мы свяжемся с вами в самое ближайшее время{/block}</div>
    <form role="form" method="POST" action="[[~[[*id]]]]" enctype="multipart/form-data">
        <input type="hidden" name="pagetitle" value="[[*pagetitle]] ([[*id]])">
            
        <input type="text" name="name" value="[[!+fi.name]]" placeholder="Ваше имя" required="required" />
        <span class="error error_name">[[+fi.error.name]]</span>
        
        <input type="tel" name="phone" value="[[!+fi.phone]]" placeholder="Ваш телефон" required="required" />
        <span class="error error_phone">[[+fi.error.phone]]</span>
        
        <div class="privacy">Отправляя заявку, Вы соглашаетесь на обработку персональных данных
согласно <a href="{29|url}">Пользовательскому соглашению</a></div>
        
        <button class="button-yellow" type="submit" value="{md5(rand())}" name="submit">Отправить</button>
    </form>
</div>

Если нужно вызвать похожую форму но с другим заголовком и другими параметрами, то создадим чанк question, который наследует чанк callback:

{extends 'callback'}

{block 'id'}question{/block}
{block 'title'}Задать вопрос{/block}
{block 'desc'}Задайте свой вопрос, и мы с вами свяжемся{/block}

И вызов этой формы в шаблоне страницы:

{include 'ajaxForms' 
    form='question'
    emailSubject='Задать вопрос'
    validate='name:required,phone:required'
    formFields='name,phone,pagetitle'
    formName='Задать вопрос'
}

Таким образом, для всех форм мы можем задать единые параметры вызова сниппета ajaxForm, и при необходимости перезаписать их. А также под каждую форму либо создать отдельные чанки, либо унаследовать от одного чанка кучу других с индивидуальными параметрами.

Дополнительно я скрываю уведомления jgrowl js-скриптом:

$(document).on('af_complete', function(event, response) {
    if (response.success) {
        $.fancybox.close();

        $.fancybox.open({
        	src  : '#popup-success',
        	type : 'inline',
        	opts : {
        		afterShow : function( instance, current ) {
        			// console.info( 'done!' );
        		}
        	}
        });
    } else {
        for (var prop in response.data) {}
    }
    response.message='';
});

Все уведомления об ошибках показываются под полями форм, в коде span c классом error. А если форма успешно отправлена, то с помощью скрипта выше мы скрываем popup-форму, если она была открыта, и показываем другое popup-окно:

<div style="display: none;" id="popup-success" class="popup">
    <div class="title">Данные успешно отправлены</div>
    <div class="success">
        <img src="/assets/img/success.png" alt="">
    </div>
</div>

Оно же всплывает и при отправке обычных не popup-форм. Да, насчёт popup-окон, актуально при использовании flexbox3.

Спасибо большое, искал подходящий canonical, а тут вы на Fenom'e яркий пример привели, спасибо большое:

<link rel="canonical" href="{$_modx->makeUrl($_modx->resource.id, '', '', 'full')}">

1.

{$_modx->resource['id'] | url}

2. В форму добавляете скрытое поле

<input type="hidden" name="page" value="{$_modx->resource['id']}"/>

а в чанке письма уже

{$page | url}

На всякий случай презентация

Это из-за этого. Можно закомментировать пока не исправят. Не думаю, что это повлияет на безопасность.

[[!pdoPage?
	&element=`pdoResources`
	&loadModels=`ms2gallery`
	&class=`msResourceFile`
	&tpl=`@INLINE <a href="[[+url]]" target="_blank"><img src="[[+120x90]]" /></a>`
	&where=`{"parent": СЮДА ID РОДИТЕЛЯ,"active":1}`
	&limit=`10`
	&sortby=`id`
	&sortdir=`ASC`
	&leftJoin=`{
		"120x90":{"class":"msResourceFile","alias":"120x90", "on":"120x90.parent=msResourceFile.id AND 120x90.path LIKE '%/120x90/'"}
	}`
	&select=`{
		"msResourceFile":"*",
		"120x90":"120x90.url as 120x90"
	}`
]]
[[!+page.nav]]

Заменить «СЮДА ID РОДИТЕЛЯ» на реальный ID, подставить свои значения по размерам изображений.

Да, это пример взятый из документации с pdoPage (постраничной навигацией), можно вывести просто через pdoResources

Для fenom:

{set $canonical_url = $_modx->makeUrl($_modx->resource.id, '', '', 'full')}

<link rel="canonical" href="{$canonical_url}" />
<meta property="og:url" content="{$canonical_url}" />

Тегами modx:

<link rel="canonical" href="[[~[[*id]]? &scheme=`full`]]" />
<meta property="og:url" content="[[~[[*id]]? &scheme=`full`]]" />

Или, например, вот так (не помню для чего, но как-то возникла проблема с предыдущим вариантом, которая решилась нижеописанным примером):

[[++site_url]][[*id:isnot=`[[++site_start]]`:then=`[[~[[*id]]]]`]]

$modx->regClientStartupHTMLBlock('<meta name="viewport" content="width=device-width, initial-scale=1">');

Подробнее (eng)

<?php
	if ($modx->event->name != 'OnManagerPageInit') return;
	$modx->regClientCSS('/путь/media.css');