Interactive Size Guide

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, badge dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/ecommerce/ecommerce18.tsx instead.

Usage

The file also exports ecommerce18Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Ecommerce18, ecommerce18Demo } from "@/components/blocks/ecommerce/ecommerce18";

export default function Page() {
  return <Ecommerce18 {...ecommerce18Demo} />;
}

Props

Types

interface SizeChartRow {
  size: string;
  chestMaxIn: number; // inclusive upper bound, inches
  waistMaxIn: number; // inclusive upper bound, inches
}

Behavior notes

• 'Find my size' is a real click handler, not a form submit: it parses the chest input, finds the first (smallest) sizeChart row whose chestMaxIn is greater than or equal to it, and falls back to the largest row if the chest measurement exceeds every row's max.
• The fit-confidence label is a fixed, deterministic heuristic comparing the waist input against the matched row's waistMaxIn: more than 1 inch over reads 'Runs Small', more than 3 inches under reads 'Runs Large', anything in between reads 'Good Fit'. There is no scoring model behind it.
• The waist input is optional; when it's left blank the lookup treats the waist as exactly the matched row's waistMaxIn, which always resolves to 'Good Fit' by construction.
• 'Find my size' is disabled until the chest field has a valid positive number, so the result panel cannot appear from an empty or non-numeric input.
• The result panel only appears after the button is clicked at least once; it does not update live as the inputs change, and a later click always overwrites the previous result.
• The reference table below is always rendered directly from the sizeChart prop regardless of whether a lookup has been run, so the size guide is still useful to a visitor who never types a measurement.