Solved

How to display a total amount banner in checkout UI extension?

Ponmari
Shopify Partner
20 1 4

How can I get the checkout and order details in checkout UI extension , to show a banner related to the total amount of the order ?

Accepted Solutions (2)

theaisyaaziz
Shopify Partner
14 1 6

This is an accepted solution.

Not sure what you're trying to do but you should be able to get it from the API:

 

1) if you need the whole order, you can use this API: https://shopify.dev/docs/api/checkout-ui-extensions/unstable/apis/order

useOrder()

2) or, if you just want the total, you can use this API: https://shopify.dev/docs/api/checkout-ui-extensions/unstable/apis/cost

useTotalAmount()
 
I haven't used this specific API, but the code should be something along this line:

import {
useTotalAmount,
} from '@shopify/ui-extensions-react/checkout';
function Extension() {
const {amount, currencyCode} = useTotalAmount();
}

View solution in original post

Ponmari
Shopify Partner
20 1 4

This is an accepted solution.

Hi @theaisyaaziz 

 

Thank you for the reply, I have already found a way to get the order and shipping details in the checkout page through

 

 let api = useSubtotalAmount();
 const Amount = api.amount;
 
const deliveryGroups = useDeliveryGroups();
console.log(deliveryGroups);
  const {
    selectedDeliveryOption,
    targetedCartLines,
  } = useDeliveryGroup(deliveryGroups[0]);
 
 
But I'm stuck in getting the shipping settings by the shop owner in the checkout UI extension, Basically I want to get these settings (in the image ) details in my checkout UI extension. How can I get it? 
shipping-screenshopt.png

View solution in original post

Replies 5 (5)

MastersHub
Shopify Partner
215 20 38

Do you have a Shopify Plus plan?

Helpful ? Like and Accept Solution
Buy me a Coffee
Need a Shopify Developer?
Send Email or Chat on WhatsApp
Ponmari
Shopify Partner
20 1 4

Hi @MastersHub 

 

No, I'm working on checkout and customer accounts extensibility preview to test my checkout UI extension app.

 

Thanks in Advance.

theaisyaaziz
Shopify Partner
14 1 6

This is an accepted solution.

Not sure what you're trying to do but you should be able to get it from the API:

 

1) if you need the whole order, you can use this API: https://shopify.dev/docs/api/checkout-ui-extensions/unstable/apis/order

useOrder()

2) or, if you just want the total, you can use this API: https://shopify.dev/docs/api/checkout-ui-extensions/unstable/apis/cost

useTotalAmount()
 
I haven't used this specific API, but the code should be something along this line:

import {
useTotalAmount,
} from '@shopify/ui-extensions-react/checkout';
function Extension() {
const {amount, currencyCode} = useTotalAmount();
}
Ponmari
Shopify Partner
20 1 4

This is an accepted solution.

Hi @theaisyaaziz 

 

Thank you for the reply, I have already found a way to get the order and shipping details in the checkout page through

 

 let api = useSubtotalAmount();
 const Amount = api.amount;
 
const deliveryGroups = useDeliveryGroups();
console.log(deliveryGroups);
  const {
    selectedDeliveryOption,
    targetedCartLines,
  } = useDeliveryGroup(deliveryGroups[0]);
 
 
But I'm stuck in getting the shipping settings by the shop owner in the checkout UI extension, Basically I want to get these settings (in the image ) details in my checkout UI extension. How can I get it? 
shipping-screenshopt.png
vinyljosh
Shopify Partner
2 0 0

Hi, I'm having an issue getting this to work. I've tried to import the useSubtotalAmount and i get the error:

 ExtensionRenderError: ReferenceError: useSubtotalAmount is not defined

 

Screenshot attached. Do i need to adjust anything in the shopify.extension.toml file? api access is set to true.

Screenshot 2024-04-24 at 2.27.42 PM.png

 

I'm just trying to get the subtotal amount so i can conditionally display the banner if the cart total is greater than $50.