Kiosk Operating Guide

5Steps to a request

33Sample item lines

12Aisles & yard zones

0Payments handled

01What the kiosk does

The kiosk answers the four questions customers most often bring to the counter — what does it cost, do you have it, where is it, and can someone pull it for me — so the counter staff can spend their time preparing orders instead of walking the aisles.

It does

Price check by name, brand, SKU, barcode or category
Live on-hand quantity, with in stock / low stock / out of stock
Exact location — aisle, bay and shelf, plus a floor plan
Full product details: sizes, coverage, ratings, standards
A multi-item request list the customer checks and confirms
A printed order slip with a request number and QR code, taken to the cashier
Holds the stock on that slip for 15 minutes while the customer pays

It does not

Take payment — no cash, card or e-wallet, ever
Act as a POS terminal or issue official receipts
Release anything before payment — staff pull nothing until the cashier confirms
Apply discounts, or senior and PWD deductions — those are computed at the counter
Store customer names, numbers or any personal data

Why it matters Every amount the kiosk shows is a shelf-price estimate. The official amount is computed at the checkout lane. Keep this wording on screen — it is what keeps the kiosk out of POS territory.

Safeguards built into the flow

A kiosk that lets anyone queue up work for the staff invites two problems: orders nobody pays for, and stock promised twice. Each one is closed in the flow itself, not by asking staff to be careful.

The hole	What the kiosk does about it
Someone orders and never pays	Nothing is pulled until the cashier confirms payment. The slip holds the stock for 15 minutes, then releases it automatically; staff can also cancel a slip at the counter.
Two customers ordering the same last pieces	Stock held by an unpaid slip is subtracted from what the next customer sees as available, so the same three pieces cannot be promised twice.
Ordering more than the branch has	A list with a line above the available quantity cannot be turned into an order slip at all — the customer is never charged for stock that cannot be pulled.
Staff pulling an unpaid order	The queue shows Awaiting payment with a “do not pull” marker and a countdown. Confirming payment is a cashier action, separate from picking.
Someone else claiming the items	Goods are released only against the official receipt, which only the paying customer has. The request number alone claims nothing.
Arguing about the price at the counter	The slip is labelled an estimate and carries the time its prices were read; the cashier's amount is the official one and is computed before payment.
A customer walking away mid-list	The idle timeout clears the session and the list. If a slip was already issued, its hold expires on its own.

02The customer flow

One session runs top to bottom and ends at the cashier. The kiosk issues an order slip; the staff prepare nothing until the payment on that slip is confirmed. The only loop is the one that matters — the customer can keep adding items until the slip is issued.

Solid boxes are kiosk screens; dashed boxes happen away from the kiosk. Two gates control the flow: the customer must confirm the list before a slip exists, and the cashier must confirm payment before anything is pulled from the shelf.

Mapped to the original seven-step brief

Brief	Where it lives in the kiosk	Notes
1. Welcome screen	Attract screen	Promo loop, three panels, 5-second rotation. Any touch starts a session.
2. Task selection	Task menu	Four tiles. The choice changes what opens next — see §3.
3. Product search	Find the item	On-screen keyboard, category chips, barcode scan.
4. Inventory & location	Item details	Stock, price, aisle · bay · shelf, walking directions, floor plan.
5. Item selection / prep	Quantity → Your list	Availability is checked per line against what is actually free, and the whole list is confirmed before a slip is issued.
6. Confirmation	Order slip issued	Request number, QR code, printed slip, live status, and a countdown on the stock hold.
7. Checkout	Not in the kiosk — but it gates the flow	The customer pays first. Preparation starts only when the cashier confirms payment, and the goods are released against the receipt.

03Screen-by-screen guide

This is the section to hand to a new staff member. Each entry says what the customer sees and what they touch.

Welcome screen

idle state · returns here after 90 seconds of no touch

A rotating panel of this week's promos on the right, the store hours and the prep-counter location on the left, and a large “Touch to start”. The whole screen is the button.

