Pickup
Requires access to protected customer data for some properties.
This API object is provided to extensions registered for the purchase.checkout.pickup-location-list.render-before or purchase.checkout.pickup-location-list.render-after extension targets.
It extends the and provides a boolean to indicate whether the customer location input form is currently rendered and shown to the buyer.
Anchor to propertiesProperties
See the StandardApi examples for more information on how to use the API.
- Anchor to isLocationFormVisibleisLocationFormVisibleStatefulRemoteSubscribable<boolean>required
Whether the customer location input form is shown to the buyer.
PickupLocationListApi
- isLocationFormVisible
Whether the customer location input form is shown to the buyer.
StatefulRemoteSubscribable<boolean>
export interface PickupLocationListApi {
/**
* Whether the customer location input form is shown to the buyer.
*/
isLocationFormVisible: StatefulRemoteSubscribable<boolean>;
}Was this section helpful?
import {
reactExtension,
useApi,
useSubscription,
Text,
} from '@shopify/ui-extensions-react/checkout';
export default reactExtension(
'purchase.checkout.pickup-location-list.render-before',
() => <Extension />,
);
function Extension() {
const {isLocationFormVisible} =
useApi<'purchase.checkout.pickup-location-list.render-before'>();
const locationFormShown = useSubscription(
isLocationFormVisible,
);
if (locationFormShown) {
return (
<Text>
The customer is being asked to provide
their location.
</Text>
);
} else {
return (
<Text>
Pickup locations are being shown.
</Text>
);
}
}
examples
React
import { reactExtension, useApi, useSubscription, Text, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.pickup-location-list.render-before', () => <Extension />, ); function Extension() { const {isLocationFormVisible} = useApi<'purchase.checkout.pickup-location-list.render-before'>(); const locationFormShown = useSubscription( isLocationFormVisible, ); if (locationFormShown) { return ( <Text> The customer is being asked to provide their location. </Text> ); } else { return ( <Text> Pickup locations are being shown. </Text> ); } }JavaScript
import {extension} from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.pickup-location-list.render-before', (root, {isLocationFormVisible}) => { const content = root.createText( getTextContent( isLocationFormVisible.current, ), ); root.appendChild(content); isLocationFormVisible.subscribe( (updatedLocationFormVisible) => { content.updateText( getTextContent( updatedLocationFormVisible, ), ); }, ); function getTextContent( isLocationFormVisible, ) { if (isLocationFormVisible) { return 'The customer is being asked to provide their location.'; } else { return 'Pickup locations are being shown.'; } } }, );
