AttributesAPI
The API for interacting with cart and checkout attributes.
Anchor to orderstatusapiOrderStatusApi
The API object provided to this and other customer-account.order-status
extension targets.
- Anchor to attributesattributesReadonlySignalLike<Attribute[] | undefined>required
Custom attributes left by the customer to the merchant, either in their cart or during checkout.
Docs_OrderStatus_AttributesApi
- attributes
Custom attributes left by the customer to the merchant, either in their cart or during checkout.
ReadonlySignalLike<Attribute[] | undefined>
export interface Docs_OrderStatus_AttributesApi
extends Pick<OrderStatusApi<any>, 'attributes'> {}
ReadonlySignalLike
Represents a read-only value managed on the main thread that an extension can subscribe to. Example: Checkout uses this to manage the state of an object and communicate state changes to extensions running in a sandboxed web worker. This interface is compatible with Preact's ReadonlySignal: https://github.com/preactjs/signals/blob/a023a132a81bd4ba4a0bebb8cbbeffbd8c8bbafc/packages/core/src/index.ts#L700-L709
- subscribe
(fn: (value: T) => void) => () => void
- value
T
export interface ReadonlySignalLike<T> {
readonly value: T;
subscribe(fn: (value: T) => void): () => void;
}
Attribute
- key
The key for the attribute.
string
- value
The value for the attribute.
string
export interface Attribute {
/**
* The key for the attribute.
*/
key: string;
/**
* The value for the attribute.
*/
value: string;
}
Attribute values
Preact
examples
Attribute values
Preact
import '@shopify/ui-extensions/preact'; import {render} from 'preact'; export default async () => { render(<Extension />, document.body); }; function Extension() { const buyerSelectedFreeTShirt = shopify.attributes.value ?.buyerSelectedFreeTShirt || false; const tshirtSize = shopify.attributes.value?.tshirtSize || ''; if (Boolean(buyerSelectedFreeTShirt) === true) { return ( <s-text> You selected a free t-shirt, size:{' '} {tshirtSize} </s-text> ); } return null; }