Touch anywhere

Display preference

first screen of every session

Two large previews — bright and dark — so the customer can pick what is easier on their eyes before reading anything. The choice is remembered in the browser and can be changed any time from the top-right button. “Keep the store default” follows the operating system setting.

Bright displayDark displayKeep the store default

Task menu

four tiles · the choice changes the next screen

Find an item / price check and Product information both open the search, but product information opens the item on its specifications tab. Store directory opens the floor plan instead. Request items opens the search and then skips straight to the quantity screen when an item is opened.

Find an itemStore directoryProduct informationRequest itemsScan a barcode

Find the item

search · category chips · barcode

Touching the search field raises the keyboard from the bottom of the screen. Results update as each letter is entered — matching on product name, brand, SKU, barcode, category and aisle; every word typed must match. The results area only ever shows whole cards: the kiosk measures the space and pages the rest, so a price is never cut off. While the keyboard is up, results switch to compact rows.

Tap the field to typeCategory chipsScan barcodeBack / Next pageDone — hides keyboard

Item details

two tabs · where to find it, product details

Price per unit with VAT noted, the stock pill and the counted quantity, then the location block — aisle, bay and shelf as three large signage tiles — walking directions in plain language, and the floor plan with the aisle highlighted. The second tab carries the full specifications and the barcode.

Where to find itProduct detailsSearch againAdd to my list

Quantity

per item · availability checked before adding

Large plus and minus buttons, quick amounts (1, 2, 5, 10, 20, 50 — capped at what is on hand), and a live availability line. Asking for more than the counted stock does not block the customer; it warns that staff will confirm the balance. If the item is already on the list, the screen says how many are on it and adds on top.

− / +Quick amountsAdd to my listBack to the item

Your list — check it

the verification gate · nothing is sent before this

Every line shows a picture, the name, brand and SKU, where it will be pulled from, a quantity stepper, the line total and a remove button. Lines asking for more than the available quantity are highlighted in amber and block the slip entirely until they are lowered. The summary counts the items and pieces and gives an estimated total. “Get my order slip” stays disabled until the customer ticks “I checked my list” — and that tick clears itself whenever a quantity changes.

− / + per lineRemoveAdd another itemI checked my listGet my order slip

Order slip issued

pay first · request number · QR · printed slip · live status

One request number covers the whole list. The slip is headed “Pay first at the cashier” and carries every item with its quantity and pull location, the amount to pay as an estimate, the time the prices were read, and a clear “not a receipt”. A red banner states that nothing is being prepared yet and counts down the 15 minutes the stock is held. The moment the cashier confirms payment, the banner turns green and the status track moves to Being prepared on its own.

Print the order slipPrint with this browserStart another listDone — finish session

Session reset “Start over” in the top bar, “Done — finish session”, and the idle timeout all clear the same things: the task, the search, the open item and the whole list. Nothing carries over to the next customer.

04The staff prep queue

Opened from “Staff prep queue” at the bottom right. In production this is the screen that lives at the Order Prep counter, not inside the customer kiosk.

Each request is one card: the request number, how many items and pieces it holds, the amount, a status pill, and then every line with quantity, product name and the exact pull location so a staff member can walk the list in aisle order.

The rule the screen enforces An order slip sits in Awaiting payment with a “do not pull” marker until the cashier confirms it. Confirming payment is a cashier action; picking is a floor-staff action. Keeping them apart is what stops an unpaid order from being prepared.

Status	Meaning	Who moves it
Awaiting payment	Slip issued, stock held, nothing pulled. Shows the hold countdown.	Set automatically when the customer confirms the list
Preparing	Payment confirmed, released to the floor for picking	Cashier, with Confirm payment
Ready	Complete and waiting at the counter	Staff, when the last line is picked
Expired · stock released	Not paid within the hold window; the items went back to available	Automatic after 15 minutes, or staff with Cancel slip

