AttributesAPI
API
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<Attribute[] | undefined>required
Custom attributes left by the customer to the merchant, either in their cart or during checkout.
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;
}Was this section helpful?
Anchor to useAttributesuse
use
Returns the proposed attributes applied to the checkout.
Attribute[] | undefined
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;
}Was this section helpful?
Returns the values for the specified attributes applied to the checkout.
Anchor to useAttributeValues-parametersParameters
- Anchor to keyskeysstring[]required
An array of attribute keys.
(string | undefined)[]
Was this section helpful?
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;
}
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; }