Дополнительные поля профиля User (не extended) / Готовые решения / MODX

Дополнительные поля профиля User (не extended)



Потребовалось на одном проекте в форму профиля добавить для пользователей дополнительные поля. Отдельно Имя, Фамилия, Отчество и поля для добавления ссылок на социальные группы.

Инструкция получения дополнительных полей, как на скриншоте выше

  1. Первым делом идём в phpMyAdmin (или что-то подобное) и создаём:
    • столбец name в таблице modx_user_attributes:
      ALTER TABLE `modx_user_attributes` ADD `name` VARCHAR(255) NOT NULL;

    • столбец surname в таблице modx_user_attributes:
      ALTER TABLE `modx_user_attributes` ADD `surname` VARCHAR(255) NOT NULL;
    • столбец lastname в таблице modx_user_attributes:
      ALTER TABLE `modx_user_attributes` ADD `lastname` VARCHAR(255) NOT NULL;
  2. После этого нам осталось повесить плагин на события OnMODXInit и OnUserFormPrerender:
    <?php
    switch ($modx->event->name) {
        case "OnMODXInit":
            $map = array(
                'modUserProfile' => array(
                    'fields' => array(
                        'name' => '',
                        'surname' => '',
                        'lastname' => '',
                    ),
                    'fieldMeta' => array(
                        'name' => array(
                            'dbtype' => 'varchar',
                            'precision' => '100',
                            'phptype' => 'string',
                            'null' => true,
                        ),
                        'surname' => array(
                            'dbtype' => 'varchar',
                            'precision' => '100',
                            'phptype' => 'string',
                            'null' => true,
                        ),
                        'lastname' => array(
                            'dbtype' => 'varchar',
                            'precision' => '100',
                            'phptype' => 'string',
                            'null' => true,
                        ),
                    ),
                ),
            );
    
            foreach ($map as $class => $data) {
                $modx->loadClass($class);
    
                foreach ($data as $tmp => $fields) {
                    if ($tmp == 'fields') {
                        foreach ($fields as $field => $value) {
                            foreach (array('fields', 'fieldMeta', 'indexes') as $key) {
                                if (isset($data[$key][$field])) {
                                    $modx->map[$class][$key][$field] = $data[$key][$field];
                                }
                            }
                        }
                    } elseif ($tmp == 'composites' || $tmp == 'aggregates') {
                        foreach ($fields as $alias => $relation) {
                            if (!isset($modx->map[$class][$tmp][$alias])) {
                                $modx->map[$class][$tmp][$alias] = $relation;
                            }
                        }
                    }
                }
            }
            break;
        
        case "OnUserFormPrerender":
            if (!isset($user) || $user->get('id') < 1) {
                return;
            }
    
            if ($user->get('id') > 0) {
                $data['name'] = htmlspecialchars($user->Profile->name);
                $data['surname'] = htmlspecialchars($user->Profile->surname);
                $data['lastname'] = htmlspecialchars($user->Profile->lastname);
    
                $modx->controller->addHtml("
                    <script type='text/javascript'>
                        Ext.ComponentMgr.onAvailable('modx-user-tabs', function() {
                            this.on('beforerender', function() {
                                // Получаем колонки первой вкладки
                                var leftCol = this.items.items[0].items.items[0].items.items[0];
    
                                // Добавляем новое поле в левую колонку 4ым по счёту полем (перед полем 'Email')
                                leftCol.items.insert(3, 'modx-user-name', new Ext.form.TextField({
                                    id: 'modx-user-name',
                                    name: 'name',
                                    fieldLabel: 'Имя',
                                    xtype: 'textfield',
                                    anchor: '100%',
                                    maxLength: 255,
                                    value: '{$data['name']}',
                                }));
                                leftCol.items.insert(4, 'modx-user-lastname', new Ext.form.TextField({
                                    id: 'modx-user-lastname',
                                    name: 'lastname',
                                    fieldLabel: 'Отчество',
                                    xtype: 'textfield',
                                    anchor: '100%',
                                    maxLength: 255,
                                    value: '{$data['lastname']}',
                                }));
                                leftCol.items.insert(5, 'modx-user-surname', new Ext.form.TextField({
                                    id: 'modx-user-surname',
                                    name: 'surname',
                                    fieldLabel: 'Фамилия',
                                    xtype: 'textfield',
                                    anchor: '100%',
                                    maxLength: 255,
                                    value: '{$data['surname']}',
                                }));
                            });
                        });
                    </script>
                ");
            }
            break;
    }
    	

Если у вас есть компонент Office, можно настроить поля в профиле. Для этого вызываем наш officeProfile со следующими параметрами:

[[!officeProfile?
    &profileFields=`username:50,email:50,fullname:50,name:50,surname:50,lastname:50,phone:12,mobilephone:12,dob:10,gender,address,country,city,state,zip,fax,photo,comment,website,specifiedpassword,confirmpassword`
    &tplProfile=`tpl.Site.Office.profile.form`
]]

а наш чанк tpl.Site.Office.profile.form будет выглядеть следующим образом:

<form action="" method="post" class="form-horizontal well" id="office-profile-form" enctype="multipart/form-data">
    <div class="header">
        <small>{'office_profile_header' | lexicon}</small>
    </div>

    <div class="form-group avatar">
        <label class="col-sm-2 control-label">{'office_profile_avatar' | lexicon}</label>
        <div class="col-sm-10">
            <img src="{if $photo?}{$photo}{else}{$gravatar}?s=100{/if}" id="profile-user-photo"
                 data-gravatar="{$gravatar}?s=100" width="100"/>
            <a href="#" id="office-user-photo-remove"{if !$photo} style="display:none;"{/if}>
                {'office_profile_avatar_remove' | lexicon}
                <i class="glyphicon glyphicon-remove"></i>
            </a>
            <p class="help-block">{'office_profile_avatar_desc' | lexicon}</p>
            <input type="hidden" name="photo" value="{$photo}"/>
            <input type="file" name="newphoto" id="profile-photo"/>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label">{'office_profile_username' | lexicon}<sup class="red">*</sup></label>
        <div class="col-sm-10">
            <input type="text" name="username" value="{$username}" placeholder="{'office_profile_username' | lexicon}"
                   class="form-control"/>
            <p class="help-block message">{$error_username}</p>
            <p class="help-block desc">{'office_profile_username_desc' | lexicon}</p>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label">{'office_profile_fullname' | lexicon}<sup class="red">*</sup></label>
        <div class="col-sm-10">
            <input type="text" name="fullname" value="{$fullname}" placeholder="{'office_profile_fullname' | lexicon}"
                   class="form-control"/>
            <p class="help-block message">{$error_fullname}</p>
            <p class="help-block desc">{'office_profile_fullname_desc' | lexicon}</p>
        </div>
    </div>
    
    <div class="form-group">
        <label class="col-sm-2 control-label">Имя<sup class="red">*</sup></label>
        <div class="col-sm-10">
            <input type="text" name="name" value="{$name}" placeholder="Имя"
                   class="form-control"/>
            <p class="help-block message">{$error_name}</p>
            <p class="help-block desc">Ваше имя</p>
        </div>
    </div>
    
    <div class="form-group">
        <label class="col-sm-2 control-label">Отчество<sup class="red">*</sup></label>
        <div class="col-sm-10">
            <input type="text" name="lastname" value="{$lastname}" placeholder="Отчество"
                   class="form-control"/>
            <p class="help-block message">{$error_lastname}</p>
            <p class="help-block desc">Ваше отчество</p>
        </div>
    </div>
    
    <div class="form-group">
        <label class="col-sm-2 control-label">Фамилия<sup class="red">*</sup></label>
        <div class="col-sm-10">
            <input type="text" name="surname" value="{$surname}" placeholder="Фамилия"
                   class="form-control"/>
            <p class="help-block message">{$error_surname}</p>
            <p class="help-block desc">Ваша фамилия</p>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label">{'office_profile_email' | lexicon}<sup class="red">*</sup></label>
        <div class="col-sm-10">
            <input type="text" name="email" value="{$email}" placeholder="{'office_profile_email' | lexicon}"
                   class="form-control"/>
            <p class="help-block message">{$error_email}</p>
            <p class="help-block desc">{'office_profile_email_desc' | lexicon}</p>
        </div>
    </div>

<div class="form-group">
    <label class="col-sm-2 control-label">
        {'office_profile_phone' | lexicon}{if $_modx->config.office_auth_mode == 'phone'} <span class="red">*</span>{/if}
    </label>
    <div class="col-md-10">
        <input type="text" name="mobilephone" placeholder="" value="{$mobilephone}" class="form-control"/>
        <p class="help-block message">{$error_mobilephone}</p>
        <p class="help-block desc">{'office_profile_phone_desc' | lexicon}</p>
    </div>
</div>

<div class="form-group hidden">
    <label class="col-sm-2 control-label">{'office_auth_register_phone_code' | lexicon}</label>
    <div class="col-md-10">
        <input type="text" name="phone_code" value="" class="form-control"/>
        <p class="help-block message">{$error_phone_code}</p>
        <p class="help-block desc">{'office_profile_phone_code_desc' | lexicon}</p>
    </div>
</div>
    <div class="form-group">
        <label class="col-sm-2 control-label">{'office_profile_password' | lexicon}</label>
        <div class="col-sm-10">
            <input type="password" name="specifiedpassword" value="" placeholder="********" class="form-control"/>
            <p class="help-block message">{$error_specifiedpassword}</p>
            <p class="help-block desc">{'office_profile_specifiedpassword_desc' | lexicon}</p>
            <input type="password" name="confirmpassword" value="" placeholder="********" class="form-control"/>
            <p class="help-block message">{$error_confirmpassword}</p>
            <p class="help-block desc">{'office_profile_confirmpassword_desc' | lexicon}</p>
        </div>
    </div>

    {if $providers?}
        <div class="form-group">
            <label class="col-sm-2 control-label">{'ha.providers_available' | lexicon}</label>
            <div class="col-sm-10">
                {$providers}
            </div>
        </div>
    {/if}

    <hr/>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-primary">{'office_profile_save' | lexicon}</button>
                
            <a class="btn btn-danger" href="{$_modx->resource.id | url : [] : ['action' => 'auth/logout']}">{'office_profile_logout' | lexicon}</a>
        </div>
    </div>
</form>


Небольшое пояснение, что вообще делает этот плагин

  • В первом событии (OnMODXInit) происходит расширение модели классов системы нашими дополнительными полями.
  • Во втором событии (OnUserFormPrerender) мы, перед рендерингом формы юзера, встраиваем наши поля среди уже имеющихся полей профиля.

Итого

Мы получаем свои дополнительные поля данных, встроенные в стандартный MODX, без использования JSON извращения, которое мы имеем из коробки.

Источник: modx.pro
28 марта 2018, 19:39    SEQUEL.ONE Готовые решения 1    508 +1

Отзывы ()

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