Inside The Checkout Receipt!

I wanted my checkout receipt to be able to be examined in full by the player at any time, once it had been printed, and to show the checkout items, total price, payment method and the player's name as the cashier, so it made sense to build a prefab for the checkout receipt, that could be spawned in when needed and populated with the relevant information on-the-fly.

The receipt prefab would then also need to be dynamically resized based on the number of checkout items that have been injected into it.

This image shows the hierarchy of the prefab (pf_inspect_checkout_receipt) next to the populated version of the receipt:

Prefab Components To Modify:

The components of the prefab that will need to be modified after being spawned into the scene will be:

• txt_company_name
chosen by the player as the name of the store he/she is working in.

• txt_date_stamp
populated from a function in a class that counts the in-game time with a co-routine.

• pnl_checkout_items
a UI panel with a vertical layout component that will be populated with new instances of another prefab (pf_checkout_receipt_item), one for each checkout item scanned into the till.

• txt_dots_top & txt_dots_bottom
these two <text> elements are already present in the receipt prefab and it's between these two sets of dots that the checkout items are injected.

• txt_total
holds the total price for the goods charged for.

• txt_payment_method
the customer can pay by "Cash" or "Card" (something still being developed), the selected method is also shown on the receipt.

• txt_change_due
holds the change due if payment method is "Cash".

• txt_served_by
you were served by <player's name>.

• txt_serial_num
i have been generating serial numbers for all products (it works especially well with the lottery system when scanning items in to avoid duplicates).

Injecting Receipt with Checkout Items

By looping the collection of checkout items stored in a List<Checkout_Item> in a script attached to the till/pos system , we instantiate a new instance of a prefab pf_checkout_receipt_item for each checkout item we find, which is then populated with the original description & price, and injected in between the txt_dots_top & txt_dots_bottom (in the vertical layout panel of the receipt prefab) by setting the SiblingIndex of the new item.

All UI elements in the prefab above pnl_checkout_items are set to pivot from the top of their container and the bottom elements to the bottom, therefore we just need to count the number of items we added to the panel, multiply that by the added-in prefab height and add that total to the original prefab height (originally sized to contain zero checkout items) and set the new height of the container, to keep everything looking right.

This C# script, that populates the receipt UI elements is attached directly to the prefab itself and the code is triggered from Awake() so that all we need to do is spawn the checkout receipt prefab into the scene and it will self-populate.

Barcodes:

Most products will have a barcode, this one was generated online and added to the checkout receipt prefab and should be able to be scanned from the screen (*haven't tried this yet) but adds a little authenticity to the product.

Thanks For Reading!