Picture of Recent Orders Table | GT_GEN_009

Recent Orders Table | GT_GEN_009

There are some scenarios where a large amount of orders from certain Storefronts are re-orders of previously placed orders. In order to simplify the re-ordering process, a module has been developed which can be placed on any required area of your site (such as the home page) showing previous orders placed by the logged in user. This provides quick access to the order details page and subsequent quick access to re-ordering.

Tutorial Video Transcript

00:00:05:15 - 00:00:05:20
There

00:00:05:20 - 00:00:09:17
are some scenarios
where large amounts of orders from certain

00:00:09:17 - 00:00:13:06
storefronts are reorders
of previously placed orders.

00:00:14:04 - 00:00:16:23
In order
to simplify the reordering process,

00:00:16:23 - 00:00:19:05
a module has been developed
which can be placed on

00:00:19:05 - 00:00:22:09
any required area of your site,
such as the home page,

00:00:22:20 - 00:00:25:21
showing previous orders
placed by the logged in user.

00:00:26:10 - 00:00:30:07
This provides quick access
to the order details page and subsequent

00:00:30:07 - 00:00:33:07
quick access to reordering.

00:00:34:19 - 00:00:35:15
So we're going to begin

00:00:35:15 - 00:00:38:26
by clicking the show
Layout Administration panel.

00:00:39:12 - 00:00:42:18
So navigate to the front end
of your storefront and to whatever page

00:00:42:18 - 00:00:45:28
you wish
the recent orders module to be located.

00:00:46:14 - 00:00:49:18
And then once you're there,
click on this icon, which will appear

00:00:49:18 - 00:00:52:18
when you logged in as an administrator.

00:00:53:02 - 00:00:55:20
Now, other resources exist on the academy.

00:00:55:20 - 00:00:56:26
Going into more detail

00:00:56:26 - 00:01:00:22
on the use of the Layout Administration
panel, which appears here.

00:01:00:23 - 00:01:03:25
We're just going to be focusing
on the one required module.

00:01:05:09 - 00:01:07:13
So I'm just going to select the order

00:01:07:13 - 00:01:10:13
history table from the modules list

00:01:11:24 - 00:01:14:22
and determine
where I want this to be located.

00:01:14:22 - 00:01:17:22
From the containers list

00:01:18:02 - 00:01:21:02
and then click Add module to container.

00:01:26:24 - 00:01:31:10
The My recent orders
table will now be available on your page.

00:01:31:21 - 00:01:35:07
This contains information
such as clickable order numbers,

00:01:36:18 - 00:01:39:18
order dates, order status,

00:01:39:22 - 00:01:43:18
and also a tracking number
if it's applicable to the specific order.

00:01:44:14 - 00:01:48:00
If the tracking number was set
by means such as the easy post plugin,

00:01:48:07 - 00:01:52:00
it may also contain a clickable link
which will take you to the relevant page

00:01:52:06 - 00:01:55:06
on that external system.

00:01:56:00 - 00:01:57:09
If we click on the order ID,

00:01:57:09 - 00:02:00:14
it takes us to our relevant
order details page.

00:02:00:25 - 00:02:03:25
And from there, if you go to activate it
on your storefront,

00:02:03:25 - 00:02:08:05
you have the easy ability
to reorder that specific order.

00:02:13:28 - 00:02:14:26
Next, we'll take a look at

00:02:14:26 - 00:02:19:07
configuration options that you have
for the My recent Orders table.

00:02:19:22 - 00:02:22:20
To do this, I'm going to go to the back
end of my storefront

00:02:22:20 - 00:02:25:20
and navigate to the SEO settings.

00:02:26:13 - 00:02:29:09
So although it's not directly related,
the SEO

00:02:29:09 - 00:02:34:07
settings page contains a section
allowing the input of tracking scripts.

00:02:34:24 - 00:02:39:01
This also gives us the opportunity
to apply other scripts to run on the page.

00:02:39:14 - 00:02:43:03
We can input a script
related to our My recent Orders table,