Confirming payment does two things at once: it releases the order for picking, and it turns the soft hold into a real stock deduction — so the shelf count and what customers see as available stay honest.

Prototype behaviour Confirm payment and Cancel slip are real buttons on the staff view so the gate can be demonstrated. Preparation then completes on a 15-second timer. In production the cashier's POS confirms the payment and the floor staff mark the order ready.

05The customer display

A second screen, mounted above the Order Prep counter, doing what the queue board does at a bank or a fast-food counter: it shows every live order number and which of three states it is in, so nobody has to hover at the counter asking whether their order is ready.

Column	What it means to the customer	Colour
Waiting for payment	The slip exists but is not paid. Nothing is being pulled — go to a checkout lane.	Amber
Now preparing	Payment confirmed. Staff are walking the aisles for this order.	White
Ready for pick-up	Complete and waiting at the counter. Claim it with the receipt.	Green, and the number pulses when it first appears

Each entry shows the last four digits at wall-reading size, the full request number underneath, and how many items and pieces the order holds. Six numbers fit per column; the rest are counted as “+N more”. A ready number drops off the board 90 seconds after it appears. The footer rotates through the four things customers most often need to be told, so staff do not have to repeat them.

Where the numbers come from The display reads the same queue the kiosk writes. Open the kiosk and the display in two tabs on the same machine, send a list, and the number appears in Waiting for payment straight away; confirm payment in the staff view and watch it cross to Now preparing. With no kiosk data present, the board runs a sample queue on its own so a wall screen is never blank — the indicator in the top right says which of the two it is showing.

In production The display should subscribe to the store system rather than to a browser's local storage, so one board can serve several kiosks and tills. It is a read-only screen: it must never be able to change an order.

06Hardware specification

Recommended build for one kiosk unit. Nothing here is exotic; the whole thing runs in a browser.

Part	Specification	Notes
Touchscreen	21.5"–27", projected-capacitive, 10-point touch, 1080 × 1920 portrait or 1920 × 1080 landscape, ≥ 250 nits	The layout adapts to either orientation. Portrait fits more result cards; landscape fits the floor plan better.
Display screen	32"–43" commercial panel above the Order Prep counter, landscape, 1920 × 1080, ≥ 350 nits	Runs the same page in a browser. No touch needed — it is read-only.
Computer	x86 mini-PC or Android box · 4 GB RAM · 32 GB storage	The page is a single HTML file; any device that runs a modern browser is enough.
Barcode scanner	1D/2D USB scanner in HID keyboard-wedge mode, mounted below the screen	A wedge scanner types into the search field on the search screen. See §7 for the production wiring.
Slip printer	80 mm thermal receipt printer, ESC/POS, auto-cutter, front-facing tray	Load a paper-low sensor if available — the slip is the customer's only physical proof of the request.
Network	Wired LAN preferred, 100 Mbps · Wi-Fi as fallback	Only the inventory calls need the network; the interface itself is local.
Mounting	Floor stand or wall bracket · screen centre 1,200–1,350 mm from the floor · 10–15° tilt	Keeps the whole screen inside reach for standing adults and seated wheelchair users.
Power	Single 220 V outlet, surge protected · UPS optional	A UPS only protects the display; requests already sent live on the store's system.
Placement	Near the entrance, in line of sight of the Order Prep counter	Customers should be able to see where the slip tells them to go.

07Software requirements

