00:00:06:00 - 00:00:08:08
So looking first
at the end user experience,
00:00:08:08 - 00:00:11:27
although we've sort of covered
a lot of this in previous tutorials
00:00:12:06 - 00:00:16:22
as we've been performing other tasks,
this section purely focuses on the end
00:00:16:22 - 00:00:20:10
user experience of your storefront
that we've been working on.
00:00:21:28 - 00:00:23:18
So the first thing we're going to do
is make sure
00:00:23:18 - 00:00:26:00
we're in a scenario
where we can view this correctly.
00:00:27:04 - 00:00:30:22
So I'm logged in
as my storefront administrator, which,
00:00:30:22 - 00:00:34:12
if I view the storefront,
may not give me the same experience as a
00:00:34:21 - 00:00:36:14
as a general user.
00:00:36:14 - 00:00:38:24
That accesses my storefront.
00:00:38:24 - 00:00:41:15
So what we're going to do is create
a brand new customer
00:00:41:16 - 00:00:44:12
using the same methodology
we've seen in previous tutorials,
00:00:45:20 - 00:00:46:11
where the only
00:00:46:11 - 00:00:49:06
information we're going to put in
is an email address
00:00:51:13 - 00:00:54:00
and a password.
00:00:55:12 - 00:00:59:18
Customer roles will be left as the default
selection of registered only.
00:00:59:26 - 00:01:04:01
That means that they're quite simply
just the activated user
00:01:04:10 - 00:01:07:06
on that particular storefront
with no additional
00:01:07:06 - 00:01:09:18
privileges.
00:01:11:02 - 00:01:13:25
Click Save to confirm the user.
00:01:13:25 - 00:01:15:29
And then next we're going to click
Impersonate
00:01:15:29 - 00:01:19:27
to view the storefront
as that particular user would.
00:01:19:27 - 00:01:22:15
You'll be taken to the home
page, will be able to interact
00:01:22:15 - 00:01:26:12
with the frontend
as if they had logged in.
00:01:30:08 - 00:01:30:24
So as you're
00:01:30:24 - 00:01:34:21
impersonating a registered user,
you will not have the admin
00:01:34:21 - 00:01:38:08
button available on the top right
to actually get back to the admin area.
00:01:38:29 - 00:01:41:27
You will however see a character icon here
00:01:42:11 - 00:01:46:03
indicating that you are currently
impersonating this user.
00:01:46:03 - 00:01:47:18
Hovering over the my account
00:01:47:18 - 00:01:51:13
dropdown will also give you the ability
to finish the impersonation.
00:01:51:23 - 00:01:52:12
Now of course,
00:01:52:12 - 00:01:56:14
this is only because you are impersonating. Your end users when they log in,
00:01:56:21 - 00:02:00:02
Wouldn't necessarily see this.
00:02:03:11 - 00:02:03:21
Over the
00:02:03:21 - 00:02:07:07
previous few tutorials, we've done
some work on this particular storefront.
00:02:07:18 - 00:02:10:20
What we're going to do now
is just select configure and add
00:02:10:20 - 00:02:13:03
different products to our basket.
00:02:13:20 - 00:02:16:24
Now we've created a significant selection
of different scenarios
00:02:16:24 - 00:02:18:05
to experiment with.
00:02:18:05 - 00:02:20:22
This is such as different product types.
00:02:21:01 - 00:02:23:27
So we've got stock
products, we've got sample
00:02:23:27 - 00:02:26:17
PDF products, we've tried mega
edit products.
00:02:27:18 - 00:02:30:27
We've also got a selection of products
available on the home page.
00:02:31:06 - 00:02:34:20
We've got categories available on the home
page, products
00:02:34:20 - 00:02:37:03
available through the search feature,
which is up in the top.
00:02:37:03 - 00:02:37:29
Right.
00:02:38:10 - 00:02:41:26
We've also seen that we can add different
quantities of products
00:02:42:02 - 00:02:44:06
and we can configure products
via mega edit.
00:02:44:26 - 00:02:48:26
So we'll investigate
a few of these possibilities,
00:02:48:26 - 00:02:52:24
add a few things to our basket,
and then we'll head over to our basket
00:02:52:24 - 00:02:58:28
where we can see details of the work
that we've done.
00:03:12:00 - 00:03:16:12
Further changes can be made from
within the basket itself, such as deletion
00:03:16:12 - 00:03:21:23
of any of the items in the basket
and amendment of the quantity.
00:03:21:23 - 00:03:25:22
If it's a product such as a mega
edit product, you have got the ability
00:03:25:22 - 00:03:27:09
to edit design as well,
00:03:27:09 - 00:03:31:10
which will take you back to the mega
edit editor to further modify the product
00:03:34:08 - 00:03:36:23
or the product
types you have the ability, for example,
00:03:36:23 - 00:03:40:22
such as edit options
which will take you to
00:03:40:22 - 00:03:43:18
a page or a quote page essentially
00:03:43:23 - 00:03:48:03
where you can change the details
of that particular product.
00:03:48:03 - 00:03:56:20
You’ve added to the basket.
00:03:57:13 - 00:03:59:23
So click on checkout to begin the one page
00:03:59:23 - 00:04:01:24
checkout procedure
00:04:08:07 - 00:04:11:05
so the new user will not have
any registered addresses.
00:04:11:15 - 00:04:14:28
Enter a billing address details
to continue with the checkout.
00:04:15:13 - 00:04:18:07
A checkbox is also available
at the bottom of this section
00:04:18:13 - 00:04:20:25
to use the same address for delivery.
00:04:21:14 - 00:04:23:15
Once this has been entered
for the first order,
00:04:23:21 - 00:04:26:13
that information will be saved
with the customer's account
00:04:26:24 - 00:04:36:25
and they'll then be able to use that
for future orders as well.
00:04:36:29 - 00:04:40:05
The next stage of the checkout process
is the delivery selections.
00:04:40:18 - 00:04:44:26
We have specified several fixed rate
delivery options during the course
00:04:44:26 - 00:04:49:09
of these tutorials, which are now
displayed for the user to select between.
00:04:49:29 - 00:04:52:09
So we can see
we have our two default options
00:04:52:09 - 00:04:56:12
which are first class and second class,
which we didn't modify in our case,
00:04:56:12 - 00:04:59:14
and our additional specification,
the special delivery
00:05:01:18 - 00:05:04:27
and click continue.
00:05:04:27 - 00:05:09:14
But next we get taken
to the input of payment information.
00:05:10:00 - 00:05:15:05
So our rapid build storefront utilizes
purchase orders as the only payment type.
00:05:15:23 - 00:05:18:12
As in this case, we've
set it to mandatory, as you can see
00:05:18:12 - 00:05:20:14
by the star icon.
00:05:20:14 - 00:05:33:09
The user must specify a value
before they're able to continue.
00:05:33:09 - 00:05:38:05
The final stage of the one page checkout
process is to review the order summary.
00:05:38:17 - 00:05:41:01
This will show you details of the order
content
00:05:41:01 - 00:05:44:13
plus details on pricing, taxes, etc.
00:05:45:09 - 00:05:47:23
You can see at the bottom here
we have the subtotal of the basket
00:05:47:23 - 00:05:50:07
items, delivery price.
00:05:51:01 - 00:05:53:18
An additional fee in this case
from the selection of the purchase
00:05:53:18 - 00:05:55:24
order VAT
00:05:56:28 - 00:05:59:29
and then a total price.
00:06:03:22 - 00:06:04:19
Click on confirm
00:06:04:19 - 00:06:08:29
and this will price the order
in the Infigo system.
00:06:13:12 - 00:06:14:14
Your customer will then be
00:06:14:14 - 00:06:17:07
taken to an order confirmation page.
00:06:17:24 - 00:06:20:17
So the user is presented
with an order confirmation screen
00:06:20:25 - 00:06:23:16
where they're able to view
a reference number for the order
00:06:23:25 - 00:06:29:00
and they're able to click on a link here
to see additional order details.
00:06:29:00 - 00:06:32:22
Now, this will take them to an area
in my account section
00:06:33:02 - 00:06:35:27
which will show them details on any orders
that they've placed.
00:06:36:21 - 00:06:39:22
So clicking that link has taken us
directly to that specific order.
00:06:40:04 - 00:06:43:17
Alternatively, if we want to see
all orders associated with the user,
00:06:43:25 - 00:06:50:10
we can go on the My Accounts dropdown
and click on my orders.
00:06:50:10 - 00:06:52:14
We can see there
the order that has just been placed,
00:06:52:16 - 00:06:56:03
which is currently processing
00:06:56:11 - 00:06:57:20
click to see more details,
00:06:57:20 - 00:07:01:06
which is the individual state
of the products within the order.
00:07:01:27 - 00:07:11:19
And we can see some additional details.
