Add To Cart Button
Primary add-to-cart action for a product detail page, handling variant selection, availability, and cart updates with multiple visual states.
What it does
AP_AddToCartButton is the primary add-to-cart action component for a product detail page (PDP). It reads the currently selected variant from the shared variant store, checks availability, and adds the product to the cart on click. The button automatically renders different design slots depending on the current state: Available, Loading, Out of Stock, or Select Variant.
How to set it up
- Place APAddToCartButton on your PDP alongside APVariantSelector.
- Set the Product ID property to match the Shopify product (numeric ID or GID format).
- Design four separate button states in Framer and connect each to the matching slot:
- Available
- Loading
- Out of Stock
- Select Variant
- The component will automatically handle state transitions based on the selected variant's availability and the cart update lifecycle.
No manual wiring is required for variant or quantity; the component reads these from the shared stores.
Key behaviours
- Automatically reads the selected variant and quantity from APVariantSelector and APQuantityNumber.
- Optionally opens the cart drawer immediately after a successful add, controlled by the Open Drawer on Add property.
- Disables itself and renders the Select Variant slot when no variant has been chosen yet.
- Renders the Out of Stock slot when the selected variant's quantityAvailable is 0 or its available flag is false.
- Shows the Loading slot for approximately 120ms while the cart update is processing.
- Dispatches a toggleCartModal custom event on successful add, which CartToggle listens for to open or toggle the cart UI.
- The Force State control lets you override the live state on the canvas for design and preview purposes without changing runtime behaviour.