Edit in GitHubLog an issue

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

NameTypeDescription
propsObject
props.queriesCartPageQueriesGraphQL queries

Example (Importing into your project)

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

NameTypeDescription
getCartDetailsQueryGraphQLASTQuery for getting the cart details.

Props data to use when rendering a cart page component.

Properties

NameTypeDescription
cartItemsArray.<Object>An array of item objects in the cart.
hasItemsbooleanTrue if the cart has items. False otherwise.
isCartUpdatingbooleanTrue if the cart is updating. False otherwise.
setIsCartUpdatingfunctionCallback function for setting the updating state of the cart page.
shouldShowLoadingIndicatorbooleanTrue if the loading indicator should be rendered. False otherwise.

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

Examples#

useCartPage()#

Copied to your clipboard
1import React from 'react';
2import { useCartPage } from '@magento/peregrine/lib/talons/CartPage/useCartPage';
3
4import { GET_CART_DETAILS } from './myCartPage.gql';
5
6const MyCartPage = props => {
7 const queries = {
8 getCartDetails: GET_CART_DETAILS
9 }
10 const talonProps = useCartPage({ queries });
11
12 const {
13 handleSignIn,
14 hasItems,
15 isSignedIn,
16 isCartUpdating,
17 setIsCartUpdating,
18 shouldShowLoadingIndicator
19 } = talonProps;
20
21 return (
22 // JSX using talonProps data
23 )
24}
25
26export default MyCartPage
  • Privacy
  • Terms of Use
  • Do not sell my personal information
  • AdChoices
Copyright © 2022 Adobe. All rights reserved.