@commercelayer/react-components/lib/esm/components/orders/AddToCartButton.d.ts

The Official Commerce Layer React Components

import { type PropsWithoutRef, type JSX } from "react";
import type { ChildrenFunction } from "../../typings/index";
import type { AddToCartReturn, CustomLineItem, LineItemOption } from "../../reducers/OrderReducer";
interface TAddToCartButton extends Omit<Props, "children"> {
    handleClick: () => AddToCartReturn;
}
type BuyNowMode = {
    /**
     * Once item has been added, it redirects to the hosted checkout micro-frontend.
     */
    buyNowMode: true;
    /**
     * If you have a self-hosted checkout, you can pass the url to redirect to it.
     */
    checkoutUrl?: string;
} | {
    buyNowMode?: false;
    checkoutUrl?: never;
};
type THostedCart = {
    /**
     * Once item has been added, it redirects to the hosted cart micro-frontend.
     */
    redirectToHostedCart: true;
    /**
     * If you have a self-hosted cart, you can pass the url to redirect to it.
     */
    hostedCartUrl?: string;
    /**
     * If you have a self-hosted cart, you can pass the protocol to redirect to it.
     */
    protocol?: "http" | "https";
} | {
    redirectToHostedCart?: false;
    hostedCartUrl?: never;
    protocol?: never;
};
type TButton = PropsWithoutRef<Omit<JSX.IntrinsicElements["button"], "children">>;
type Props = {
    /**
     * Code of a bundle
     */
    bundleCode?: string;
    children?: ChildrenFunction<TAddToCartButton>;
    /**
     * Disable the cart button
     */
    disabled?: boolean;
    /**
     * Label to display
     */
    label?: string | JSX.Element;
    /**
     * Line item which allow you customize the cart item
     */
    lineItem?: CustomLineItem;
    /**
     * Line item option to add to cart
     */
    lineItemOption?: LineItemOption;
    /**
     * Quantity of the item
     */
    quantity?: string;
    /**
     * SKU code to add to cart
     */
    skuCode?: string;
    /**
     * SKU list to add to cart
     */
    skuListId?: string;
} & TButton & BuyNowMode & THostedCart;
/**
 * This component adds `line_items` to the cart (aka draft order), see the [how to create a shopping cart](https://docs.commercelayer.io/core/v/how-tos/placing-orders/shopping-cart/create-a-shopping-cart) documentation,
 * for a general understanding of the process.
 *
 * It can be used to add `skus` or `bundle` by receiving `skuCode` or `bundleCode` from props.
 * When `skuListId` is passed as prop , it will add all the `skus` in the `sku_list` to the cart.
 *
 * It's possible to select the quantity of the item to add to cart by passing the `quantity` prop.
 *
 * When this component is used inside a `<Skus>` or `<SkuList>` component, it will automatically get the `skuCode` and quantity from the context,
 * so you don't need to pass it as prop.
 *
 * It can automatically redirect to the cart page of the application using the `redirectToHostedCart` prop and optionally a `hostedCartUrl`.
 *
 * With a similar logic, you can enable a "Buy Now" experience and automatically redirect the customer to the checkout page using the `buyNowMode` prop and optionally a `checkoutUrl`.
 *
 * <span title="Requirement" type="warning">
 * Must be a child of the `<OrderContainer>` component.
 * </span>
 */
export declare function AddToCartButton(props: Props): JSX.Element;
export default AddToCartButton;