useAttributeValues

Returns the values for the specified `attributes` applied to the checkout.

import {
  Text,
  reactExtension,
  useAttributeValues,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  const [buyerSelectedFreeTShirt, tshirtSize] =
    useAttributeValues([
      'buyerSelectedFreeTShirt',
      'tshirtSize',
    ]);

  if (Boolean(buyerSelectedFreeTShirt) === true) {
    return (
      <Text>
        You selected a free t-shirt, size:{' '}
        {tshirtSize}
      </Text>
    );
  }

  return null;
}

UseAttributeValuesGeneratedType

Returns the values for the specified `attributes` applied to the checkout.

Returns: (string | undefined)[]

Params:

keys: string[]

export function useAttributeValues< Target extends RenderExtensionTarget = RenderExtensionTarget, >(keys: string[]): (string | undefined)[] { const attributes = useAttributes<Target>(); if (!attributes?.length) { return []; } return keys.map((key) => { const attribute = attributes.find((attribute) => attribute.key === key); return attribute?.value; }); }

Related

• StandardApi
• CheckoutApi
• OrderStatusApi
• CartLineItemApi
• PickupPointListApi
• PickupLocationListApi
• ShippingOptionItemApi
• ExtensionTargets