Registered Customers
Login
Form for entering email and password for login. The form has automatic HTML5 validation.
twig
{# shorthand notation #}
<i:login>
<input data-role="email" data-label="Váš email">
<input data-role="password" data-label="Vaše heslo">
<button data-role="submit">Přihlásit</button>
</i:login>
{# separate label notation #}
<i:login>
<label for="role:email">Váš email</label>
<input data-role="email">
<label for="role:password">Vaše heslo</label>
<input data-role="password">
<button data-role="submit">Přihlásit</button>
</i:login>html
<!-- output - subject to change! -->
<form action="/_login" method="post">
<label for="email_snj554hj">Váš email</label>
<input type="email" id="email_snj554hj" required>
<label for="password_snj554hj">Vaše heslo</label>
<input type="email" id="password_snj554hj" required>
<button type="submit">Přihlásit</button>
</form>External-login
Buttons for logging in via external services (Facebook, Seznam, ...). The available services change based on the shop's configuration, so the template must account for a variable number of buttons.
Attributes of a[data-role="button"]
| Attribute | Value | Description |
|---|---|---|
| button-img | url | button image URL |
| button-text | string | button text |
| class | string | CSS class for the button |
twig
{# universal rendering with default appearance #}
<i:external-login>
{% for service in availableExternalLoginServices() %}
<a href="{{ service }}" data-role="button" ></a>
{% endfor %}
<div data-role="terms" ></div>
</i:external-login>
{# custom appearance for a specific service, default for the rest #}
<i:external-login>
{% for service in availableExternalLoginServices() %}
{% if service == 'facebook' %}
<a href="{{ service }}" data-role="button" button-img="/images/facebook-button.png" class="facebook_login" ></a>
{% else %}
<a href="{{ service }}" data-role="button" ></a>
{% endif %}
{% endfor %}
<div data-role="terms" ></div>
</i:external-login>Password reset
Form for entering a new password. The link to this form comes from an email (see password reset request). The form has automatic HTML5 validation. When the jquery-validation plugin is enabled, it automatically binds to the form.
twig
{# shorthand notation #}
<i:password-reset>
<input data-role="password" data-label="Nové heslo">
<input data-role="password_again" data-label="Nové heslo (znovu)">
<button data-role="submit">Nastavit heslo</button>
</i:password-reset>
{# separate label notation #}
<i:password-reset>
<label for="role:password">Nové heslo</label>
<input data-role="password">
<label for="role:password_again">Nové heslo (znovu)</label>
<input data-role="password_again">
<button data-role="submit">Nastavit heslo</button>
</i:password-reset>html
<!-- output - subject to change! -->
<form action="/_password-reset" method="post">
<label for="password_snj554hj">Nové heslo</label>
<input name="password" type="password" id="password_snj554hj" required>
<label for="password_snj554hj">Nové heslo (znovu)</label>
<input name="password_again" type="password" id="password_again_snj554hj" required>
<button type="submit">Nastavit heslo</button>
</form>Password reset request
Form for entering an email address to send a password reset link. The form has automatic HTML5 validation. When the jquery-validation plugin is enabled, it automatically binds to the form.
twig
{# shorthand notation #}
<i:password-reset-request>
<input data-role="email" data-label="Váš email">
<button data-role="submit">Resetovat heslo</button>
</i:password-reset-request>
{# separate label notation #}
<i:password-reset-request>
<label for="role:email">Váš email</label>
<input data-role="email">
<button data-role="submit">Resetovat heslo</button>
</i:password-reset-request>html
<!-- output - subject to change! -->
<form action="/_password-reset" method="post">
<label for="email_snj554hj">Váš email</label>
<input type="email" id="email_snj554hj" required data-msg-required="Vyplňte váš email">
<button type="submit">Resetovat heslo</button>
</form>Signup
Complete registration form.
Form fields for user-signup
| data-role | Required | Description |
|---|---|---|
| yes | login email address | |
| password | yes | password |
| password_again | yes | password confirmation |
| phone | no | phone number |
| first_name | no | first name |
| last_name | no | last name |
| company | no | company name |
| cin | no | company identification number (CIN) |
| vatid | no | VAT identification number |
| street | no | delivery street and house number |
| city | no | delivery city |
| zip | no | delivery postal code |
| region | no | delivery region (state, province) |
| country | no | delivery country |
| billing_phone | no | billing phone number |
| billing_first_name | no | billing first name |
| billing_last_name | no | billing last name |
| billing_company | no | billing company name |
| billing_cin | no | billing CIN |
| billing_vatid | no | billing VAT ID |
| billing_street | no | billing street and house number |
| billing_city | no | billing city |
| billing_zip | no | billing postal code |
| billing_region | no | billing region (state, province) |
| billing_country | no | billing country |
| newsletter | no | subscribe to newsletter |
- When use-billing is used, fields wrapped in billing-fields are automatically hidden.
- When the jQuery-validation plugin is active, it automatically binds to the form.
- Values (previously filled in or from the user profile) are populated automatically.
- The country list is based on configuration and the default selection is determined by GeoIP.
twig
<i:user-signup>
<fieldset data-role="login">
<legend>Přihlašovací údaje</legend>
<input data-role="email" data-label="email">
<input data-role="password" data-label="heslo">
<input data-role="password_again" data-label="heslo (znovu)">
</fieldset>
<fieldset data-role="delivery">
<legend>Dodací adresa</legend>
<input data-role="phone" data-label="telefon">
<input data-role="first_name" data-label="křestní jméno">
<input data-role="last_name" data-label="příjmení">
<input data-role="company" data-label="firma">
<input data-role="cin" data-label="IČ">
<input data-role="vatid" data-label="DIČ">
<input data-role="street" data-label="ulice a č.p.">
<input data-role="city" data-label="město">
<input data-role="zip" data-label="PSČ">
<select data-role="country" data-label="země" ></select>
</fieldset>
<fieldset data-role="billing">
<legend>Fakturační adresa</legend>
<input data-role="use-billing" data-label="fakturovat na jinou adresu">
<div data-role="billing-fields"> {# "billing-fields" is only used together with "use-billing" #}
<input data-role="billing-phone" data-label="telefon">
<input data-role="billing-first_name" data-label="křestní jméno">
<input data-role="billing-last_name" data-label="příjmení">
<input data-role="billing-company" data-label="firma">
<input data-role="billing-cin" data-label="IČ">
<input data-role="billing-vatid" data-label="DIČ">
<input data-role="billing-street" data-label="ulice a č.p.">
<input data-role="billing-city" data-label="město">
<input data-role="billing-zip" data-label="PSČ">
<select data-role="billing-country" data-label="země" ></select>
</div>
</fieldset>
<input data-role="newsletter" data-label="odebírat newsletter">
<button data-role="submit">Registrovat</button>
</i:user-signup>Hiding company fields
By adding a checkbox, company fields can be automatically hidden -- no additional JavaScript is needed.
If use-company is placed inside the delivery or billing fieldset, it applies only to that address's fields. If placed outside, it applies to both at once.
company-fields can be used multiple times within a single fieldset -- for example, on table rows.
twig
<i:user-signup>
<input data-role="use-company" data-label="nakupuji na firmu">
<fieldset data-role="delivery">
...
<div data-role="company-fields">
<input data-role="company" data-label="firma">
<input data-role="cin" data-label="IČ">
<input data-role="vatid" data-label="DIČ">
</div>
</fieldset>
<fieldset data-role="billing">
...
<table>
...
<tr data-role="company-fields"><td>
<input data-role="billing-company" data-label="firma">
</td></tr>
<tr data-role="company-fields"><td>
<input data-role="billing-cin" data-label="IČ">
</td></tr>
<tr data-role="company-fields"><td>
<input data-role="billing-vatid" data-label="DIČ">
</td></tr>
</table>
</fieldset>
</i:user-signup>