App reviews, troubleshooting, and recommendations
Hi,
I've created a UI extensions that contains three different targets as it should be available on all these locations:
import { useDeliveryGroups, useShippingOptionTarget } from '@shopify/ui-extensions-react/checkout';
import useExtensionTarget from './useExtensionTarget.jsx';
export default function useDeliveryCarrier() {
const { isCheckoutPage } = useExtensionTarget();
const deliveryGroups = useDeliveryGroups();
const { deliveryOptions } = deliveryGroups[0];
// If on checkout page, use the useShippingOptionTarget API
if (isCheckoutPage) {
const { shippingOptionTarget, isTargetSelected } = useShippingOptionTarget();
return {
selectedDeliveryMethod: isTargetSelected ? shippingOptionTarget : null,
};
}
// If on thank you page, use the first delivery option
// as the useShippingOptionTarget API isn't available there
return {
selectedDeliveryMethod: deliveryOptions[0],
};
}
That is conditionally rendering some API's (which I know is against the rules of hooks), this works but is obviously not the best way to go about this.
What would the best way of working around this be? I really don't want to create multiple Checkout.jsx (extension) or hooks for each target.
Thanks for your advice!
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025