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

Кастомизация компонента TicketForm
Андрей K.STARK Пенин
10 августа 2018, 15:52

В целом задача состоит в том, чтобы при смене родителя (секции с Тикетами/Категориями), у нас менялся подбор необходимых полей или целых блоков или даже набора параметров сниппета 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

Вы должны авторизоваться, чтобы оставлять комментарии.

Комментарии ()

    Выделите опечатку и нажмите Ctrl + Enter, чтобы отправить сообщение об ошибке.