Edit in GitHubLog an issue

PriceSummary

Functions

usePriceSummary(props)PriceSummaryTalonProps

This talon contains logic for a price summary component. It performs effects and returns prop data for rendering the component.

This talon performs the following effects:

  • Log a GraphQL error if it occurs when getting the price summary

Typedefs

FlattenedData : Object

Query data flattened into a simple object.

PriceSummaryQueries : Object

GraphQL queries for price summary component.

PriceSummaryTalonProps : Object

Props used for rendering a price summary component.

This talon contains logic for a price summary component. It performs effects and returns prop data for rendering the component.

This talon performs the following effects:

  • Log a GraphQL error if it occurs when getting the price summary

Returns: Parameters

NameTypeDescription
propsObject
props.queriesPriceSummaryQueriesGraphQL queries for a price summary component.

Example (Importing into your project)

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

Query data flattened into a simple object.

Properties

NameTypeDescription
subtotalStringCart subtotal (excluding tax)
totalStringCart grand total
discountsArray.<Object>Applied discounts to the cart
giftCardsArray.<Object>Gift cards applied to the cart
giftOptionsArray.<Object>Gift Options applied to the cart
taxesArray.<Object>Taxes applied to the cart
shippingArray.<Object>Shipping addresses associated with this cart

GraphQL queries for price summary component.

See: priceSummary.js for the queries used in Venia.
Properties

NameTypeDescription
getPriceSummaryGraphQLASTQuery to get the price summary for a cart

Props used for rendering a price summary component.

Properties

NameTypeDescription
handleProceedToCheckoutfunctionCallback function which navigates the browser to the checkout
hasErrorbooleanTrue if a GraphQL query returns an error. False otherwise.
hasItemsbooleanTrue if the cart has any items. False otherwise.
isLoadingbooleanTrue while the GraphQL query is still in flight. False otherwise.
flatDataFlattenedDataQuery data that has been flattened into a simple object

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

Examples#

usePriceSummary()#

Copied to your clipboard
1import React from 'react'
2import { usePriceSummary } from '@magento/peregrine/lib/talons/CartPage/PriceSummary/usePriceSummary';
3
4import { GET_PRICE_SUMMARY } from './myPriceSummary.gql';
5
6
7const MyPriceSummary = props => {
8 const { isUpdating } = props;
9
10 const talonProps = usePriceSummary({
11 queries: {
12 getPriceSummary: GET_PRICE_SUMMARY
13 }
14 });
15
16 const {
17 handleProceedToCheckout,
18 hasError,
19 hasItems,
20 isCheckout,
21 isLoading,
22 flatData
23 } = talonProps;
24
25 if (hasError) {
26 return (
27 <div>
28 Something went wrong. Please refresh and try again.
29 </div>
30 );
31 } else if (!hasItems || isLoading) {
32 return null;
33 }
34
35 const { subtotal, total, discounts, giftCards, taxes, shipping } = flatData;
36
37 return (
38 // JSX that renders a price summary component using data from the talon
39 )
40}
41
42export default MyPriceSummary
  • Privacy
  • Terms of Use
  • Do not sell my personal information
  • AdChoices
Copyright © 2022 Adobe. All rights reserved.