Account pages for an eCommerce

CMS > eCommerce
1

Is it possible to create or setup user account when checkout to manage the user profile?

Is there any way from where user can login/register and manage their profiles, orders etc?

2

Hi @Priyank_Patel. Welcome to the forum!

Yes, component modules for listing orders and cases are now available and will be added to the documentation this week.

Logged in users can update their details via the Update Account Form found under the ā€˜Secure Zoneā€™ section of the component Manager:
image

You could have a separate register/login form or perhaps you can add the registration/password fields to the checkout form to do this at time of checkout (although I havenā€™t tested this).

Also, hereā€™s a link to the Secure Zone documentation:
https://docs.treepl.co/content-modules/secure-zones

3

@Adam.Wilson

Great, Thanks for the reply!

Also, is there any way to show the user acount details as a profile page?

I will try it to test and let you know if it will work.

4

Adam, I look forward to documentation on that. I wonder, with orders, will it show credits like Gift Vouchers and maybe even balances if say only part of a gift voucher was used on a purchase?

5

Update:
Documentation now added for various eCommerce related components, including:

Orders

https://docs.treepl.co/component-types/orders

Cases

https://docs.treepl.co/component-types/cases

2 Likes
6

I added more content into the secure zone ā€œAccount Settingsā€ page that shows the profile update form and using the ā€œOrderā€ module to list a customerā€™s orders, but Iā€™m not sure how to link to a page for specific details of each order.

I have a ā€œDetailsā€ button for linking to href="/secure-zone/purchase-details?id={{order.id}}", but Iā€™m not sure on the Purchase Details page how to get the url parameter {{order.id}} and use it to filter the orders by that particular ID when the page builds.
Does @Adam.Wilson or anyone have a suggestion for this?

Thanks for any help.

7

You can get your URL parameter with the following Liquid:

{{request.request_url.params.id}}

So you can then use this to filter the Order component:

{% component type: "orders", filterBy: "Id", filterValue: "{{request.request_url.params.id}}" %}

Since you are wanting this to be a detailed page, youā€™ll need to build that yourself, so Iā€™d suggest suppressing the default layout and creating a collection:

{% component type: "orders", layout: "", collectionVariable: "orderData", filterBy: "Id", filterValue: "{{request.request_url.params.id}}", layout: "" %}

Then you can access any of the data like so:

{{orderData.items[0].Name}}
{{orderData.items[0].InvoiceNumber}}
{{orderData.items[0].AmountPaid}}
etc...

(see all data available here: orders )

1 Like
8

Great, thank you for this. Iā€™ll give it a go!

9

@g.davis Basically we do what @Adam.Wilson wrote. We are using the same HTML layout for the email invoice and the order detail page. This way customers can print duplicates of their invoices from their user accounts. And we use this service to offer a download of the invoice as PDF: https://pdfcrowd.com/

1 Like