For discussing the development and usage of Checkout UI extensions, post-purchase extensions, web pixels, Customer Accounts UI extensions, and POS UI extensions
We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more
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
and here are the ids that I want (I got it by a graphql query)
here in the BO
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.