pos.product-details.block.render

Block

import React from 'react';

import {
  Text,
  useApi,
  reactExtension,
  POSBlock,
  POSBlockRow,
} from '@shopify/ui-extensions-react/point-of-sale';

const Block = () => {
  const api = useApi<'pos.product-details.block.render'>();
  return (
    <POSBlock action={{title: 'Open action', onPress: api.action.presentModal}}>
      <POSBlockRow>
        <Text>{'This is a block extension'}</Text>
        <Text>{`Product ID for this product: ${api.product.id}`}</Text>
      </POSBlockRow>
    </POSBlock>
  );
};

export default reactExtension('pos.product-details.block.render', () => (
  <Block />
));

import {
  POSBlock,
  Text,
  POSBlockRow,
  extension,
} from '@shopify/ui-extensions/point-of-sale';

export default extension('pos.product-details.block.render', (root, api) => {
  const block = root.createComponent(POSBlock, {
    action: {title: 'Open action', onPress: api.action.presentModal},
  });

  const mainText = root.createComponent(Text);
  mainText.append('This is a block extension');

  const subtitleText = root.createComponent(Text);
  subtitleText.append(`Product ID for this product: ${api.product.id}`);

  const blockMainRow = root.createComponent(POSBlockRow);
  blockMainRow.append(mainText);

  const blockSubtitleRow = root.createComponent(POSBlockRow);
  blockSubtitleRow.append(subtitleText);
  block.append(blockMainRow);
  block.append(blockSubtitleRow);

  root.append(block);
});