Usage
What customers see
Section titled “What customers see”- After Add to cart the drawer slides in from the side with the cart. The rest of the page is dimmed; a click on it, the close button or Esc closes the drawer.
- Each line has the image, the name, the selected options, the line total, plus and minus buttons, a quantity field and a remove button. Minus at the lowest quantity removes the line.
- When the stock, the minimum quantity or the quantity step changes the amount, the drawer says so.
- Have a coupon code? opens the coupon field. An applied coupon shows as a chip that removes it.
- The totals show the subtotal, the order discount and the total before shipping and taxes, which are calculated at checkout.
- Checkout and View cart buttons stay at the bottom.
- The cart in the header updates after each change.
Keyboard
Section titled “Keyboard”The drawer is a dialog. Focus moves into it when it opens, Tab and Shift+Tab stay inside, Esc closes it and focus returns to the element that opened it. Buttons have names for screen readers, and messages are announced.
Phones
Section titled “Phones”On a phone the drawer takes the full width of the screen.