Cart Page Talons
Functions
- useCartPage(props) ⇒
CartPageTalonProps
This talon contains logic for a cart page component. It performs effects and returns prop data for rendering the component.
This talon performs the following effects:
- Manages the updating state of the cart while cart details data is being fetched
Typedefs
- CartPageQueries :
Object
GraphQL formatted string queries used in this talon.
- CartPageTalonProps :
Object
Props data to use when rendering a cart page component.
useCartPage(props) ⇒ CartPageTalonProps
This talon contains logic for a cart page component. It performs effects and returns prop data for rendering the component.
This talon performs the following effects:
- Manages the updating state of the cart while cart details data is being fetched
Kind: global function
Param | Type | Description |
---|---|---|
props | Object |
|
props.queries | CartPageQueries |
GraphQL queries |
Example (Importing into your project)
import { useCartPage } from '@magento/peregrine/lib/talons/CartPage/useCartPage';
CartPageQueries : Object
GraphQL formatted string queries used in this talon.
Kind: global typedef
See: cartPage.gql.js
for queries used in Venia
Properties
Name | Type | Description |
---|---|---|
getCartDetails | GraphQLAST |
Query for getting the cart details. |
CartPageTalonProps : Object
Props data to use when rendering a cart page component.
Kind: global typedef
Properties
Name | Type | Description |
---|---|---|
cartItems | Array.<Object> |
An array of item objects in the cart. |
hasItems | boolean |
True if the cart has items. False otherwise. |
isCartUpdating | boolean |
True if the cart is updating. False otherwise. |
setIsCartUpdating | function |
Callback function for setting the updating state of the cart page. |
shouldShowLoadingIndicator | boolean |
True if the loading indicator should be rendered. False otherwise. |
For implementation details View Source.
Examples
useCartPage()
import React from 'react';
import { useCartPage } from '@magento/peregrine/lib/talons/CartPage/useCartPage';
import { GET_CART_DETAILS } from './myCartPage.gql';
const MyCartPage = props => {
const queries = {
getCartDetails: GET_CART_DETAILS
}
const talonProps = useCartPage({ queries });
const {
handleSignIn,
hasItems,
isSignedIn,
isCartUpdating,
setIsCartUpdating,
shouldShowLoadingIndicator
} = talonProps;
return (
// JSX using talonProps data
)
}
export default MyCartPage