Attributes API

Examples

• Description

  Read all custom attributes from the order and display each key-value pair. This example uses the `useAttributes` hook and iterates over the attribute array.

  React

  import {
    reactExtension,
    useAttributes,
  } from '@shopify/ui-extensions-react/customer-account';
  import {
    BlockStack,
    Text,
  } from '@shopify/ui-extensions/customer-account';
  
  export default reactExtension(
    'customer-account.order-status.block.render',
    () => <Extension />,
  );
  
  function Extension() {
    const attributes = useAttributes();
  
    if (!attributes || attributes.length === 0) {
      return null;
    }
  
    return (
      <BlockStack>
        <Text emphasis="bold">Order details</Text>
        {attributes.map((attr) => (
          <Text key={attr.key}>
            {attr.key}: {attr.value}
          </Text>
        ))}
      </BlockStack>
    );
  }

  TS

  import {
    extension,
    BlockStack,
    Text,
  } from '@shopify/ui-extensions/customer-account';
  
  export default extension(
    'customer-account.order-status.block.render',
    (root, api) => {
      const attributes = api.attributes.current;
  
      if (!attributes || attributes.length === 0) return;
  
      const stack = root.createComponent(BlockStack, {});
      stack.appendChild(
        root.createComponent(Text, {emphasis: 'bold'}, 'Order details'),
      );
      for (const attr of attributes) {
        stack.appendChild(
          root.createComponent(Text, {}, `${attr.key}: ${attr.value}`),
        );
      }
      root.appendChild(stack);
    },
  );

• Description

  Look up a specific attribute by key and display its value in a banner. This example uses `useAttributeValues` to retrieve a single attribute without filtering the full list.

  React

  import {
    reactExtension,
    useAttributeValues,
  } from '@shopify/ui-extensions-react/customer-account';
  import {
    Banner,
    Text,
  } from '@shopify/ui-extensions/customer-account';
  
  export default reactExtension(
    'customer-account.order-status.block.render',
    () => <Extension />,
  );
  
  function Extension() {
    const [giftMessage] = useAttributeValues(['Gift Message']);
  
    if (!giftMessage) {
      return null;
    }
  
    return (
      <Banner status="info" title="Gift message">
        <Text>{giftMessage}</Text>
      </Banner>
    );
  }

  TS

  import {
    extension,
    Banner,
    Text,
  } from '@shopify/ui-extensions/customer-account';
  
  export default extension(
    'customer-account.order-status.block.render',
    (root, api) => {
      const attributes = api.attributes.current;
      const giftMessage = attributes?.find(
        (attr) => attr.key === 'Gift Message',
      );
  
      if (!giftMessage) return;
  
      const banner = root.createComponent(
        Banner,
        {status: 'info', title: 'Gift message'},
      );
      banner.appendChild(
        root.createComponent(Text, {}, giftMessage.value),
      );
      root.appendChild(banner);
    },
  );

• Description

  Read the delivery instructions attribute and display it as a banner. This example uses `useAttributeValues` to look up a known key and conditionally renders the result.

  React

  import {
    reactExtension,
    useAttributeValues,
  } from '@shopify/ui-extensions-react/customer-account';
  import {
    Banner,
  } from '@shopify/ui-extensions/customer-account';
  
  export default reactExtension(
    'customer-account.order-status.block.render',
    () => <Extension />,
  );
  
  function Extension() {
    const [instructions] = useAttributeValues([
      'Delivery Instructions',
    ]);
  
    if (!instructions) {
      return null;
    }
  
    return (
      <Banner status="info" title="Delivery instructions">
        {instructions}
      </Banner>
    );
  }

  TS

  import {
    extension,
    Banner,
  } from '@shopify/ui-extensions/customer-account';
  
  export default extension(
    'customer-account.order-status.block.render',
    (root, api) => {
      const attributes = api.attributes.current;
      const instructions = attributes?.find(
        (attr) => attr.key === 'Delivery Instructions',
      );
  
      if (!instructions) return;
  
      root.appendChild(
        root.createComponent(
          Banner,
          {status: 'info', title: 'Delivery instructions'},
          instructions.value,
        ),
      );
    },
  );