How to get DeliveryMethodDefinition ids from checkout shipping page

How to get DeliveryMethodDefinition ids from checkout shipping page

AW1234
Shopify Partner
44 7 12

Hi,

I am trying to make an app that will show a banner just under shipping methods items in the shipping page of the checkout process, it is my first checkout app and I am so lost because the docs are not clear for me.

I want to get the shippping method's DeliveryMethodDefinition id that the banner is on, there is images following.

I have this js file

import { extension, Banner } from "@shopify/ui-extensions/checkout";

export default extension("purchase.checkout.shipping-option-item.render-after", async (root, api) => {
  const { extension, i18n, isTargetSelected, lines, query, shop } = api;

  // trying to take al the data I need...

  const myshopifyDomain = shop.myshopifyDomain;

  try {
    const { data } = await query(`query($ids: [ID!]!){
      nodes(ids:$ids){
        id
        ...on ProductVariant{
          id, sku
        }
      }
    }`, {
      variables: {
        ids: lines.current.map((line) => line.merchandise.id)
      }
    });
    const skus = data.nodes.map((node) => node.sku);
    console.log(skus)
  } catch (err) {
    console.error(err);
  }

  const createBanner = () => {
    root.append(
      root.createComponent(
        Banner,
        { title: i18n.translate('title') },
        i18n.translate('welcome', { target: extension.target })
      )
    );
  };

  const removeBanner = () => {
    for (let i = 0; i < root.children.length; ++i) {
      root.children[i].remove();
    }
  };

  if (isTargetSelected.current) {
    createBanner();
  } else {
    removeBanner();
  }

  isTargetSelected.subscribe((value) => {
    if (value) {
      createBanner();
    } else {
      removeBanner();
    }
  });
});

 

there is something in the "api" object named "deliveryGroups" but I didn't find anything about it so i logged it and tried some things but couldn't do anything with the handle nor the "DeliveryGroup" id, and no docs to explain those objects (Am I blind or there is no docs about this?) is there anything I can do with this object to get the shipping method's DeliveryMethodDefinition id that my banner is on?

 

I also saw by logging "api" a string named "checkoutToken" but I didn't understand how to use and again couldn't find a doc about it.

 

Also there is "target" but same I couldn't use it.

 

Here is the shipping page in the checkout

AW1234_0-1704379402317.png

 

and here are the ids that I want (I got it by a graphql query)

AW1234_1-1704379506433.png

 

here in the BO

AW1234_2-1704379571311.png

 

I want for example the banner that will be under "test" shipping method to have the id shown in the 2nd image.

 

Sorry it is long but thank you very much to whoever could help me.

Replies 0 (0)