Choose a version:

PosBlock

The PosBlock component creates a container to place content with an action button. Use it to display structured content within POS block targets.

The component provides a standardized layout specifically designed for content blocks within POS detail views, with consistent padding, spacing, and optional action buttons.

Support

Targets (18)

Supported targets

Use cases

Customer information: Display customer info, loyalty status, or account details.
Order summaries: Show order details, transaction info, or fulfillment status.
Product recommendations: Present recommendations, inventory status, or related items.
Contextual content: Provide actions and information that enhance core POS functionality.

Anchor to examplesExamples

Anchor to example-create-a-content-block-with-an-action-buttonCreate a content block with an action button

Create structured content blocks using a PosBlock component with optional action buttons. This example shows a basic block with content and an action button.

Create a content block with an action button

<s-pos-block>

<s-box paddingBlock="base">

<s-text>Customer Loyalty</s-text>

</s-box>

</s-pos-block>

Examples

Create a content block with an action button
Description
Create structured content blocks using a `PosBlock` component with optional action buttons. This example shows a basic block with content and an action button.
Default
```
<s-pos-block>
  <s-box paddingBlock="base">
    <s-text>Customer Loyalty</s-text>
  </s-box>
</s-pos-block>
```

Anchor to propertiesProperties

Configure the following properties on the PosBlock component.

Anchor to heading heading string: A title that describes the content of the section. If omitted and no secondary actions are provided, the section will be rendered without a header.
Anchor to id id string: A unique identifier for the element used for targeting with CSS, JavaScript, or accessibility features.

Anchor to qr codeQR Code

The PosBlock component renders a QR code when the block is used within a receipt target.

Anchor to content content string: The content to be encoded in the QR code. This can be any string such as a URL, email address, plain text, or other data. Specific string formatting can trigger actions on the user's device when scanned, like opening geolocation coordinates on a map, opening a preferred app or app store entry, preparing an email, text message, and more.
Anchor to id id string: A unique identifier for the element used for targeting with CSS, JavaScript, or accessibility features.

Anchor to slotsSlots

The PosBlock component supports slots for additional content placement within the block. Learn more about using slots.

Anchor to secondary-actions secondary-actions HTMLElement: The secondary actions to perform, provided as button or link type elements. Use the slot="secondary-actions" attribute to place interactive elements that allow users to take actions related to the block's content.

Anchor to best-practicesBest practices

Provide descriptive headings: If you don't specify a heading, the system uses your extension's description, so ensure it's meaningful and concise.
Place important actions in secondary-actions slot: Include only the most relevant actions directly related to your block's content.
Limit secondary actions: To maintain clean, focused interfaces that don't overwhelm the existing POS workflow, use only one secondary action element in each block.

Was this page helpful?