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>

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
vatid ne DIČ
street ne dodací ulice a č.p.
city ne dodací město
zip ne dodací PSČ
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_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>