Product Listing Talons | Magento PWA Documentation

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](#useProductListing) talon.
ProductListingTalonProps : Object: Object type returned by the [useProductListing](#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](#useProduct) talon.
ProductTalonProps : Object: Object type returned by the [useProduct](#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](#ProductTalonProps) type returned by the [useProduct](#useProduct) talon.
QuantityTalonProps : Object: Object type returned by the [useQuantity](#useQuantity) talon. It provides props data for a quantity UI component.
EditModalTalonProps : Object: Object type returned by the [useEditModal](#useEditModal) talon. It provides props data for rendering an edit modal component.
ProductFormTalonProps : Object: Object type returned by the [useProductForm](#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

Name	Type	Description
props	`Object`
props.queries	`ProductListingQueries`	GraphQL queries for getting product listing data.

Example (Importing into your project)

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

Name	Type	Description
props	`Object`
props.item	`ProductItem`	Product item data
props.operations	`ProductMutations`	GraphQL mutations for a product in a cart
props.setActiveEditItem	`function`	Function for setting the actively editing item
props.setIsCartUpdating	`function`	Function for setting the updating state of the cart

Example (Importing into your project)

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

Name	Type	Description
props	`Object`
props.initialValue	`number`	the initial quantity value
props.min	`number`	the minimum allowed quantity value
props.onChange	`function`	change handler to invoke when quantity value changes

Example (Importing into your project)

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)

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

Name	Type	Description
props	`Object`
props.cartItem	`Object`	The cart item to configure on the form
props.getConfigurableOptionsQuery	`GraphQLAST`	GraphQL query to get the configurable options for a product.
props.setIsCartUpdating	`function`	Function for setting the updating state for the shopping cart.
props.setVariantPrice	`function`	Function for setting the variant price on a product.
props.updateConfigurableOptionsMutation	`GraphQLAST`	GraphQL mutation for updating the configurable options for a product.
props.updateQuantityMutation	`GraphQLAST`	GraphQL mutation for updating the quantity of a product in a cart.
props.setActiveEditItem	`function`	Function for setting the actively editing item.

Example (Importing into your project)

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

Name	Type	Description
getProductListingQuery	`GraphQLDocument`	Query 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

Name	Type	Description
activeEditItem	`Object`	The product item currently being edited
isLoading	`boolean`	True if the query to get the product listing is still in progress. False otherwise.
error	`Error` \| `null`	An array of graphql errors
items	`Array.<Object>`	A list of products in a cart
setActiveEditItem	`function`	Function 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

Name	Type	Description
removeItemMutation	`GraphQLDocument`	Mutation for removing an item in a cart
updateItemQuantityMutation	`GraphQLDocument`	Mutation 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

Name	Type	Description
errorMessage	`String`	Error message from an operation perfored on a cart product.
handleEditItem	`function`	Function to use for handling when a product is modified.
handleRemoveFromCart	`function`	Function to use for handling the removal of a cart product.
handleUpdateItemQuantity	`function`	Function to use for handling updates to the product quantity in a cart.
isEditable	`boolean`	True if a cart product is editable. False otherwise.
product	`ProductItem`	Cart product data

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

Properties

Name	Type	Description
currency	`String`	The currency associated with the cart product
image	`String`	The url for the cart product image
name	`String`	The name of the product
options	`Array.<Object>`	A list of configurable option objects
quantity	`number`	The quantity associated with the cart product
unitPrice	`number`	The product’s unit price
urlKey	`String`	The product’s url key
urlSuffix	`String`	The product’s url suffix

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

Properties

Name	Type	Description
isDecrementDisabled	`boolean`	True if decrementing should be disabled
isIncrementDisabled	`boolean`	True if incrementing should be disabled
handleBlur	`function`	Callback function for handling a blur event on a component
handleDecrement	`function`	Callback function for handling a quantity decrement event
handleIncrement	`function`	Callback function for handling an increment event
maskInput	`function`	Function 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

Name	Type	Description
setVariantPrice	`function`	Function for setting a product’s variant price.
variantPrice	`Object`	The 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

Name	Type	Description
configItem	`Object`	Cart item to configure
errors	`Array.<Error>`	An array of form errors resulting from a configuration or quantity value
handleOptionSelection	`function`	A callback function handling an option selection event
handleSubmit	`function`	A callback function for handling form submission
isLoading	`boolean`	True if the form is loading data. False otherwise.
isSaving	`boolean`	True if the form is saving data. False otherwise.
isDialogOpen	`boolean`	True if the form is visible. False otherwise.
handleClose	`function`	A callback function for handling form closing

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

Examples

useProductListing()

import React from 'react';
import { useProductListing } from '@magento/peregrine/lib/talons/CartPage/ProductListing/useProductListing';

import { GET_PRODUCT_LISTING } from './myProductListing.gql';

const MyProductListing = props => {
    const { setIsCartUpdating } = props;

    const talonProps = useProductListing({
        queries: {
            getProductListing: GET_PRODUCT_LISTING
        }
    });
    const { activeEditItem, isLoading, items, setActiveEditItem } = talonProps;

    if (isLoading) {
        return <div>Loading...</div>;
    }

    return (
        // JSX that renders the list of products in a cart using the talon props
    )
}

export default MyProductListing;