Pos
The 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.
Supported targets
- pos.
cart. line-item-details. action. render - pos.
customer-details. action. render - pos.
customer-details. block. render - pos.
draft-order-details. action. render - pos.
draft-order-details. block. render - pos.
exchange. post. action. render - pos.
exchange. post. block. render - pos.
home. modal. render - pos.
order-details. action. render - pos.
order-details. block. render - pos.
product-details. action. render - pos.
product-details. block. render - pos.
purchase. post. action. render - pos.
purchase. post. block. render - pos.
receipt-footer. block. render - pos.
receipt-header. block. render - pos.
register-details. action. render - pos.
register-details. block. render - pos.
return. post. action. render - pos.
return. post. block. render
Supported targets
- pos.
cart. line-item-details. action. render - pos.
customer-details. action. render - pos.
customer-details. block. render - pos.
draft-order-details. action. render - pos.
draft-order-details. block. render - pos.
exchange. post. action. render - pos.
exchange. post. block. render - pos.
home. modal. render - pos.
order-details. action. render - pos.
order-details. block. render - pos.
product-details. action. render - pos.
product-details. block. render - pos.
purchase. post. action. render - pos.
purchase. post. block. render - pos.
receipt-footer. block. render - pos.
receipt-header. block. render - pos.
register-details. action. render - pos.
register-details. block. render - pos.
return. post. action. render - pos.
return. post. block. render
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
Create structured content blocks using a 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
Create a content block with an action button
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 component.
- Anchor to headingheadingheadingstringstring
The heading to display within the POSBlock.
If not provided, the description of the extension will be used when a heading is appropriate.
- Anchor to idididstringstring
A unique identifier for the element.
Anchor to qr codeQR Code
The component renders a QR code when the block is used within a receipt target.
- Anchor to contentcontentcontentstringstring
The content to be encoded in the QR code, which can be any string such as a URL, email address, plain text, etc. 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 idididstringstring
A unique identifier for the element.
Anchor to slotsSlots
The component supports slots for additional content placement within the block. Learn more about using slots.
- Anchor to secondary-actionssecondary-actionssecondary-actionsHTMLElementHTMLElement
The secondary actions to perform, provided as button or link type elements.
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.