Edit in GitHubLog an issue

ProductListing

These talons provide logic for components that render products in a shopping cart and forms that update the quantity or configuration for each product.

Functions

useProductListing(props)ProductListingTalonProps

This talon contains logic for a component that renders a list of products for a cart. It performs effects and returns prop data to render the component on a cart page.

This talon performs the following effects:

  • Fetch product listing data associated with the cart
  • Log any GraphQL errors to the console
useProduct(props)ProductTalonProps

This talon contains logic for a product component used in a product listing component. It performs effects and returns prop data for that component.

This talon performs the following effects:

  • Manage the updating state of the cart while a product is being updated or removed
useQuantity(props)QuantityTalonProps

This talon contains logic for a product quantity UI component. It performs effects and returns prop data for rendering a component that lets you modify the quantity of a cart item.

This talon performs the following effects:

  • Updates the state of the quantity field when the initial value changes
useEditModal()EditModalTalonProps

This talon contains logic for a product edit modal used on a cart page. It returns prop data for rendering an interactive modal component.

useProductForm(props)ProductFormTalonProps

This talon contains logic for a product edit form. It performs effects and returns data for rendering the component inside a modal container.

This talon performs the following effects:

  • Manage the updating state of the cart while form data is being saved
  • Set the variant price on a product depending on the product's options

Typedefs

ProductListingQueries : Object

GraphQL queries for getting product listing data. This is a type used in the useProductListing talon.

ProductListingTalonProps : Object

Object type returned by the useProductListing talon. It provides props data for a component that renders a product list.

ProductMutations : Object

GraphQL mutations for a product in a cart. This is a type used by the useProduct talon.

ProductTalonProps : Object

Object type returned by the useProduct talon. It provides prop data for rendering a product component on a cart page.

ProductItem : Object

Data about a product item in the cart. This type is used in the ProductTalonProps type returned by the useProduct talon.

QuantityTalonProps : Object

Object type returned by the useQuantity talon. It provides props data for a quantity UI component.

EditModalTalonProps : Object

Object type returned by the useEditModal talon. It provides props data for rendering an edit modal component.

ProductFormTalonProps : Object

Object type returned by the useProductForm talon. It provides props data for a product form UI component inside a modal.

This talon contains logic for a component that renders a list of products for a cart. It performs effects and returns prop data to render the component on a cart page.

This talon performs the following effects:

  • Fetch product listing data associated with the cart
  • Log any GraphQL errors to the console

Returns: Parameters

NameTypeDescription
propsObject
props.queriesProductListingQueriesGraphQL queries for getting product listing data.

Example (Importing into your project)

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

This talon contains logic for a product component used in a product listing component. It performs effects and returns prop data for that component.

This talon performs the following effects:

  • Manage the updating state of the cart while a product is being updated or removed

Returns: Parameters

NameTypeDescription
propsObject
props.itemProductItemProduct item data
props.operationsProductMutationsGraphQL mutations for a product in a cart
props.setActiveEditItemfunctionFunction for setting the actively editing item
props.setIsCartUpdatingfunctionFunction for setting the updating state of the cart

Example (Importing into your project)

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

This talon contains logic for a product quantity UI component. It performs effects and returns prop data for rendering a component that lets you modify the quantity of a cart item.

This talon performs the following effects:

  • Updates the state of the quantity field when the initial value changes

Returns: Parameters

NameTypeDescription
propsObject
props.initialValuenumberthe initial quantity value
props.minnumberthe minimum allowed quantity value
props.onChangefunctionchange handler to invoke when quantity value changes

Example (Importing into your project)

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

This talon contains logic for a product edit modal used on a cart page. It returns prop data for rendering an interactive modal component.

Returns: Example (Importing into your project)

Copied to your clipboard
import { useEditModal } from '@magento/peregrine/lib/talons/CartPage/ProductListing/EditModal/useEditModal';

This talon contains logic for a product edit form. It performs effects and returns data for rendering the component inside a modal container.

This talon performs the following effects:

  • Manage the updating state of the cart while form data is being saved
  • Set the variant price on a product depending on the product's options

Returns: Parameters

NameTypeDescription
propsObject
props.cartItemObjectThe cart item to configure on the form
props.getConfigurableOptionsQueryGraphQLASTGraphQL query to get the configurable options for a product.
props.setIsCartUpdatingfunctionFunction for setting the updating state for the shopping cart.
props.setVariantPricefunctionFunction for setting the variant price on a product.
props.updateConfigurableOptionsMutationGraphQLASTGraphQL mutation for updating the configurable options for a product.
props.updateQuantityMutationGraphQLASTGraphQL mutation for updating the quantity of a product in a cart.
props.setActiveEditItemfunctionFunction for setting the actively editing item.

