Skip to content
Forge

Cart with quantities

The full cart page: keyboard-editable quantities, undoable removal, promo code, free-delivery gauge and totals recalculated then announced.

  • Tailwind
  • React
  • CSS
  • WordPress
Open in a new tab

Description

Each item has a quantity stepper bounded by stock (buttons and direct input). Removing an item leaves an Undo button in its place, which receives focus. A status region announces every change with the new total, and the free-delivery bar is a labelled progressbar. Without JavaScript the cart stays readable with its quantities and totals. Accessibility: fully keyboard operable, 44 px targets, AA contrast in light and dark, gauge animation disabled with prefers-reduced-motion.

Code

Loading the code…

Archive contents

panier-quantites-html-tailwind.zip3 files · 8 Ko

  • index.html28 Ko
  • README.md3 Ko
  • LICENSE.md1 Ko

Tags

Updated on October 16, 2026.

In the same spirit

  • Product catalog filters

    Free

    A faceted filter panel for a catalog: category, price, size, colour and stock, with a result counter, active filter chips, sorting and a mobile drawer.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component

  • Personalised gift card

    Free

    A gift card form: preset or custom amount, design, recipient, message and send date, with a live preview of the card.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component

  • Order summary

    Free

    The cart summary before checkout: items with thumbnail and quantity, a free-shipping gauge, a promo code and a total recalculated on every change.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component

  • Product page

    Free

    A complete product page: product views, colors and sizes as radio buttons, a quantity selector and an announced add-to-cart.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component