Standalone selector prototype; cabinet renders are loaded on demand from Cloudflare and no external libraries are required. Host this HTML file and embed it using an iframe:

The width sequence is 12″, 15″, 18″, 24″, 30″, 36″, 42″. The 15″ option is available for standard base, top-drawer base, both drawer banks, and standard wall cabinets. The available widths follow the uploaded 2026 catalog. Switching types retains the current width where available; otherwise it selects the closest available width, preferring the smaller on a tie.

SKU mapping: A = without drawers; B = 6″ top drawer; C12/C15/C18 = drawer bank with 6″ top; D12/D15/D18 = equal drawers; C30/C36/C42 = standard sink base; D30/D36/D42 = ADA sink base (your requested label); E = standard wall; F = fridge/range; G = microwave; H = standard tall. “ADA Sink Base” is a category label here, not a certification of installation compliance.

Finish buttons use the four supplied texture images, embedded directly in this HTML file. The center loads a cabinet render from Cloudflare when available and falls back to SKU text when a render is missing. This view filters products; it does not submit an order or send a quote. The selected state is available through window.eurocabSelector.getSelection(). Clicks emit an eurocab:select custom event on this document.