00:02:43:12 - 00:02:46:23
allowing us to control the quantity
of previous orders

00:02:46:23 - 00:02:49:23
shown at one time.

00:02:49:29 - 00:02:54:07
So we've located our module
on the home page so I can go there.

00:02:54:28 - 00:02:58:09
And then we just want to make sure
that we add a new item to the tracking

00:02:58:09 - 00:02:59:06
script section.

00:02:59:06 - 00:03:00:18
Now you can see I've already got one
added,

00:03:00:18 - 00:03:02:16
so I'm just going to edit my existing one.

00:03:04:06 - 00:03:07:06
Enter a name
where the script is going to be located

00:03:07:08 - 00:03:10:08
and then this is the script
that we want to copy

00:03:10:08 - 00:03:13:08
and paste into this particular section.

00:03:13:27 - 00:03:16:27
There's a copy of the script
which you can just paste into here

00:03:16:28 - 00:03:18:16
available in the attached Tango.
<script>
var recentOrdersTableConfig =

00:03:18:16 - 00:03:18:28
{ defaultPerPage: 11, availablePageSizes:
[11, 21, 31, 40] } </script>

00:03:18:28 - 00:03:20:28
Once you've pasted
the new script into here,

00:03:20:28 - 00:03:23:29
you have the ability to modify the numbers
to suit your requirements.

00:03:24:12 - 00:03:28:06
So you see, we have a default value
per page and default

00:03:28:06 - 00:03:31:06
available page sizes
that we can choose from

00:03:34:11 - 00:03:36:00
also as input.

00:03:36:00 - 00:03:37:19
Scroll to the top and click on Save.

 

Incomplete
Step by Step Guide

Recent Orders Table | GT_GEN_009

There are some scenarios where a large amount of orders from certain Storefronts are re-orders of previously placed orders.

In order to simplify the re-ordering process, a module has been developed which can be placed on any required area of your site (such as the home page) showing previous orders placed by the logged in user. This provides quick access to the order details page and subsequent quick access to re-ordering.

Creation Date: Mar 13, 2024
Created By: Sam Webster

1. Click on Show layout administration panel

We begin by navigating to the front end of our Storefront to a page where we wish the recent orders module to be located.

Once there, click this icon.

Order resources exist within the Infigo Academy going into more detail on the use of the layout administration panel. Here, we will just be focusing on our one required module.

Click on Show layout administration panel

2. Select Order History Table from the modules list and determine where you want to locate it using the Containers list

Select Order History Table from the modules list and determine where you want to locate it using the Containers list

3. Click on Add Module To Container

Click on Add Module To Container

4. The My Recent Orders table will now be available on your page

This contains information such as a clickable order number, order date, order status and a tracking number (if applicable for the order).

If the tracking number was set by means such as our EasyPost plugin, it may also be a clickable link which will take you to the relevant page on the external system.

The My Recent Orders table will now be available on your page

5. Click on an order

Click on an order

6. Order page

Clicking the order ID will take you to the order page.

From here, you have quick access to the re-order function if it is enabled on your Storefront.

Order page

7. Next, we will look at the configuration options you have for the My Recent Orders table. Navigate to SEO Settings

Although not directly related, the SEO settings page contains a section allowing the input of tracking scripts. This also gives us an opportunity to apply other scripts to run on the page.

We can input a script related to our My Recent Orders table, allowing us to control the quantity of previous orders shown at one time.

Next, we will look at the configuration options you have for the My Recent Orders table. Navigate to SEO Settings

8. Click on the page header on which you've located the table

Click on the page header on which you've located the table

9. Add a new tracking script

Add a new tracking script

10. Input the required script

Copy and paste the following script:

<script> var recentOrdersTableConfig = { defaultPerPage: 11, availablePageSizes: [11, 21, 31, 40] } </script>

You can then modify the numbers to suit your requirements.

Input the required script

11. Click on Save

Click on Save
Alternate Search Terms