ATCo — Live Shipment Tracking Portal & Partners Marquee

Customers tracking a consignment hit a page that returned only a bare status line: shipment dates, cargo details, package dimensions and the shipper/receiver blocks were silently missing, so every enquiry fell back to a phone call or WhatsApp message. In parallel, the company's sixteen partner logos sat as a static row that only displayed correctly on large screens, cutting off on mobile and never signalling the breadth of the client base.

Deliver one live Arabic portal that (1) renders a complete, print-ready tracking result for any consignment number — status, origin, destination, carrier, dates, cargo, packages and both parties, (2) survives the company's slow shared hosting and its lazy-load stack, (3) presents all sixteen partner logos in a continuous RTL marquee that stays legible from 1920px down to 390px, and (4) ships without breaking the existing WooCommerce checkout or the bilingual routing.

The tracking layout was rebuilt against the WP-Cargo data model so every field the API returns is now surfaced: a status banner, an origin/destination/carrier info grid, the full cargo row, a multi-package table with per-package dimensions and weight, a shipper/receiver column pair and a chronological shipment-history table — the whole result wrapped in a print container. The partners marquee is a dedicated plugin that injects a double-row track of sixteen client logos as lazily-deferred CSS background images with a CSS keyframe drift, so it animates continuously without layout thrash and degrades cleanly when JavaScript is absent. Because the production host is slow, image payloads are deferred and decoded before paint, and every screen was verified at 1920×1080 and 390×844 with automated blank-frame and PII-leak gates.

The hardest constraint was a host that never finishes loading. The document-ready event could not complete within 120 seconds and individual image requests hung for 30–60 seconds, so a naive screenshot pipeline produced half-painted pages. Solved it by measuring network quiescence instead of trusting the load event, deferring every non-critical image, force-decoding the sixteen marquee logos before capture and gating each frame on a decoded-pixel check rather than on request completion. The second dilemma was selective privacy: the receiver's name, street address and phone number must never appear in a published case study while the rest of the tracking record stays fully visible, so the masking step is scoped to a single node and an automated scan then asserts the receiver values do not leak anywhere else in the DOM.