shopifyshopify-appshopify-apishopify-storefront-api

Shopify checkout UI how to retreive DeliveryMethodDefinition id of the selected shippingOption

I am working on an app on Shopify's checkout extension UI, I want to show a Banner under shippingOptions using the target "purchase.checkout.shipping-option-item.render-after", in this Banner I want to show custom delivery times depending on the items in the cart, client's address and shippingOption, I can get the items in the cart and client's address but for the shippingOption I only have it's name and a long string called "handle" as I think can be useful using "useShippingOptionTarget()", but I need the shippingOption's "DeliveryMethodDefinition" id that I can get from the admin GraphQL with "deliveryProfiles", but I can't find a way to link one to the other

Here my jsx file

import {
  Banner,
  useApi,
  useTranslate,
  reactExtension,
  useShippingOptionTarget,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.shipping-option-item.render-after',
  () => <Extension />,
);

function Extension() {
  const translate = useTranslate();
  const { extension } = useApi();

  const shippingOption = useShippingOptionTarget();
  console.log(shippingOption)

  return (
    <Banner title="checkout-ui">
      {translate('welcome', { target: extension.target })}
    </Banner>
  );
}

I tried to link using names, but when there is multiple that has same name I have to get price and weight of items and calculate which one to select but if there is a new or something is updated on 1 I have to change code so it's not maintainable.

I tried using the long string in the handle as an ID (hopping it would be useful) but couldn't find what was it's purpose as I couldn't do anything, and I think Shopify docs are not clear when things gets a bit harder...

Solution

  • As of Shopify API version 2024-01

    TL;DR

    Unfortunately you can't get the DeliveryMethodDefinition in Checkout UI extensions.

    (Maybe it's possible on Shopify Plus stores, I don't have experience with these ones)

    Details

    The handle property seems to be computed from the name. It has no special chars in it, that's all.

    We're facing the same king of problem for years and we also decided to link using the shipping rate name. IMO between a link by name and a link by handle, the link by name is better. Consider the 2 shipping rates names below :

    There's great chance that both will have the same handle. But in reality there are not the same shipping rate so if you're doing some links by handle, you're loosing information.

    Some others well known shipping apps also identify Shipping methods using names.