View Order Custom Tab

Allows a custom template to be rendered within the back-end View Order page.

Overview

This feature allows you to render custom content within the Back-end View Order page that is pertinent to your order fulfilment process.

For example, this could be a Customer Service tab that shows specific processing instructions based upon the order status, payment type or returns status.

🚧
The View Order Custom Tab is for display purposes only and does not support any interactive processes.
All other elements and features on the View Order page are subject to change without warning.
The content embedded within the custom tab should be entirely autonomous, should not interact with any other elements on the page and must be able to react to changes in the orientation of the overall UI.
If an issue occurs on the View Order page, Aurora Commerce reserves the right to disable the custom tab without warning until the issue is resolved.

How to Enable the Custom Tab

To enable the View Order Custom Tab, you must compete the following steps:

Enable the Custom Tab and set an optional Tab Name within:
Store > Settings > Aurora > Orders > View Order Custom Tab
Create a template within your front-end templates directory i.e.
admin/orders/custom-tab.tpl.html

Custom Tab Name

The name of the tab can also be customised by setting the Custom Tab Name value.

This can be a maximum of 16 alphanemuic, hyphen, underscore or space characters.

Custom Tab Placement

The Custom Tab will appear as the last tab within the View Order page using an iFrame with a relative width of 100% and absolute height of 400px e.g.

It should be possible to change the size of the iframe to suit the content from within the custom tab template itself e.g.

window.parent.document.getElementById('custom_tab_iframe').width = '500px';
window.parent.document.getElementById('custom_tab_iframe').height = '500px';

Use the Custom Tab as the Default Tab

If you would like the Custom Tab to be selected as the default tab on page load, this can be set within:
Store > Settings > Aurora > Orders > Default View Order Tab

Custom Tab Template Variables

The following view variables are available within the custom tab template:

Variable Name	Type	Description
$order	Array	Order details, plus data-points specified below.
$order.additional_fields	Array	A key/value list of additional fields for the order i.e. field name => field value
$order.items	Array	A list of all ordered items.
$order.itemsis	Array	Ordered item details, plus data-points specified below.
$order.itemsThi.additional_fields	Array	A key/value list of additional fields for the ordered item i.e. field name => field value
$order.itemsThi.product	Array	Product details for the ordered item.
$order.itemsThi.product.additional_fields	Array	A key/value list of additional fields for the ordered product i.e. field name => field value
$order.itemsThi.product.variation	Array	Variation details for the ordered item.
$order.itemsThi.product.variation.additional_fields	Array	A key/value list of additional fields for the ordered variation i.e. field name => field value
$order.notes	Array	A list of order notes for the order.
$order.credit_notesure	Array	Order note details, plus data-points specified below.
$order.credit_notesatu.user_name	String	The name of the user who created the note.
$order.credit_notesatu.status_name	String	The order status at the time the order note was created.
$order.transactions	Array	A list of transactions for the order.
$order.transactionsure	Array	Order transaction details, plus data-points specified below.
$order.transactionsatu.admin_name	String	The name of the administrator user who processed the transaction.
$order.transactionsatu.additional_fields	Array	A key/value list of additional fields for the order transaction i.e. field name => field value
$order.credit_notes	Array	A list of credit notes for the order.
$order.credit_notesure	Array	Credit note details, plus data-points specified below.
$order.credit_notesatu.user_name	String	The name of the user who redeemed the credit note.
$order.credit_notesatu.admin_name	String	The name of the administrator who created the credit note.
$order.fraud_action	String	The fraud action of the most recent fraud result.
$order.fraud_results	Array	A list of fraud results for the order.
$order.fraud_resultsre	Array	Fraud result details, plus data-points specified below.
$order.fraud_resultstur.order_fraud_scores	Array	A list of scores for the fraud result.
$order.card_checks	Array	A list of payment transactions that contain card checks for the order.
$order.card_checkstur	Array	Order transaction details containing the following card check data-points: protx_avscv2 protx_addressresult protx_postcoderesult protx_cv2result protx_3dsecurestatus
$order.billing_address	Array	Billing address details for the order.
$order.delivery_address	Array	Delivery address details for the order.
$order.store	Array	Shipping store details for the order.
$order.discounts	Array	A list of discounts applied to the order.
$order.discountseat	Array	Discount details, plus data-points specified below.
$order.discounts fe.products	Array	A list of products included within the discount.
$order.discounts fe.productss y	Array	Product details for the discount.
$order.returns	Array	A list of returns for the order.
$order.returns fe	Array	Return details, plus data-points specified below.
$order.returnsis .user_name	String	The name of the user who processed the return.
$order.returnsis .status_name	String	The return status.
$order.returns_allowed	Integer	1 or 0 depending on whether returns are allowed for the specific order.
$order.refunds_allowed	Integer	1 or 0 depending on whether refunds are allowed for the specific order.
$order.exchanges_allowed	Integer	1 or 0 depending on whether exchanges are allowed for the specific order.
$countries	Array	A list of available shipping countries.
$countriesThi	Array	Country details.
$stores	Array	A list of available shipping stores.
$storesw	Array	Store details.

Custom Tab Example Template

As an example, please see the following Custom Tab template that will allow you to view all available variable data-points:

{assign var="vars" value=[order,countries,stores]}
{function name=printVar}
{if $item|is_array}
<span class="caret">{$label}</span>
<ul class="nested">
    {if $item|count > 0}
    {foreach from=$item key="key" item="val"}
        <li>{call name=printVar label=$key item=$val}</li>
    {/foreach}
    {else}
    <li><i>No values</i></li>
    {/if}
</ul>
{else}
<span class="value">{$label}: {if $item}{$item}{else}<i>No value</i>{/if}</span>
{/if}
{/function}
<div>
    <button id="toggle">Toggle All</button>
    <ul>
    {foreach from=$vars item="var"}
        <li>{call name=printVar label=$var item=${$var}}</li>
    {/foreach}
    </ul>
</div>
<style>{literal}
    ul {list-style-type: none;}
    .caret {cursor: pointer; user-select: none;}
    .caret::before {content: "\25B6"; color: black; display: inline-block; margin-right: 6px;}
    .value::before {content: "\25AE"; color: black; display: inline-block; margin-right: 6px;}
    .caret-down::before {transform: rotate(90deg);}
    .nested {display: none;}
    .active {display: block;}
{/literal}</style>
<script type="application/javascript">{literal}
    for (const caret of document.getElementsByClassName("caret")) {
        caret.addEventListener("click", function() {
            this.parentElement.querySelector(".nested").classList.toggle("active");
            this.classList.toggle("caret-down");
        });
    }
    document.getElementById("toggle").addEventListener("click", function() {
        for (const nested of document.getElementsByClassName("nested")) {
            nested.classList.toggle('active');
        }
        for (const caret of document.getElementsByClassName("caret")) {
            caret.classList.toggle('caret-down');
        }
    });
{/literal}</script>

Updated 17 days ago