Attributes

The API for interacting with cart and checkout attributes.

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

export default reactExtension(
  'customer-account.order-status.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;
}

OrderStatusApi

The API object provided to this and other `customer-account.order-status` extension targets.

Docs_OrderStatus_AttributesApi

attributes

Custom attributes left by the customer to the merchant, either in their cart or during checkout.

Attribute

key

The key for the attribute.

value

The value for the attribute.

useAttributes

Returns the proposed `attributes` applied to the checkout.

UseAttributesGeneratedType

Returns the proposed `attributes` applied to the checkout.

Returns: Attribute[] | undefined

export function useAttributes< Target extends RenderOrderStatusExtensionTarget = RenderOrderStatusExtensionTarget, >(): Attribute[] | undefined { const api = useApi<Target>(); const extensionTarget = api.extension.target; if (!('attributes' in api)) { throw new ExtensionHasNoFieldError('attributes', extensionTarget); } return useSubscription(api.attributes); }

Attribute

key

The key for the attribute.

value

The value for the attribute.

useAttributeValues

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

UseAttributeValuesGeneratedType

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

Returns: (string | undefined)[]

Params:

keys: string[]

export function useAttributeValues< Target extends RenderOrderStatusExtensionTarget = RenderOrderStatusExtensionTarget, >(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; }); }