Customizing customer order display using HTML
You can also customize the look and feel of the customer order display via HTML coding. The customization requires a media file that creates the look and feel of the display and supports hyperlinks, section placement and orientation, customized colors, fonts, and graphics, and more.
Note: You must be proficient with the HTML language to customize a customer order display with HTML. Please ask your account manager if you want to see a sample media file or you can access the zipped CustomerOrderDisplayHTML file, where available.
When you create and save a new customer order display, the system creates a new directory in \Bootdrv\AlohaKitchen\CustomerDisplay\n\en, where n corresponds with the kitchen station ID number configured as a customer order display.
The system stores the following files in that directory:
- CustomerDisplay.html
- CustomerDisplayConfig.json
- JQuery-1.10.2.min.js
- Lato-Bold.ttf
- Lato-Regular.ttf
- ThinkLocal.png
A web developer uses CustomerDisplay.html as the main file. Rather than make changes to the main file, copy the file to \Import\CustomerDisplay folder from which you make your custom changes. You can copy and use any of the related files; however, most likely you will add your own files to support your HTML code. The CustomerDisplay.html file contains the data transfer object, 'CustomerOrderDto.' Use this object as a data structure to transfer information regarding an order from Aloha Kitchen to the running JavaScript.
The CustomerOrderDto has the following properties:
| Property Name | Description |
|---|---|
| ID | The unique ID of the order. |
| Number | The order number. |
| Name | The name of the order. |
| State | A number, from 0 to 4, indicating in order; 'Not prepared,' 'Partially prepared,' 'Fully prepared without forecast bin items,' 'Fully prepared,' and 'Served.' |
| State label | A label describing the state of the order. |
| Seat | The seat number. |
| TotalSeconds | The total number of seconds lapsed since the order was routed to the customer order display. |
| IsAddOn | An indicator to depict if this order is an add-on to another order. |
When customizing the customer order display via HTML, you should adhere to the following best practices:
- Keep the design clean and simple so guests can easily find the information they need.
- Most guests only care whether their order is in progress or ready. Creating other sections on the display may lead to confusion.
- Ensure you do not create JavaScript that interferes with the Aloha Kitchen operations or with communications to the customer order display.
- Use professional, easy-to-read fonts on the screen.
- Ensure you perform thorough testing.
To customize the customer order display via HTML:
- Navigate to \Bootdrv\AlohaKitchen\customerdisplay\n\en, and copy CustomerDisplay.html.
- Navigate to \Bootdrv\AlohaKitchen\import\CustomerDisplay and paste CustomerDisplay.html.
- Add any related content, such as fonts, images, videos, JavaScript (.js files), CSS (.css files), and more to the \Bootdrv\AlohaKitchen\import\customerdisplay directory. If you want to use any existing content, such as fonts, from the previous directory, you can copy and paste the files as you did with CustomerDisplay.html.
- Edit your custom CustomerDisplay.html and include the following JavaScript functions. This is mandatory to ensure that Aloha Kitchen can communicate and interact with the customer order display.
- function ShowOrUpdateOrder (OrderDto)
- function RemoveOrder (orderID)
- function RemoveOrderAtIndex (index)
- Alter all other HTML, JavaScript, and CSS content, as desired. In the default implementation, the JavaScript loads configuration settings, and generates an HTML table at initialization. When Aloha Kitchen executes any of the three listed JavaScript functions, the system updates the information and regenerates the HTML tables.