Item	Requirement
Browser	Chrome, Edge or Firefox, last two major versions. Uses `ResizeObserver`, CSS grid, custom properties and `dvh` units.
Kiosk mode	Chrome: `--kiosk --incognito --noerrdialogs --disable-pinch --overscroll-history-navigation=0`
Files	`index.html` (the kiosk), `display.html` (the queue board), `docs.html` (this guide) and `.htaccess`. No build step, no framework, no database.
URLs	The bundled `.htaccess` serves clean addresses — `/` for the kiosk, `/display` for the queue board and `/docs` for this guide. Requests that still carry `.html` or `.php` are 301-redirected to the clean form, and an unknown address falls back to the kiosk instead of an Apache error page.
Server	Apache with `mod_rewrite` and `AllowOverride All`. On nginx, replace the rewrite block with `try_files $uri $uri.html $uri/ /index.html;`.
External resources	Google Fonts (Archivo, IBM Plex Sans, IBM Plex Mono) and `qrcodejs 1.0.0` from cdnjs. Both should be self-hosted before go-live so the kiosk survives an internet outage.
Product images	Drawn as inline SVG. No image server, no downloads, nothing to load — every item renders instantly and stays sharp at any screen size.
Storage used	`localStorage`, one key: `cruzhw.kiosk.theme`. No customer data is written anywhere.
Offline	Once fonts and the QR library are self-hosted the interface runs fully offline; only live stock needs the network.

08Inventory integration

The prototype carries its catalogue inside the page. Going live means replacing that array with calls to the store system — four of them.

The kiosk's only write is the order slip; everything else it does is a read, so a kiosk failure can never corrupt stock or lose a sale. The second green arrow is the gate: the prep queue does not release an order for picking until the checkout has confirmed payment.

Endpoints the kiosk needs

Call	Purpose	Returns
GET /products?q=	Search as the customer types	Array of item summaries — SKU, name, brand, category, price, unit, stock, location
GET /products/{sku}	Item details screen	Full record including description, specifications, barcode
POST /requests	Issue the order slip and hold the stock	Request number, creation time, hold expiry
GET /requests/{no}	Live status on the confirmation screen	`awaiting_payment` · `preparing` · `ready` · `expired`
POST /requests/{no}/payment	Called by the POS, not the kiosk — confirms payment, deducts stock and releases the order for picking	Receipt number and the released status

Product record

Field	Type	Used for
sku	string	Identity, shown on every screen and on the slip
barcode	string	Scanner lookup — use EAN-13 or UPC in production
name	string	Search and display. Include the size in the name — customers search “1/2 pvc”
brand	string	Search and display
category	enum	Category chips, and the aisle a category maps to
price	number	Shelf price, VAT inclusive
unit	string	pc, length, bag, roll, sheet, gallon, kilo, set, pair, box, unit
stock	number	On the shelf
held	number	Committed to unpaid order slips. The kiosk shows and checks against `stock − held`, never the raw count
location	[zone, bay, shelf]	Signage tiles, walking directions, floor-plan highlight, staff pull list
description	string	One paragraph in the customer's language, not the supplier's
specs	[label, value][]	Product details tab

The one rule the backend must own The hold and the payment gate belong to the store system, not to the kiosk. Two kiosks, a phone order and a walk-in customer all have to see the same stock − held figure, and only the POS may flip a request to paid. The kiosk must never be able to release an order by itself.

Barcode wiring A keyboard-wedge scanner already types into the search field while the search screen is open. For production, capture the keystrokes globally, treat the trailing Enter as “look this up”, and open the matched item directly — so a scan works from any screen, not only from search.

09Behaviour settings

The values the kiosk currently runs on. All of them live at the top of the script and are safe to change.

Setting	Value	Effect
Idle timeout	90 s	“Are you still there?” appears after no touch
Idle countdown	15 s	Then the session clears and returns to the welcome screen
Low-stock threshold	≤ 10	Item shows the amber “Low stock” pill
Out-of-stock threshold	0	Item cannot be added to a list
Promo rotation	5.2 s	Welcome screen panel change
Results per page	measured	However many whole cards fit the space — recalculated when the keyboard opens or the window changes
Search field limit	34 chars	Length of a typed query
Request number	RQ-DDMM-NNNN	Day, month, then a running counter
QR contents	CRUZHW\|no\|items\|pcs\|UNPAID	Scanned by the cashier to pull up the order slip
Stock hold	15 min	How long an unpaid order slip reserves its items before they are released back to available
Preparation time	15 s	Prototype only — how long after payment the status turns Ready

