checkout extension delivery options

checkout extension delivery options

mirco_martin
Shopify Partner
14 0 0

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>
    </>
  );

 

 

Replies 0 (0)