Create an Order Manager Dashboard using Channel Forms


Wouldn’t it be great if you could view and edit all your Ecommerce Orders in one place, in a concise format, without distractions?



Order Management Dashboard in ExpressionEngine

Need to give your client's order management staff a cleaner and simpler way to process website orders? The Channel Form tools in ExpressionEngine can open up a whole new set of options when it comes to processing order data controlled by EE.

Whilst the user interface in ExpressionEngine is very easy to use, managing order data within ExpressionEngine itself can be overwhelming and confusing for the average user, so we like to give clients some additional external screens to manage website content and data, to make life a little easier or even to achieve something not currently possible within EE itself.

We use Channel Forms to build custom-designed Dashboards, to help clients:
  • view and edit customer orders on their ecommerce sites.

  • manage their site's main SEO content and tags.

  • manage quote requests, job records or customer relationships.

  • and more...

Ecommerce Order Manager Dashboard


Jumping in and out of editing Entries within ExpressionEngine is fine, and the Order Manager tools provided by the EE ecommerce plugins, such as CartThrob, are getting better all the time, but sometimes it's necessary to provide simpler day-to-day tools.

An Ecommerce Order Manager Dashboard, arranges all the Order Entries from a specified Orders Channel into a standalone frontend and just presents the basic order info in a single view, so you can easily process the orders. This helps improve order processing efficiency and helps prevent any data being accidentally edited, prior to Shipping.

Simple Order Manager Dashboard Example


In this screenshot, you can see an Order Manager Dashboard displaying all the most recent orders for a website selling soap products. This includes key data such as customer name, customer location, total amount, date/time, order number and the order status.

Basic Order Management Dashboard

You can see it simply list all the orders with the latest at the top, with a “View” button to display an invoice or packing sheet, and a Status change dropdown menu with Update button.
The Order Number button on the left, links through to an Edit screen, but I wont cover that functionality here.

The main code used to output this information, which is styled using the Bootstrap CSS framework, is as follows:

{exp:channel:entries channel="orders" status="Paid|Printed|Shipped" dynamic="no" orderby="date" sort="desc"}
    {exp:channel:form channel="{channel_short_name}" entry_id="{entry_id}" return="dashboard"}
        <div class="row">
            <div class="col-md-1"><a href="{url_title_path="edit"}">{title}</a></div>
            <div class="col-md-2">
                <strong>{order_billing_first_name} {order_billing_last_name}</strong>
                <span>{order_billing_city}<br>{order_billing_zip}</span>
            </div>
            <div class="col-md-1">£ {order_total}</div>
            <div class="col-md-2">{entry_date format="%D %j<sup>%S</sup> %M %Y<span>%g:%i %a</span>"}</div>
            <div class="col-md-1">{status}</div>
            <div class="col-md-1"><a href="{url_title_path="view"}" target="_blank">View</a></div>
            {if status == “Paid”}
                <div class="col-md-3">
                    {status_menu}<select name="status">{select_options}</select>{/status_menu}
                    <button type="submit">Update</button>
                </div>
            {/if}
        </div>
    {/exp:channel:form}
{/exp:channel:entries}

You can see this code mostly just outputs data already stored in the database, but there is a simple Status dropdown menu and Update button, which will submit the Channel Form to change the order status from 'Paid' to 'Shipped', or whatever you like.


Detailed Order Manager Dashboard Example


However, I find there is a need for more data on this Dashboard and for a little more logic, to give this screen more features.

In the following screenshot, this is how the Dashboard looks if we introduce more options for each Order's row.

Advanced Order Manager Dashboard

Each order summary row now includes:
  • The payment gateway used.

  • The tracking number for the Shipped orders.

  • Quick status change buttons (Printed, Shipped).

  • Auto-send of order status change email, when changed to Shipped, using CartThrob's Notifications.


Additionally, there are separate screens available to list orders of a specific Status, such as “Awaiting Payment” or “Failed”. These use essentially the same {exp:channel:entries} code loop, but have the required Status set in the Parameters.

To achieve this added functionality, the main code is now as follows:

{exp:channel:entries channel="orders" status="Paid|Printed|Shipped" dynamic="no" orderby="date" sort="desc"}
    {exp:channel:form channel="{channel_short_name}" entry_id="{entry_id}" return="dashboard"}
        <div class="row">
            <div class="col-md-1"><a href="{url_title_path="edit"}">{title}</a></div>
            <div class="col-md-2">
                <strong>{order_billing_first_name} {order_billing_last_name}</strong>
                <span>{order_billing_city}<br>{order_billing_zip}</span>
            </div>
            <div class="col-md-1">
                £ {order_total}
                <span>{order_payment_gateway}</span>
            </div>
            <div class="col-md-2">{entry_date format="%D %j<sup>%S</sup> %M %Y<span>%g:%i %a</span>"}</div>
            <div class="col-md-1">{status}</div>
            <div class="col-md-1"><a href="{url_title_path="view"}" target="_blank">View</a></div>

            {if status == "Paid"}
                <div class="col-md-3">
                    <input type="hidden" name="status" value="Printed" />
                    <button type="submit">Printed</button>
                </div>
                
            {if:elseif status == "Printed"}
                <div class="col-md-2">
                    <input type="text" name="order_shipping_tracking" id="order_shipping_tracking" value="" placeholder="Tracking No" />
                    {field:order_shipping_notracking}
                </div>
                <div class="col-md-2">
                    <input type="hidden" name="status" value="Shipped" />
                    <button type="submit">Shipped</button>
                </div>
                
            {if:elseif status == "Shipped"}
                <div class="col-md-2">
                    {if order_shipping_tracking}{order_shipping_tracking}
                    {if:else}Shipped without tracking{/if}
                </div>
            {/if}
        </div>
    {/exp:channel:form}
{/exp:channel:entries}

The small amount of logic {if}{if:else}{/if} used with the Entry Status, is just there to output the desired content or form field, depending on the current Status of the order. Used alongside the submit button and a hidden Status field, the order's Status can be changed with a single click.


The next step?


This just the tip of the iceberg, where Dashboards and Channel Forms are concerned. There are so many other options and uses, that they can utilised for, to help in so many situations.

With this Order Manager Dashboard for example, I have also provided the following features and functions:
  • Order search.

  • Order editing.

  • Customer (member) management.

  • Custom reports.


Have a go yourself and see how useful Channel Forms can be. And, of course, if you get stuck, you can:
  • Check out the EE Docs for help with Channel Forms

  • Get in touch with IC360 (ExpressionEngine Silver Partner)

IC360 Limited

0333 1234 360

enquiries@ic360.com
www.ic360.com


ExpressionEngine Silver Partner


Green Website Hosting
  • IC you are serious about your company website!
  • IC you are serious about your branding and identity!
  • IC you want a seriously great business website design!
  • IC you've come to the right place. Great start!
IC360 provide only the best website design, ecommerce websites and easy to use - yet powerful - content management systems.

Established since 1999, we have the experience that counts, customer service that matters and high production values that make a difference.