For discussing the development and usage of Checkout UI extensions, post-purchase extensions, web pixels, Customer Accounts UI extensions, and POS UI extensions
Hi guys, Im trying to create a map for the checkout developing an extension
I want to change the selected delivery option when the user clicks a marker in the map
Im not finding the way to update the selected delivery option
This is part of the code
I just want to know if its possible to update the delivery option
export default reactExtension(
'purchase.checkout.shipping-option-list.render-after',
() => <Extension />,
);
function Extension() {
const { zip } = useShippingAddress();
const deliveryGroups = useDeliveryGroups();
const deliveryOptions = deliveryGroups[0].deliveryOptions;
const delivery = useDeliveryGroup(deliveryGroups[0]);
groupi.deliveryGroups[0].selectedDeliveryOption = deliveryOptions[3];
delivery.selectedDeliveryOption = deliveryOptions[3];
const deliveryMarkers = deliveryOptions.map((option) => {
const latitude = Math.random() * 180 - 90;
const longitude = Math.random() * 360 - 180;
return (
<MapMarker
key={option.title}
latitude={latitude}
longitude={longitude}
accessibilityLabel={`${option.title}`}
overlay={
<MapPopover onClose={()=>{ delivery.selectedDeliveryOption = option}}>
{option.title}
</MapPopover>
}
/>
);
}
);
return (
<>
{/* {zip} */}
<Map
apiKey="AIzaSyDgkcaf4anjwoleNYdFvt7xSq-05HlLx4c"
latitude={-28.024}
longitude={140.887}
zoom={4}
accessibilityLabel="Map"
>
{deliveryMarkers}
</Map>
</>
);