Customer pages handle all the customer account related functionality

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 Page

Found in: components/customer/login/Login Form/component.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 Overview

Found in: components/customer/account/Account Information/component.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() }}

Account Edit

Found in: components/customer/edit/Edit Information/component.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() }}

Thank You Page

Found in: components/customer/thank_you/Account Info/component.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 components/customer/order/Order/component.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 components/customer/thank_you/Account Info/component.html file is:

<section class="order row">
	<div class="col-xs-12">
		<!--
			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>
</section>

Order

Found in: components/customer/order/Order/component.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 components/customer/order/Order/component.html file is:

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

Forgot Password Page

Found in: components/customer/forgot_password/Forgot Password Form/component.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 components/customer/forgot_password/Forgot Password Form/component.html looks like this:

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

<section id="customer-forgot-password-forgot-password-form" class="row"> <!-- Begin form -->
	<div class="card col-md-6 col-md-offset-3 col-xs-10 col-xs-offset-1">
		<div class="card-block">
			<form action="/customer/forgot" class="simple-form form-horizontal" method="post" accept-charset="utf-8">
				<div class="form-group">
					<input id="email" name="email" type="email" placeholder="Email address" class="form-control input-xlarge" required="">
				</div>

				<div class="form-group text-center">
					<button id="submit" name="submit" class="btn btn-med btn-primary">Submit</button>
				</div>
			</form>
		</div>
	</div>
</section> <!-- End form -->

Password Reset Form

Found in components/customer/password_reset/Password Reset Form/component.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 components/customer/password_reset/Password Reset Form/component.html:

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

<section id="customer-password-reset-password-reset-form" class="form row"> <!-- Begin form -->
	<div class="card col-md-6 col-md-offset-3 col-xs-10 col-xs-offset-1">
		<div class="card-block">
			<form action="/customer/password_reset" class="simple-form form-horizontal" method="post" accept-charset="utf-8">
				<div class="form-group">
					<label for="email">Email</label>
					<input class="form-control" name="email" type="email" {% if email %}value="{{ email }}"{% endif %} required="required" >
				</div>

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

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

				<div class="form-group">
					<label for="password2">New Password Again</label>
					<input class="form-control" name="password2" type="password" required="required" placeholder="Repeat your password">
				</div>

				<div class="form-group text-center">
					<button id="submit" name="submit" class="btn btn-med btn-primary">Submit</button>
				</div>
			</form>
		</div>
	</div>
</section> <!-- End form -->