Product Listing Talons

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
  • Reset the current item being edited item when the app drawer is closed
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.

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

Kind: global function

Param 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';

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
  • Reset the current item being edited item when the app drawer is closed

Kind: global function

Param Type Description
props Object  
props.item ProductItem Product item data
props.mutations 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';

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

Kind: global function

Param 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';

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.

Kind: global function
Example (Importing into your project)

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

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

Kind: global function

Param 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.

Example (Importing into your project)

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

ProductListingQueries : Object

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

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

Name Type Description
getProductListing GraphQLAST Query to get the product list for a cart

ProductListingTalonProps : Object

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

Kind: global typedef
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.
items Array.<Object> A list of products in a cart
setActiveEditItem function Function for setting the current item to edit

ProductMutations : Object

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

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

Name Type Description
removeItemMutation GraphQLAST Mutation for removing an item in a cart
updateItemQuantityMutation GraphQLAST Mutation for updating the item quantity in a cart

ProductTalonProps : Object

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

Kind: global typedef
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.
handleToggleFavorites function Function to use for handling favorites toggling on 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.
isFavorite boolean True if the cart product is a favorite product. False otherwise.
product ProductItem Cart product data

ProductItem : Object

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

Kind: global typedef
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

QuantityTalonProps : Object

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

Kind: global typedef
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

EditModalTalonProps : Object

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

Kind: global typedef
Properties

Name Type Description
handleClose function Callback function for handling the closing event of the modal.
isOpen boolean True if the modal is open. False otherwise.
setVariantPrice function Function for setting a product’s variant price.
variantPrice Object The variant price for a product. See Money object.

ProductFormTalonProps : Object

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

Kind: global typedef
Properties

Name Type Description
configItem Object Cart item to configure
formErrors 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.

For implementation details View Source.

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;