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 attributesattributesStatefulRemoteSubscribable<[] | 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.
StatefulRemoteSubscribable<Attribute[] | undefined>
export interface Docs_OrderStatus_AttributesApi
extends Pick<OrderStatusApi<any>, 'attributes'> {}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;
}Anchor to useAttributesuse
Returns the proposed attributes applied to the checkout.
UseAttributesGeneratedType
Returns the proposed `attributes` applied to the checkout.
Attribute[] | undefinedexport function useAttributes<
Target extends RenderOrderStatusExtensionTarget = RenderOrderStatusExtensionTarget,
>(): Attribute[] | undefined {
const api = useApi<Target>();
const extensionTarget = api.extension.target;
if (!('attributes' in api)) {
throw new ExtensionHasNoFieldError('attributes', extensionTarget);
}
return useSubscription(api.attributes);
}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;
}Returns the values for the specified attributes applied to the checkout.
Anchor to useAttributeValues-parametersParameters
- Anchor to keyskeysstring[]required
An array of attribute keys.
UseAttributeValuesGeneratedType
Returns the values for the specified `attributes` applied to the checkout.
- keys
An array of attribute keys.
string[]
(string | undefined)[]export function useAttributeValues<
Target extends RenderOrderStatusExtensionTarget = RenderOrderStatusExtensionTarget,
>(keys: string[]): (string | undefined)[] {
const attributes = useAttributes<Target>();
if (!attributes?.length) {
return [];
}
return keys.map((key) => {
const attribute = attributes.find((attribute) => attribute.key === key);
return attribute?.value;
});
}Attribute values
React
examples
Attribute values
React
import { Text, reactExtension, useAttributeValues, } from '@shopify/ui-extensions-react/customer-account'; export default reactExtension( 'customer-account.order-status.block.render', () => <Extension />, ); function Extension() { const [buyerSelectedFreeTShirt, tshirtSize] = useAttributeValues([ 'buyerSelectedFreeTShirt', 'tshirtSize', ]); if (Boolean(buyerSelectedFreeTShirt) === true) { return ( <Text> You selected a free t-shirt, size:{' '} {tshirtSize} </Text> ); } return null; }