Shopping Cart 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.

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

Returns: Parameters

Example (Importing into your project)

Copy
import { useCartPage } from '@magento/peregrine/lib/talons/CartPage/useCartPage';
Copied to your clipboard
import { useCartPage } from '@magento/peregrine/lib/talons/CartPage/useCartPage';

GraphQL formatted string queries used in this talon.

See: cartPage.gql.js for queries used in Venia
Properties

Props data to use when rendering a cart page component.

Properties

Source Code: pwa-studio/packages/peregrine/lib/talons/CartPage/useCartPage.js

Examples

useCartPage()

Copy
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
Copied to your clipboard
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

Last updated 9/13/2023

Was this helpful?

Yes

No