pos.product-details.block.render

Target

examples

• Block

  React

  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 />
  ));
  

  TS

  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);
  });