Cart Page Talons | Magento PWA Documentation

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