Example (Importing into your project)

Copied to your clipboard
import { useProductForm } from '@magento/peregrine/lib/talons/CartPage/ProductListing/EditModal/useProductForm';

GraphQL queries for getting product listing data. This is a type used in the useProductListing talon.

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

NameTypeDescription
getProductListingQueryGraphQLDocumentQuery to get the product list for a cart

Object type returned by the useProductListing talon. It provides props data for a component that renders a product list.

Properties

NameTypeDescription
activeEditItemObjectThe product item currently being edited
isLoadingbooleanTrue if the query to get the product listing is still in progress. False otherwise.
errorError | nullAn array of graphql errors
itemsArray.<Object>A list of products in a cart
setActiveEditItemfunctionFunction for setting the current item to edit

GraphQL mutations for a product in a cart. This is a type used by the useProduct talon.

See: product.js to see the mutations used in Venia
Properties

NameTypeDescription
removeItemMutationGraphQLDocumentMutation for removing an item in a cart
updateItemQuantityMutationGraphQLDocumentMutation for updating the item quantity in a cart

Object type returned by the useProduct talon. It provides prop data for rendering a product component on a cart page.

Properties

NameTypeDescription
errorMessageStringError message from an operation perfored on a cart product.
handleEditItemfunctionFunction to use for handling when a product is modified.
handleRemoveFromCartfunctionFunction to use for handling the removal of a cart product.
handleUpdateItemQuantityfunctionFunction to use for handling updates to the product quantity in a cart.
isEditablebooleanTrue if a cart product is editable. False otherwise.
productProductItemCart product data

Data about a product item in the cart. This type is used in the ProductTalonProps type returned by the useProduct talon.

Properties

NameTypeDescription
currencyStringThe currency associated with the cart product
imageStringThe url for the cart product image
nameStringThe name of the product
optionsArray.<Object>A list of configurable option objects
quantitynumberThe quantity associated with the cart product
unitPricenumberThe product's unit price
urlKeyStringThe product's url key
urlSuffixStringThe product's url suffix

Object type returned by the useQuantity talon. It provides props data for a quantity UI component.

Properties

NameTypeDescription
isDecrementDisabledbooleanTrue if decrementing should be disabled
isIncrementDisabledbooleanTrue if incrementing should be disabled
handleBlurfunctionCallback function for handling a blur event on a component
handleDecrementfunctionCallback function for handling a quantity decrement event
handleIncrementfunctionCallback function for handling an increment event
maskInputfunctionFunction for masking a value when decimal values are allowed

Object type returned by the useEditModal talon. It provides props data for rendering an edit modal component.

Properties

NameTypeDescription
setVariantPricefunctionFunction for setting a product's variant price.
variantPriceObjectThe variant price for a product. See Money object.

Object type returned by the useProductForm talon. It provides props data for a product form UI component inside a modal.

Properties

NameTypeDescription
configItemObjectCart item to configure
errorsArray.<Error>An array of form errors resulting from a configuration or quantity value
handleOptionSelectionfunctionA callback function handling an option selection event
handleSubmitfunctionA callback function for handling form submission
isLoadingbooleanTrue if the form is loading data. False otherwise.
isSavingbooleanTrue if the form is saving data. False otherwise.
isDialogOpenbooleanTrue if the form is visible. False otherwise.
handleClosefunctionA callback function for handling form closing
configurableThumbnailSourceStringA string indicating which thumbnail should be used for configurable products

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

Examples#

useProductListing()#

Copied to your clipboard
1import React from 'react';
2import { useProductListing } from '@magento/peregrine/lib/talons/CartPage/ProductListing/useProductListing';
3
4import { GET_PRODUCT_LISTING } from './myProductListing.gql';
5
6const MyProductListing = props => {
7 const { setIsCartUpdating } = props;
8
9 const talonProps = useProductListing({
10 queries: {
11 getProductListing: GET_PRODUCT_LISTING
12 }
13 });
14 const { activeEditItem, isLoading, items, setActiveEditItem } = talonProps;
15
16 if (isLoading) {
17 return <div>Loading...</div>;
18 }
19
20 return (
21 // JSX that renders the list of products in a cart using the talon props
22 )
23}
24
25export default MyProductListing;
  • Privacy
  • Terms of Use
  • Do not sell my personal information
  • AdChoices
Copyright © 2022 Adobe. All rights reserved.