{"_id":"58112e72ded0340f0085d04b","version":{"_id":"58112e71ded0340f0085d02a","project":"551e85be610f400d00837db7","__v":4,"createdAt":"2016-10-26T22:30:09.862Z","releaseDate":"2016-10-26T22:30:09.862Z","categories":["58112e72ded0340f0085d02b","58112e72ded0340f0085d02c","58112e72ded0340f0085d02d","58112e72ded0340f0085d02e","58112e72ded0340f0085d02f","58112e72ded0340f0085d030","58112e72ded0340f0085d031","58112e72ded0340f0085d032","58112e72ded0340f0085d033","58112e72ded0340f0085d034","581137cc604d3c230048b7e4","58dc367221742d0f00a73f98","590768e54669da0f00db5c0b"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"new designer","version_clean":"2.0.0","version":"2.0"},"parentDoc":null,"project":"551e85be610f400d00837db7","user":"551e85707ca3030d00be0c07","__v":0,"category":{"_id":"58112e72ded0340f0085d02b","version":"58112e71ded0340f0085d02a","__v":0,"project":"551e85be610f400d00837db7","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-04-03T12:21:19.234Z","from_sync":false,"order":1,"slug":"overview","title":"Themes Overview"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-04-08T02:54:50.356Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":4,"body":"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.\n\n## Login Page\n\nFound in: ``components/customer/login/Login Form/component.html``\n\nThe login page has a <form> that POSTs the email and password inputs to ``/customer/login``. Submitting this form will redirect the customer to the account page.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<form action=\\\"/customer/login\\\" method=\\\"post\\\" accept-charset=\\\"utf-8\\\">\\n    <input type=\\\"email\\\" name=\\\"email\\\" placeholder=\\\"Email address\\\">\\n    <input type=\\\"password\\\" name=\\\"password\\\" placeholder=\\\"Password\\\">\\n    <button type=\\\"submit\\\" class=\\\"btn btn-primary fullsize\\\">LOGIN</button>\\n</form>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n## Account Overview\n\nFound in: ``components/customer/account/Account Information/component.html``\n\nThe 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:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{{ customer_helper.show_subscription_info() }}\\n{{ customer_helper.show_basic_account_info() }}\\n{{ customer_helper.show_shipping_address_info() }}\\n{{ customer_helper.show_payment_info() }}\",\n      \"language\": \"jinja2\"\n    }\n  ]\n}\n[/block]\n## Account Edit\n\nFound in: ``components/customer/edit/Edit Information/component.html``\n\nThe edit page is where a customer would make changes to their account information. \n\nThe following customer helper methods are used on this page to generate the page layout:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{{ customer_helper.edit_basic_account_info() }}\\n{{ customer_helper.edit_payment_info() }}\\n{{ customer_helper.edit_address_info() }}\",\n      \"language\": \"jinja2\"\n    }\n  ]\n}\n[/block]\n## Thank You Page\n\nFound in: ``components/customer/thank_you/Account Info/component.html``\n\nThe 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.\n\nThe following customer helper method should be used on this page to generate the page layout:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{{ customer_helper.order_page(\\\"Thank you!\\\") }}\",\n      \"language\": \"jinja2\"\n    }\n  ]\n}\n[/block]\nA typical ``components/customer/thank_you/Account Info/component.html`` file is:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<section class=\\\"order row\\\">\\n\\t<div class=\\\"col-xs-12\\\">\\n\\t\\t<!--\\n\\t\\t\\tThe HTML for the order thank you page is rendered automatically by Cratejoy and\\n\\t\\t\\tcannot be modified. You can change the way it looks by editing the css though.\\n\\t\\t\\tThere are examples of this in css/style.css\\n\\t\\t-->\\n\\t\\t{{ customer_helper.order_page(\\\"Thank you!\\\") }}\\n\\t</div>\\n</section>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n## Order\n\nFound in: ``components/customer/order/Order/component.html``\n\nThe 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.\n\nThe following customer helper method should be used on this page to generate the page layout:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{{ customer_helper.order_page() }}\",\n      \"language\": \"jinja2\"\n    }\n  ]\n}\n[/block]\nA typical ``components/customer/order/Order/component.html`` file is:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<section id=\\\"customer-order-order\\\" class=\\\"order\\\">\\n\\t<div class=\\\"container\\\">\\n\\t\\t<div class=\\\"row content\\\">\\n\\t\\t\\t{{ customer_helper.order_page() }}\\n\\t\\t</div>\\n\\t</div>\\n</section>\\n\",\n      \"language\": \"text\"\n    }\n  ]\n}\n[/block]\n## Forgot Password Page\n\nFound in: ``components/customer/forgot_password/Forgot Password Form/component.html``\n\nThe 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.\n\nA typical ``components/customer/forgot_password/Forgot Password Form/component.html`` looks like this:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{% include \\\"components/form_feedback.html\\\" %}\\n\\n<section id=\\\"customer-forgot-password-forgot-password-form\\\" class=\\\"row\\\"> <!-- Begin form -->\\n\\t<div class=\\\"card col-md-6 col-md-offset-3 col-xs-10 col-xs-offset-1\\\">\\n\\t\\t<div class=\\\"card-block\\\">\\n\\t\\t\\t<form action=\\\"/customer/forgot\\\" class=\\\"simple-form form-horizontal\\\" method=\\\"post\\\" accept-charset=\\\"utf-8\\\">\\n\\t\\t\\t\\t<div class=\\\"form-group\\\">\\n\\t\\t\\t\\t\\t<input id=\\\"email\\\" name=\\\"email\\\" type=\\\"email\\\" placeholder=\\\"Email address\\\" class=\\\"form-control input-xlarge\\\" required=\\\"\\\">\\n\\t\\t\\t\\t</div>\\n\\n\\t\\t\\t\\t<div class=\\\"form-group text-center\\\">\\n\\t\\t\\t\\t\\t<button id=\\\"submit\\\" name=\\\"submit\\\" class=\\\"btn btn-med btn-primary\\\">Submit</button>\\n\\t\\t\\t\\t</div>\\n\\t\\t\\t</form>\\n\\t\\t</div>\\n\\t</div>\\n</section> <!-- End form -->\\n\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n## Password Reset Form\n\nFound in ``components/customer/password_reset/Password Reset Form/component.html``\n\nThe 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``\n\nA typical ``components/customer/password_reset/Password Reset Form/component.html``:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{% include \\\"components/form_feedback.html\\\" %}\\n\\n<section id=\\\"customer-password-reset-password-reset-form\\\" class=\\\"form row\\\"> <!-- Begin form -->\\n\\t<div class=\\\"card col-md-6 col-md-offset-3 col-xs-10 col-xs-offset-1\\\">\\n\\t\\t<div class=\\\"card-block\\\">\\n\\t\\t\\t<form action=\\\"/customer/password_reset\\\" class=\\\"simple-form form-horizontal\\\" method=\\\"post\\\" accept-charset=\\\"utf-8\\\">\\n\\t\\t\\t\\t<div class=\\\"form-group\\\">\\n\\t\\t\\t\\t\\t<label for=\\\"email\\\">Email</label>\\n\\t\\t\\t\\t\\t<input class=\\\"form-control\\\" name=\\\"email\\\" type=\\\"email\\\" {% if email %}value=\\\"{{ email }}\\\"{% endif %} required=\\\"required\\\" >\\n\\t\\t\\t\\t</div>\\n\\n\\t\\t\\t\\t<div class=\\\"form-group\\\">\\n\\t\\t\\t\\t\\t<label for=\\\"temporary_key\\\">Temporary Key</label>\\n\\t\\t\\t\\t\\t<input class=\\\"form-control\\\" name=\\\"temporary_key\\\" type=\\\"text\\\" {% if temporary_key %}value=\\\"{{ temporary_key }}\\\"{% endif %} required=\\\"required\\\" >\\n\\t\\t\\t\\t</div>\\n\\n\\t\\t\\t\\t<div class=\\\"form-group\\\">\\n\\t\\t\\t\\t\\t<label for=\\\"password\\\">New Password</label>\\n\\t\\t\\t\\t\\t<input class=\\\"form-control\\\" name=\\\"password\\\" type=\\\"password\\\" required=\\\"required\\\" >\\n\\t\\t\\t\\t</div>\\n\\n\\t\\t\\t\\t<div class=\\\"form-group\\\">\\n\\t\\t\\t\\t\\t<label for=\\\"password2\\\">New Password Again</label>\\n\\t\\t\\t\\t\\t<input class=\\\"form-control\\\" name=\\\"password2\\\" type=\\\"password\\\" required=\\\"required\\\" placeholder=\\\"Repeat your password\\\">\\n\\t\\t\\t\\t</div>\\n\\n\\t\\t\\t\\t<div class=\\\"form-group text-center\\\">\\n\\t\\t\\t\\t\\t<button id=\\\"submit\\\" name=\\\"submit\\\" class=\\\"btn btn-med btn-primary\\\">Submit</button>\\n\\t\\t\\t\\t</div>\\n\\t\\t\\t</form>\\n\\t\\t</div>\\n\\t</div>\\n</section> <!-- End form -->\\n\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]","excerpt":"Customer pages handle all the customer account related functionality","slug":"customer-pages","type":"basic","title":"Customer Pages"}

Customer Pages

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 <form> that POSTs the email and password inputs to ``/customer/login``. Submitting this form will redirect the customer to the account page. [block:code] { "codes": [ { "code": "<form action=\"/customer/login\" method=\"post\" accept-charset=\"utf-8\">\n <input type=\"email\" name=\"email\" placeholder=\"Email address\">\n <input type=\"password\" name=\"password\" placeholder=\"Password\">\n <button type=\"submit\" class=\"btn btn-primary fullsize\">LOGIN</button>\n</form>", "language": "html" } ] } [/block] ## 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: [block:code] { "codes": [ { "code": "{{ customer_helper.show_subscription_info() }}\n{{ customer_helper.show_basic_account_info() }}\n{{ customer_helper.show_shipping_address_info() }}\n{{ customer_helper.show_payment_info() }}", "language": "jinja2" } ] } [/block] ## 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: [block:code] { "codes": [ { "code": "{{ customer_helper.edit_basic_account_info() }}\n{{ customer_helper.edit_payment_info() }}\n{{ customer_helper.edit_address_info() }}", "language": "jinja2" } ] } [/block] ## 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: [block:code] { "codes": [ { "code": "{{ customer_helper.order_page(\"Thank you!\") }}", "language": "jinja2" } ] } [/block] A typical ``components/customer/thank_you/Account Info/component.html`` file is: [block:code] { "codes": [ { "code": "<section class=\"order row\">\n\t<div class=\"col-xs-12\">\n\t\t<!--\n\t\t\tThe HTML for the order thank you page is rendered automatically by Cratejoy and\n\t\t\tcannot be modified. You can change the way it looks by editing the css though.\n\t\t\tThere are examples of this in css/style.css\n\t\t-->\n\t\t{{ customer_helper.order_page(\"Thank you!\") }}\n\t</div>\n</section>", "language": "html" } ] } [/block] ## 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: [block:code] { "codes": [ { "code": "{{ customer_helper.order_page() }}", "language": "jinja2" } ] } [/block] A typical ``components/customer/order/Order/component.html`` file is: [block:code] { "codes": [ { "code": "<section id=\"customer-order-order\" class=\"order\">\n\t<div class=\"container\">\n\t\t<div class=\"row content\">\n\t\t\t{{ customer_helper.order_page() }}\n\t\t</div>\n\t</div>\n</section>\n", "language": "text" } ] } [/block] ## 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: [block:code] { "codes": [ { "code": "{% include \"components/form_feedback.html\" %}\n\n<section id=\"customer-forgot-password-forgot-password-form\" class=\"row\"> <!-- Begin form -->\n\t<div class=\"card col-md-6 col-md-offset-3 col-xs-10 col-xs-offset-1\">\n\t\t<div class=\"card-block\">\n\t\t\t<form action=\"/customer/forgot\" class=\"simple-form form-horizontal\" method=\"post\" accept-charset=\"utf-8\">\n\t\t\t\t<div class=\"form-group\">\n\t\t\t\t\t<input id=\"email\" name=\"email\" type=\"email\" placeholder=\"Email address\" class=\"form-control input-xlarge\" required=\"\">\n\t\t\t\t</div>\n\n\t\t\t\t<div class=\"form-group text-center\">\n\t\t\t\t\t<button id=\"submit\" name=\"submit\" class=\"btn btn-med btn-primary\">Submit</button>\n\t\t\t\t</div>\n\t\t\t</form>\n\t\t</div>\n\t</div>\n</section> <!-- End form -->\n", "language": "html" } ] } [/block] ## 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``: [block:code] { "codes": [ { "code": "{% include \"components/form_feedback.html\" %}\n\n<section id=\"customer-password-reset-password-reset-form\" class=\"form row\"> <!-- Begin form -->\n\t<div class=\"card col-md-6 col-md-offset-3 col-xs-10 col-xs-offset-1\">\n\t\t<div class=\"card-block\">\n\t\t\t<form action=\"/customer/password_reset\" class=\"simple-form form-horizontal\" method=\"post\" accept-charset=\"utf-8\">\n\t\t\t\t<div class=\"form-group\">\n\t\t\t\t\t<label for=\"email\">Email</label>\n\t\t\t\t\t<input class=\"form-control\" name=\"email\" type=\"email\" {% if email %}value=\"{{ email }}\"{% endif %} required=\"required\" >\n\t\t\t\t</div>\n\n\t\t\t\t<div class=\"form-group\">\n\t\t\t\t\t<label for=\"temporary_key\">Temporary Key</label>\n\t\t\t\t\t<input class=\"form-control\" name=\"temporary_key\" type=\"text\" {% if temporary_key %}value=\"{{ temporary_key }}\"{% endif %} required=\"required\" >\n\t\t\t\t</div>\n\n\t\t\t\t<div class=\"form-group\">\n\t\t\t\t\t<label for=\"password\">New Password</label>\n\t\t\t\t\t<input class=\"form-control\" name=\"password\" type=\"password\" required=\"required\" >\n\t\t\t\t</div>\n\n\t\t\t\t<div class=\"form-group\">\n\t\t\t\t\t<label for=\"password2\">New Password Again</label>\n\t\t\t\t\t<input class=\"form-control\" name=\"password2\" type=\"password\" required=\"required\" placeholder=\"Repeat your password\">\n\t\t\t\t</div>\n\n\t\t\t\t<div class=\"form-group text-center\">\n\t\t\t\t\t<button id=\"submit\" name=\"submit\" class=\"btn btn-med btn-primary\">Submit</button>\n\t\t\t\t</div>\n\t\t\t</form>\n\t\t</div>\n\t</div>\n</section> <!-- End form -->\n", "language": "html" } ] } [/block]