10Touch & accessibility

Touch sizing

Buttons: 48 px minimum, 64 px for primary actions
Keyboard keys: 54 px, reducing to 40 px only on short screens
Quantity steppers: 72 px on the item screen, 52 px in the list
Category chips and page numbers: 44–52 px

Readability

Body text 16 px, product names 15.5 px, prices 20–38 px
Bright and dark palettes both meet contrast on their own ground
Stock state is a colour and a word — never colour alone
prefers-reduced-motion disables every animation
Keyboard focus is always visible for staff testing with a keyboard

Reach With the screen centre at 1,200–1,350 mm, all primary actions sit inside the 380–1,220 mm reach band used for accessible controls. Keep the “Send list to staff” button in the lower half of the screen when the layout is re-tuned for a portrait panel.

11Running the prototype

There is nothing to install.

Put the folder on any Apache host. The kiosk answers at / and this guide at /docs — no file extensions in the address bar.
Opening index.html straight off the disk also works for a quick look; only the links between the two pages need the server.
To run it as a kiosk, launch the browser in kiosk mode pointing at that address.
To demonstrate the staff side, send a list, then open Staff prep queue at the bottom right and press Confirm payment (cashier) — the customer screen turns green by itself.
For the full picture, open /display on a second screen or a second tab and run the kiosk beside it: the number appears under Waiting for payment, then crosses the board as the cashier confirms it.
To demonstrate the scanner without hardware, use Scan barcode — it reads a random in-stock item after a moment and opens it.
To demonstrate printing, use Print the slip; Print with this browser sends the same slip to a real printer or to PDF, with everything except the slip stripped out.

12Limits & go-live checklist

What is deliberately faked in this build, and what has to be true before it faces customers.

Area	In the prototype	Before go-live
Catalogue	33 sample item lines inside the page	Live search against the inventory system
Stock	Fixed numbers	Read at the moment the item is opened, and re-checked when the list is sent
Requests	Held in memory; lost on reload	Posted to the store system, visible at the counter
Payment gate	A Confirm payment button on the staff view stands in for the cashier	The POS confirms payment; the kiosk can never mark an order paid
Stock holds	Held in the page and released after 15 minutes	Held in the store system so every till, kiosk and phone order sees the same availability
Statuses	Preparation completes on a timer once paid	Set by staff at the prep counter
Queue display	Reads the browser's local storage, or runs a sample queue when it finds none	Subscribes to the store system so one board can serve every kiosk and till
Scanner	Simulated, returns a random item	Real scanner input captured on every screen
Printer	On-screen animation, plus browser printing	Thermal printer, ESC/POS, auto-cut
Fonts & QR library	Loaded from the internet	Self-hosted with the page
Store identity	Cruz Hardware, Marikina — placeholder	Real branch name, hours, counter names and aisle map
Prices	Illustrative	Pulled from the price file, VAT rules confirmed with accounting

Read this before demoing to management Every price, stock figure and product in this build is sample data for showing the flow. It is not the branch's real catalogue, and the totals are not quotations.

13Sample data reference

The zones and categories the prototype ships with. The aisle numbering is what the floor plan, the signage tiles and the staff pull list all speak.

Zone	Contents	Structure
YARD 1	Cement, steel & aggregates	Pallets and racks, ground level
YARD 2	Lumber, plywood & boards	Racks A–C, ground level
A1	Seasonal & promo	Bays A–D · shelves 1–4
A2	Plumbing & pipes
A3	Pumps & water systems
A4	Electrical supplies
A5	Fasteners & adhesives
A6	Hand tools
A7	Power tools
A8	Paint & sundries
A9	Locks & builders hardware
A10	Garden & outdoor

Counters on the same floor plan: Order Prep (where prepared lists are claimed), Checkout 1–4 (payment), and the kiosk itself, marked “You are here”.