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.
handleSignIn function Callback function to call for handling a sign in event.
isSignedIn boolean True if the current user is signed in. 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