Registrovaní zákazníci

Login

Formulář pro zadání emailu a hesla pro přihlášení. Formulář má automaticky HTML5 validaci.

{# zkrácený zápis #}
<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>

{# samostatný zápis label #}
<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>

<!-- výstup - může se měnit! -->
<form action="/_login" method="post">
    <label for="email_snj554hj">Váš email</label>
    <input type="email" id="email_snj554hj" requried>

    <label for="password_snj554hj">Vaše heslo</label>
    <input type="email" id="password_snj554hj" requried>

    <button type="submit">Přihlásit</button>
</form>

External-login

Tlačítka pro přihlášení přes externí služby (Facebook, Seznam, …). Dostupné služby se mění podle nastavení eshopu, takže šablonu musí počítat s různým počtem tlačítek.

Atributy a[data-role=“button“]

Atribut	Hodnota	Popis
button-img	url	adresa obrázku tlačítka
button-text	string	text tlačítka
class	string	CSS třída tlačítka

{# univerzální výpis s defaultním vzhledem #}
<i:external-login>
    {% for service in availableExternalLoginServices() %}
        <a href="{{ service }}" data-role="button" />
    {% endfor %}
    <div data-role="terms" />
</i:external-login>

{# vlastní vzhled pro konkrétní službu a defaultní pro zbytek #}
<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" />
        {% else %}
            <a href="{{ service }}" data-role="button" />
        {% endif %}
    {% endfor %}
    <div data-role="terms" />
</i:external-login>

Password reset

Formulář pro zadání noého hesla. Odkaz na formulář vede z emailu (viz požadavek na reset hesla). Formulář má automaticky HTML5 validaci. Při zapnutí pluginu jquery-validation se automaticky na formulář naváže.

{# zkrácený zápis #}
<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>

{# samostatný zápis label #}
<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>

<!-- výstup - může se měnit! -->
<form action="/_pasword-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

Formulář pro zadání email k poslání odkaz na reset hesla. Formulář má automaticky HTML5 validaci. Při zapnutí pluginu jquery-validation se automaticky na formulář naváže.

{# zkrácený zápis #}
<i:password-reset-request>
    <input data-role="email" data-label="Váš email">
    <button data-role="submit">Resetovat heslo</button>
</i:password-reset-request>

{# samostatný zápis label #}
<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>

<!-- výstup - může se měnit! -->
<form action="/_pasword-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>

Registrace (signup)

Kompletní registrační formulář.

Pole formuláře user-signup

data-role	Povinný	Popis
email	ano	adresa k přihlášení
password	ano	heslo
password_again	ano	opakování hesla
phone	ne	telefon
first_name	ne	křestní jméno
last_name	ne	příjmení
company	ne	firma
cin	ne	IČ
vatid	ne	DIČ
street	ne	dodací ulice a č.p.
city	ne	dodací město
zip	ne	dodací PSČ
region	ne	dodací region (kraj	stát federace)
country	ne	dodací stát
billing_phone	ne	fakturační telefon
billing_first_name	ne	fakturační křestní jméno
billing_last_name	ne	fakturační příjmení
billing_company	ne	fakturační firma
billing_cin	ne	fakturační IČ
billing_vatid	ne	fakturační DIČ
billing_street	ne	fakturační ulice a č.p.
billing_city	ne	fakturační město
billing_zip	ne	fakturační PSČ
billing_region	ne	fakturační region (kraj	stát federace)
billing_country	ne	fakturační stát
newsletter	ne	registrovat odběr novinek

• Při použití use-billing se automaticky skrývají pole obalená v billing-fields.

• Při aktivním pluginu jQuery-validation se automaticky napojí na formulář.

• Hodnoty (dříve vyplněné nebo z profilu) se doplní automaticky

• Seznam zemí se bere dle nastavení a automaticky se vybere podle GeoIP

<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ě" />
    </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" se používá jen s "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ě" />
        </div>
    </fieldset>

    <input data-role="newsletter" data-label="odebírat newsletter">

    <button data-role="submit">Registrovat</button>
</i:user-signup>

skrývání firemních údajů

Přidáním zatržítka lze zajistit automatické skrývání firmních údajů – není potřeba žádný další javascript.

Pokud je use-company uvnitř fieldsetu delivery nebo billing, použije se pouze na políčka dané adresy. Pokud je mimo, použije se na oboje najednou.

V jednom fieldsetu lze použít company-fields několikrát - například na řádky tabulky.

<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>