AddToCartButton
components-cart-addtocartbutton · ./src/stories/cart/AddToCartButton.stories.tsx
Prop type error
File: /opt/build/repo/packages/react-components/dist/index.cjs
react-docgen-typescript did not return any component docs for this file.Info
No description found. Write a jsdoc comment such as /** Component description */.
Imports
import {
AddToCartButton,
AvailabilityContainer,
AvailabilityTemplate,
CommerceLayer,
Errors,
LineItem,
LineItemName,
LineItemQuantity,
LineItemRemoveLink,
LineItemsContainer,
LineItemsEmpty,
Order,
OrderStorage,
Skus,
SkusContainer,
} from "@commercelayer/react-components";
import { ArgTypes, Canvas, Source } from "@storybook/addon-docs/blocks";
Add SKU to cart
story ok
const AddSku = () => <Wrapper>
<AddToCartButton
skuCode="SWEATWCX000000FFFFFFXSXX"
label="Add SKU to cart"
quantity="2"
className="px-3 py-2 bg-black text-white rounded disabled:opacity-50" />
</Wrapper>;
Add bundle to cart
story ok
const AddBundle = () => <Wrapper>
<AddToCartButton
bundleCode="BUNDLE001"
label="Add bundle to cart"
quantity="2"
className="px-3 py-2 bg-black text-white rounded disabled:opacity-50" />
</Wrapper>;
Disabled when out of stock
story ok
Combine `<AddToCartButton>` with `<AvailabilityTemplate>` to automatically
disable the button when the SKU is out of stock.
const DisabledWhenOutOfStock = () => (
<Wrapper>
<SkusContainer skus={["POLOMXXX000000FFFFFFLXXX", "TSHIRTWV000000FFFFFFSXXX"]}>
<Skus>
<AvailabilityContainer>
<AvailabilityTemplate>
{({ quantity }) => (
<div className="mb-4 grid max-w-md">
Quantity available: {quantity}
<AddToCartButton
className="px-3 py-2 bg-black text-white rounded disabled:opacity-50"
disabled={quantity <= 0}
/>
</div>
)}
</AvailabilityTemplate>
</AvailabilityContainer>
</Skus>
</SkusContainer>
</Wrapper>
);
Custom attributes / external price
story ok
Pass a `lineItem` prop to customise the created line item attributes — useful for
custom names or enabling external prices.
<span title="Core API" type="info">
See the [line_items API reference](https://docs.commercelayer.io/core/v/api-reference/line_items/object).
</span>
const UseCustomAttributesOrExternalPrice = () => (
<Wrapper>
<AddToCartButton
label="Add with custom name"
skuCode="SWEATWCX000000FFFFFFXSXX"
className="px-3 py-2 bg-black text-white rounded disabled:opacity-50"
lineItem={{
name: "My custom item name",
externalPrice: false,
}}
/>
</Wrapper>
);
Children props (render prop)
story ok
Use the `children` render prop to fully control the button UI.
The `disabled` prop reflects the loading state — it is `true` while the
cart operation is in progress, preventing double-clicks automatically.
const ChildrenProps = () => (
<Wrapper>
<AddToCartButton skuCode="SWEATWCX000000FFFFFFXSXX" quantity="1">
{({ handleClick, disabled }) => (
<button
type="button"
className="border-dotted border-2 border-blue-500 text-blue-500 p-4 w-auto inline"
onClick={() => {
void handleClick().then(({ orderId, success }) => {
if (success) {
alert(`Item added to cart — orderId: ${orderId}`)
}
})
}}
>
{disabled ? "Adding…" : "Add to cart"}
</button>
)}
</AddToCartButton>
</Wrapper>
);