The customer profile page allows customers to view and update their account information.
Template location
src/views/pages/customer/profile.twig
Available variables
| Variable | Type | Description |
|---|
page.title | string | Page title |
page.slug | string | Page slug |
user | object | Current user object |
custom_fields | array | Custom profile fields |
User object
| Variable | Type | Description |
|---|
user.first_name | string | Customer first name |
user.last_name | string | Customer last name |
user.email | string | Customer email |
user.mobile | string | Customer mobile number |
user.birthday | date | Customer birthday |
user.gender | string | Customer gender (male or female) |
user.is_notifiable | bool | Whether customer accepts notifications |
Custom fields
| Variable | Type | Description |
|---|
field.id | int | Field ID |
field.label | string | Field label |
field.type | string | Field type (text, photo, etc.) |
field.value | mixed | Current field value |
field.required | bool | Whether field is required |
Code examples
<form class="profile-form"
onsubmit="return salla.form.onSubmit('profile.update', event)">
<div class="form-field">
<label for="first-name">
{{ trans('pages.profile.first_name') }}
</label>
<input
type="text"
name="first_name"
value="{{ user.first_name }}"
id="first-name"
required>
</div>
<div class="form-field">
<label for="last-name">
{{ trans('pages.profile.last_name') }}
</label>
<input
type="text"
name="last_name"
value="{{ user.last_name }}"
id="last-name"
required>
</div>
<salla-button type="submit">
{{ trans('common.elements.save') }}
</salla-button>
</form>
Birthday field
<div class="form-field">
<label for="birthday">
{{ trans('pages.profile.birthday') }}
</label>
<salla-datetime-picker
dateFormat="Y-m-d"
value="{{ user.birthday }}"
placeholder="{{ trans('pages.profile.birthday_placeholder') }}"
required
name="birthday">
</salla-datetime-picker>
</div>
Gender selection
<div class="form-field">
<label for="gender">
{{ trans('pages.profile.gender') }}
</label>
<select name="gender" required>
<option value="">{{ trans('pages.profile.gender_placeholder') }}</option>
<option value="male" {{ user.gender == 'male' ? 'selected' : '' }}>
{{ trans('pages.profile.male') }}
</option>
<option value="female" {{ user.gender == 'female' ? 'selected' : '' }}>
{{ trans('pages.profile.female') }}
</option>
</select>
</div>
Email field
<div class="form-field">
<label for="email">
{{ trans('common.elements.email') }}
</label>
<input
type="email"
name="email"
value="{{ user.email }}"
id="email"
required>
</div>
Mobile number field
<div class="form-field">
<label for="international-mobile">
{{ trans('common.elements.mobile') }}
</label>
<salla-tel-input phone="{{ user.mobile }}"></salla-tel-input>
</div>
Custom fields
{% for field in custom_fields %}
<div class="form-field">
<label for="{{ field.id }}">
{{ field.label }}
</label>
{% if field.type == 'photo' %}
<salla-file-upload
instant-upload
value="{{ field.value }}"
url="{{ store.url }}/upload-image"
name="custom_fields[{{ field.id }}]"
payload-name="image"
height="120px">
</salla-file-upload>
{% else %}
<input
type="{{ field.type }}"
id="{{ field.id }}"
value="{{ field.value }}"
name="custom_fields[{{ field.id }}]"
{{ field.required ? 'required' : '' }}>
{% endif %}
</div>
{% endfor %}
User verification
<salla-verify></salla-verify>
Notification settings
<salla-user-settings
{{ user.is_notifiable ? 'is-notifiable' : '' }}>
</salla-user-settings>
Hooks
The profile page provides hooks for customization:
{% hook 'customer:profile.form.start' %}
{% hook 'customer:profile.form.fields.start' %}
{# Form fields #}
{% hook 'customer:profile.form.fields.end' %}
{% hook 'customer:profile.form.submit.start' %}
{# Submit button #}
{% hook 'customer:profile.form.submit.end' %}
{% hook 'customer:profile.form.end' %}
The profile page extends the layouts.customer layout, which provides a customer account sidebar with navigation to other account pages.