Registered Customers

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>

Buttons for logging in via external services. The available services change based on the shop's configuration, so the template must account for a variable number of buttons. availableExternalLoginServices() returns them in this order, each only when configured: facebook, seznam (Czech storefront only), google, discord. A template that maps services to its own icons should fall back to the default button for a service it does not know.

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>

Complete registration form.

Form fields for user-signup

data-role	Required	Description
email	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
nickname	no	forum nickname, unique among the shop's customers (also editable in the profile)

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.
A nickname already used by another customer (compared ignoring case and accents), one containing a link or an emoji, or one longer than 255 characters is rejected with an error message; the customer's own unchanged nickname is always accepted. Templates read it as customer.nickname.

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="nickname" data-label="přezdívka">
    <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>

Customer avatar

customer.avatar is the profile picture the customer uploaded, an image object like any other template image (small, alt, ...). It is null when the customer has none or when the shop has avatars switched off, so always guard it. The alt text is the customer's nickname, or the name when there is no nickname.

twig

{% if customer.avatar is not null %}<img src="{{ customer.avatar.small }}" alt="{{ customer.avatar.alt }}">{% endif %}

Registered Customers ​

Login ​

External-login ​

Password reset ​

Password reset request ​

Signup ​

Hiding company fields ​

Customer avatar ​

Registered Customers

Login

External-login

Password reset

Password reset request

Signup

Hiding company fields

Customer avatar