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:

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>