Расширение возможностей компонента TicketForm и добавление своих полей

В целом задача состоит в том, чтобы при смене родителя (секции с Тикетами/Категориями), у нас менялся подбор необходимых полей или целых блоков или даже набора параметров сниппета TicketForm.
Итак, сперва необходимо создать пару секций с Тикетами,
- Мероприятия с алиасом events
- Услуги с алиасом services
процедура очень проста:
Далее, шаг второй, берем вызов самого сниппета TicketForm и подставляем в него вот такую конструкцию:
data-name="[[+alias]]"
Получится так:
<option value="[[+id]]" [[+selected]] data-name="[[+alias]]">[[+pagetitle]]</option>
По сути мы только лишь внесли единственное изменение, которое рассмотрим чуть ниже.
Шаг третий, копируем (пример) вот этот код JavaScripts:
Hash = { get: function () { var vars = {}, hash, splitter, hashes; if (!this.oldbrowser()) { var pos = window.location.href.indexOf('?'); hashes = (pos != -1) ? decodeURIComponent(window.location.href.substr(pos + 1)) : ''; splitter = '&'; } else { hashes = decodeURIComponent(window.location.hash.substr(1)); splitter = '/'; } if (hashes.length == 0) { return vars; } else { hashes = hashes.split(splitter); } for (var i in hashes) { if (hashes.hasOwnProperty(i)) { hash = hashes[i].split('='); if (typeof hash[1] == 'undefined') { vars['anchor'] = hash[0]; } else { vars[hash[0]] = hash[1]; } } } return vars; }, set: function (vars) { var hash = ''; for (var i in vars) { if (vars.hasOwnProperty(i)) { hash += '&' + i + '=' + vars[i]; } } if (!this.oldbrowser()) { if (hash.length != 0) { hash = '?' + hash.substr(1); } window.history.pushState(hash, '', document.location.pathname + hash); } else { window.location.hash = hash.substr(1); } }, add: function (key, val) { var hash = this.get(); hash[key] = val; this.set(hash); }, remove: function (key) { var hash = this.get(); delete hash[key]; this.set(hash); }, clear: function () { this.set({}); }, oldbrowser: function () { return false; } }; $('#ticket-sections').on('change', function () { var params = Hash.get(); var parent = $(this).find(':selected').data('name'); if (params) { params['parent'] = parent; } else { params = { "parent": parent }; } Hash.set(params); document.location.reload(); });
Он отвечает за сохранение страницы в локальном кэше, что очень важно, ведь нам надо, чтобы при смене категории, вызывались те параметры, которые нам нужны для работы с выбранной секцией.
А этот кусок кода как раз будет отвечать за перехват самой секции:
$('#ticket-sections').on('change', function () { var params = Hash.get(); var parent = $(this).find(':selected').data('name'); if (params) { params['parent'] = parent; } else { params = { "parent": parent }; } Hash.set(params); document.location.reload(); });
Сам скрипт можно запихнуть в файл, что конечно легче и удобнее, а можно просто подключить на странице с вызовом сниппета.
Далее шаг четвертый. Здесь нам понадобится создать простенький сниппет, который к примеру, будет добавлять поле «Кол-во гостей» и уведомление под ним к секции тикетов Мероприятия и будет называться extraFormFields:
<?php if(isset($_REQUEST['parent'])){ $parent=$_REQUEST['parent']; switch ($parent){ case 'events': $fields=' <label>Кол-во гостей</label> <input type="text" name="guests"/> <div class="alert alert-warning"> Банкетные залы рассчитаны не боле чем на 20 персон. </div>'; $modx->toPlaceholders( array( 'fields' => $fields), 'extForm' ); break; } }
Разберем подробнее. Вот этот кусок будет отвечать, как раз за перехват data-name, а именно alias, который мы указали ранее в шаблоне вывода списка option, сниппета TicketForm:
case 'events'
Итого, сюда можно дописать множество плейсхолдеров и циклов для вкуса.
Шаг пятый, завершающий. Вызываем созданный сниппет на странице с формой добавления тикетов, вот так:
[[!extraFormFields]]
Или при помощи фенома:
{$_modx->runSnippet('!extraFormFields')}
И остается только вызвать нужные нам плейсхолдеры в нужном месте, таким образом:
[[!+extra.test]]
Это самый простенький пример, который поможет сделать более гибким вызов формы TicketForm. Пишите в комметариях как еще вам удалось расширить возможности компонента, а так же если что то не понятно!
Нашли ошибку? Выделите фрагмент и нажмите Ctrl+Enter
Вы должны авторизоваться, чтобы оставлять комментарии.
Комментарии ()