nuxt-x-affiliate
Shipping Bar
Free-shipping progress bar — "Add $X more to qualify for free shipping".
Shipping Bar
The XAFShippingBar component renders a progress bar showing how close the current cart subtotal is to a free-shipping threshold — "Add $9.99 more to qualify for free shipping". When the threshold is met, switches to a "You qualify for free shipping!" success state.
Components
<XAFShippingBar />
<XAFShippingBar :threshold="35" :current="25.01" />
<XAFShippingBar :threshold="50" :current="49.99" currency="EUR" locale="de-DE" variant="compact" />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
threshold | number | required | Free-shipping threshold (e.g. 35). |
current | number | required | Current cart subtotal. |
currency | string | "USD" | Currency code for formatting. |
locale | string | "en-US" | Locale for currency formatting. |
variant | 'progress' | 'compact' | 'progress' | progress = full bar + label; compact = single-line. |
The block uses role="status" with aria-live="polite" so screen readers announce updates when the cart total changes.
AI Context
component: XAFShippingBar
package: "@xenterprises/nuxt-x-affiliate"
use-when: Free-shipping progress bar — "Add $X more to qualify for free shipping" with currency + locale formatting.