Customer Pages

The customer pages are all in the html/customer/ directory. These pages handle all the customer account related functionality of your store. The customer_helper methods handle much of the customer account display and editing.

login.html

Found in: html/customer/login.html

The login page has a

that POSTs the email and password inputs to /customer/login. Submitting this form will redirect the customer to the account page.

<form action="/customer/login" method="post" accept-charset="utf-8">
    <input type="email" name="email" placeholder="Email address">
    <input type="password" name="password" placeholder="Password">
    <button type="submit" class="btn btn-primary fullsize">LOGIN</button>
</form>

account.html

Found in: html/customer/account.html

The account page shows the customer everything relevant to their account, such as current subscriptions, account information, shipping address, and payment info. The following customer helper methods are used on this page to generate the page layout:

{{ customer_helper.show_subscription_info() }}
{{ customer_helper.show_basic_account_info() }}
{{ customer_helper.show_shipping_address_info() }}
{{ customer_helper.show_payment_info() }}

Here is an example html/customer/account.html from the Betterman theme

{# This page is inserted into the framework defined by "base.html" #}
{% extends "base.html" %}

{#
    Everything inside the page_content block is inserted 
    into the main content area of the page as defined by "base.html"
#}
{% block page_content %}

{% include "components/form_feedback.html" %}

<section class="headline"> <!-- Begin headline -->
    <div class="container">
        <div class="row content">
            <h2>Update your information</h2>
        </div>
    </div>
</section> <!-- End headline -->

<section class="my-account"> <!-- Begin my account section -->
    <div class="container form-container">
        <div class="row content">
            <div class="col-lg-4"> <!-- Left column -->
                {#
                    Cratejoy renders the HTML that lists the customer's 
                    subscriptions. You can change the way it looks by 
                    editing the css, there are examples in css/style.css.
                #}
                
                {{ customer_helper.show_subscription_info(vertical=True, btn_class="btn-primary") }}
            </div>
            <div class="col-lg-8"> <!-- Right column -->
                {#
                    Cratejoy renders the HTML for editing account,
                    shipping and payment information.
                    You can change the way it looks by editing the css,
                    there are examples in css/style.css.
                #}
                {{ customer_helper.show_basic_account_info(btn_class="btn-primary") }}
                {{ customer_helper.show_shipping_address_info(btn_class="btn-primary") }}
                {{ customer_helper.show_payment_info(btn_class="btn-primary") }}
            </div>
        </div>
    </div>
</section> <!-- End my account section -->

{% endblock %}

edit.html

Found in: html/customer/edit.html

The edit page is where a customer would make changes to their account information.

The following customer helper methods are used on this page to generate the page layout:

{{ customer_helper.edit_basic_account_info() }}
{{ customer_helper.edit_payment_info() }}
{{ customer_helper.edit_address_info() }}

Here is a typical html/customer/edit.html as found in the Betterman theme:

{% extends "base.html" %}

{% block page_content %}

{% include "components/form_feedback.html" %}

<section class="headline">
    <div class="container">
        <div class="row content">
            <h2>Update your information</h2>
        </div>
    </div>
</section>

<section class="errors">
    <div class="row">
        <div class="container error-container my-account">
            {% with messages = get_flashed_messages() %}
                {% if messages %}
                    {% for message in messages %}
                        <div class="row">
                            <div class="col-lg-8 col-lg-offset-2">
                                <div class="alert alert-danger">
                                    {{ message | safe }}
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                {% endif %}
            {% endwith %}
        </div>
    </div>
</section>

<section class="my-account">
    <div class="container form-container">
        <div class="row content">
            <div class="col-lg-8 col-lg-offset-2">
                {{ customer_helper.edit_basic_account_info(btn_class="btn-primary") }}
                {{ customer_helper.edit_payment_info(btn_class="btn-primary") }}
                {{ customer_helper.edit_address_info(btn_class="btn-primary") }}
            </div>
        </div>
    </div>
</section>

{% endblock %}

thank_you.html

Found in: html/customer/thank_you.html

The thank_you page is served to the customer after submitting an order from the checkout page. It should only be shown once to the customer and all future visits to the order receipt should instead be to the html/customer/order.html file via the /customer/order/<order_id> route.

The following customer helper method should be used on this page to generate the page layout:

{{ customer_helper.order_page("Thank you!") }}

A typical html/customer/thank_you.html file is:

{# This page is inserted into the framework defined by "base.html" #}
{% extends "base.html" %}

{% block body_class %}betterman-order betterman-thanks{% endblock %}

{#
    Everything inside the page_content block is inserted into the 
		main content area of the page as defined by "base.html"
#}
{% block page_content %}

<section class="order"> <!-- Begin order section -->
    <div class="container">
        <div class="row content">

            <!-- 
									The HTML for the order thank you page is rendered
									automatically by Cratejoy and
                  cannot be modified. You can change the way it looks by 
									editing the css though. There are examples of this in
									css/style.css
            -->
            {{ customer_helper.order_page("Thank you!") }}
        </div>
    </div>
</section> <!-- End order section -->

{% endblock %}

order.html

Found in: html/customer/thank_you.html

The order page is where the customer can see details about one of their orders. The order page is linked to from e-mail notifications and their account history.

The following customer helper method should be used on this page to generate the page layout:

{{ customer_helper.order_page() }}

A typical html/customer/order.html file is:

{% extends "base.html" %}

{% block body_class %}betterman-order{% endblock %}

{% block page_content %}

<section class="order"> <!-- Begin order section -->
    <div class="container">
        <div class="row content">
            {{ customer_helper.order_page() }}
        </div>
    </div>
</section> <!-- End order section -->

{% endblock %}

forgot_password.html

Found in: html/customer/forgot_password.html

The forgot_password page lets a customer reset their password. The customer can submit their email address, and the Cratejoy platform will send them a password reset email with a link to the password_reset page and a temporary key that they can use to create a new password. This page has a form element that POSTs an email address to /customer/forgot, and the Cratejoy platform verifies the email address and sends out a reset notification.

A typical forgot_password.html looks like this:

{% extends "base.html" %}

{% block body_class %}forgot-password{% endblock %}

{% block page_content %}

{% include "components/form_feedback.html" %}

<section class="headline"> <!-- Begin headline -->
    <div class="container">
        <div class="row content">
            <h2>Forgot your password?</h2>
            <p>No worries, we'll help you reset it and get back in.</p>
        </div>
    </div>
</section> <!-- End headline -->

<section class="form"> <!-- Begin form -->
    <div class="form-container container">
        <div class="row content">
            <div class="col-sm-6">
                <form action="/customer/forgot" class="simple-form form-horizontal" method="post" accept-charset="utf-8">
                    <fieldset>
                        <div class="control-group">
                            <label for="email">Email</label>
                            <div class="controls">
                                <input id="email" name="email" type="email" placeholder="Email address" class="input-xlarge" required="">
                            </div>
                        </div>

                        <div class="control-group">
                            <label for="submit"></label>
                            <div class="controls">
                                <button id="submit" name="submit" class="btn btn-primary">Submit</button>
                            </div>
                      </div>
                    </fieldset>
                </form>
            </div>
        </div>
    </div>
</section> <!-- End form -->

{% endblock %}

password_reset.html

The password_reset page is where the reset notification sends the customer to enter a new password. This page has a form element that POSTs the email address, Cratejoy issued password reset key, and the customer’s new password and new password confirmation to /customer/password_reset

A typical password_reset.html:

{% extends "base.html" %}

{% block body_class %}password-reset{% endblock %}

{% block page_content %}

{% include "components/form_feedback.html" %}

<section class="headline"> <!-- Begin headline -->
    <div class="container">
        <div class="row content">
            <h2>Password Reset</h2>
              <p>Use your email and the temporary key just sent to you to change your password</p>
        </div>
    </div>
</section> <!-- End headline -->

<section class="form"> <!-- Begin form -->
    <div class="form-container container">
        <div class="row content">
            <div class="col-sm-6">
                <form action="/customer/password_reset" class="simple-form form-horizontal" method="post" accept-charset="utf-8">
                    <fieldset>

                        <div class="control-group">
                            <label for="email">Email</label>
                            <div class="controls">
                                <input name="email" type="email" {% if email %}value="{{ email }}"{% endif %} required="required" >
                            </div>
                        </div>

                        <div class="control-group">
                            <label for="temporary_key">Temporary Key</label>
                            <div class="controls">
                                <input name="temporary_key" type="text" {% if temporary_key %}value="{{ temporary_key }}"{% endif %} required="required" >
                            </div>
                        </div>

                        <div class="control-group">
                            <label for="password">New Password</label>
                            <div class="controls">
                                <input name="password" type="password" required="required" >
                            </div>
                        </div>

                        <div class="control-group">
                            <label for="password2">New Password Again</label>
                            <div class="controls">
                                <input name="password2" type="password" required="required" placeholder="Repeat your password">
                            </div>
                        </div>
                        <div class="control-group">
                            <label for="submit"></label>
                            <div class="controls">
                                <button id="submit" name="submit" class="btn btn-primary">Submit</button>
                            </div>
                      </div>

                    </fieldset>
                </form>
            </div>
        </div>
    </div>
</section> <!-- End form -->

{% endblock %}