Cart
component
The component renders a span (or another element / component that can be customized by the as prop) with the cart line's quantity.
It must be a descendent of a component, and uses the hook internally.
Anchor to propsProps
- Anchor to adjustadjust"remove" | "increase" | "decrease"
The adjustment for a cart line's quantity. Valid values:
increase(default),decrease, orremove.
CartLineQuantityAdjustButtonBaseProps
- adjust
The adjustment for a cart line's quantity. Valid values: `increase` (default), `decrease`, or `remove`.
"remove" | "increase" | "decrease"
interface CartLineQuantityAdjustButtonBaseProps {
/** The adjustment for a cart line's quantity. Valid values: `increase` (default), `decrease`, or `remove`. */
adjust?: 'increase' | 'decrease' | 'remove';
}Was this section helpful?
Example code
import {
CartLineQuantityAdjustButton,
CartLineProvider,
CartProvider,
} from '@shopify/hydrogen-react';
export function Example({line}) {
return (
<CartProvider>
<CartLineProvider line={line}>
<CartLineQuantityAdjustButton adjust="increase">
Increase
</CartLineQuantityAdjustButton>
<CartLineQuantityAdjustButton adjust="decrease">
Decrease
</CartLineQuantityAdjustButton>
<CartLineQuantityAdjustButton adjust="remove">
Remove
</CartLineQuantityAdjustButton>
</CartLineProvider>
</CartProvider>
);
}
examples
Example code
description
I am the default example
JavaScript
import { CartLineQuantityAdjustButton, CartLineProvider, CartProvider, } from '@shopify/hydrogen-react'; export function Example({line}) { return ( <CartProvider> <CartLineProvider line={line}> <CartLineQuantityAdjustButton adjust="increase"> Increase </CartLineQuantityAdjustButton> <CartLineQuantityAdjustButton adjust="decrease"> Decrease </CartLineQuantityAdjustButton> <CartLineQuantityAdjustButton adjust="remove"> Remove </CartLineQuantityAdjustButton> </CartLineProvider> </CartProvider> ); }TypeScript
import { CartLineQuantityAdjustButton, CartLineProvider, CartProvider, } from '@shopify/hydrogen-react'; import type {CartLine} from '@shopify/hydrogen-react/storefront-api-types'; export function Example({line}: {line: CartLine}) { return ( <CartProvider> <CartLineProvider line={line}> <CartLineQuantityAdjustButton adjust="increase"> Increase </CartLineQuantityAdjustButton> <CartLineQuantityAdjustButton adjust="decrease"> Decrease </CartLineQuantityAdjustButton> <CartLineQuantityAdjustButton adjust="remove"> Remove </CartLineQuantityAdjustButton> </CartLineProvider> </CartProvider> ); }
