Startseite > Template- und Themeprogrammierung > Account- & Passwort-Reset-Templates > password_reset / request.liquid

request.liquid

Das Template <keyword>request.liquid</keyword> rendert den Request-Step des Password-Reset-Workflows und ist Schritt 1 des 3-Schritt-Verfahrens mit dem ein Account-Besitzer sein Passwort neu vergeben kann.

Speicherort

Das Template muss unter <keyword>templates/password_reset/request.liquid</keyword> abgelegt werden.

Verfügbare Objekte

Innerhalb des <keyword>request.liquid</keyword> Templates stehen folgende Objekte zur Verfügung:

Beschreibung

Ein Account-Besitzer hat sein Login-Passwort vergessen, kennt jedoch noch den Username seines Accounts. Der Password-Reset-Workflow ermöglicht es dem Account-Besitzer, über folgendes 3-Schritt-Verfahren sein Passwort neu zu vergeben:

  1. Der Account-Besitzer schickt im Request-Step seinen Username (standardmäßig die Email-Addresse seines Accounts) über ein Formular an die Webshop-Software.
  2. Die Webshop-Software prüft, ob der Account am System existiert. Falls ja, wird eine Email an die (am System hinterlegte) Email-Addresse versendet.
  3. Der Account-Besitzer klickt innerhalb der erlaubten Zeit (standardmäßig 48 Stunden) den Link in seiner Email und steigt dadurch in den Set-New-Passwort-Step ein. Er kann hier ein neues Passwort vergeben, welches durch Klick auf den Button an die Webshop-Software übermittelt wird.

Der hier beschriebene Request-Step ist Schritt 1 bzw. der Einstieg des Account-Besitzers in das 3-Schritt-Verfahren. Sobald das hier beschriebene Template hinterlegt ist, kann der Request-Step immer über die fixe/statische URL "/password_reset/request/" relativ zu der Domain Ihres Webshops erreicht werden.

Sehen Sie weiterführend auch folgende Beschreibungen um das Email-Template für Schritt 2 und den Set-New-Passwort-Step für Schritt 3 zu hinterlegen:

Beispiel-Template

Das nachfolgende Beispiel zeigt das Markup des Request-Steps.

In dem Beispiel wird ein HTML-Form aufgebaut. Das HTML-Form schickt den erfassten Username an die Webshop-Software zur Verarbeitung. Damit die Webshop-Software den Username verarbeiten kann, muss das Formularfeld wie hier ersichtlich mit dem Wert bestückt werden, der über das <obj>password_reset_workflow:workflow#step-1</obj> Objekt zur Verfügung steht. Um Spam und missbräuchliche Verwendung des Formulars zu verhindern, ist standardmäßig eine Captcha-Prüfung aktiviert. Sie müssen daher auch wie im Beispiel ersichtlich eine Captcha-Box anzeigen. Wenn das Captcha falsch ausgefüllt wurde, findet keine Weiterleitung der Email-Nachricht statt. Der (mögliche) Account-Besitzer wird dann aufgefordert, das Captcha entsprechend zu korrigieren, bevor er es erneut versuchen kann.

<h2>Request new password</h2>


{% assign form = workflow.current_step.forms.customer_email %}

{% if form.post_successful == true %}

    {% comment %}Success message{% endcomment %}

    Thank you for your request!<br/><br/>

    An email has been sent to the email address of your customer account.<br/>

    Please open this email and follow the instructions in the email.<br/>

    Please note, that you should do this within {{ workflow.current_step.link_duration }} hours. <br/><br/>

    If you do not receive this email, please contact our customer service: {{ workflow.current_step.contact_email }}<br/>

    Please check beforehand, whether the email has been received in your spam folder and note that the delivery may take up to 15 minutes, depending on the email provider.

{% else %}

    {% comment %}Request form{% endcomment %}

    <form method="post" action="{{ form.action }}">


        {% unless form.valid %}

          <p><b>There are errors in this form.</b></p>

        {% endunless %}

        

        {% if form.recaptcha.recaptcha_challenge_error == true %}

          <p><b>Please check the completed captcha!</b></p>

        {% endif %}        

        

        <ul>

          <li>

            {% comment %}Field for username{% endcomment %}

            <label for="{{ form.fields.user_name.name }}">E-Mail *</label>

            <input type="email"

                   {% if form.fields.user_name.required %}required{% endif %}

                   {% if form.fields.user_name.max_length %}maxlength="{{ form.fields.user_name.max_length }}"{% endif %}

                   name="{{ form.fields.user_name.name }}"

                   value="{{ form.fields.user_name.value }}" />

          </li>

          <li>

            {% comment %}Google-ReCaptcha2{% endcomment %}  

            <script type="text/javascript" src='https://www.google.com/recaptcha/api.js' async defer></script>

            <label {{ form.recaptcha.recaptcha_sitekey }} >Captcha *</label>

            <div class="g-recaptcha" data-sitekey="{{ form.recaptcha.recaptcha_sitekey }}"></div>

          </li>

        </ul>

    

        {% comment %}Submit-Button{% endcomment %}

        <input type="submit" value="Continue">

    </form>

{% endif %}