Extensions not showing up on Checkout and Thank you pages

c-ancia commented 3 weeks ago

Please list the package(s) involved in the issue, and include the version you are using

"@shopify/app": "^3.58.2", "@shopify/ui-extensions": "2024.7.0", "@shopify/ui-extensions-react": "2024.7.0", "react": "^18.2.0",

Describe the bug

I am testing a headless setup connected to a developer store with checkout extensibility activated. I have created 2 Checkout UI extensions to test the possibilities of customisation we'd have at the Checkout and Thank you pages.

One extension is aiming at the thank you page and following the tutorial here.
The other extension is aiming at the Checkout page, and should display a simple "Hello" text.

./src/Checkout.jsx

import {reactExtension, Text} from '@shopify/ui-extensions-react/checkout';

// 1. Choose an extension target
export default reactExtension(
  'purchase.checkout.cart-line-item.render-after',
  () => <Extension />,
);
function Extension() {
  return <Text>Test</Text>;
}

with proper targets in toml file

[[extensions.targeting]]
module = "./src/Checkout.jsx"
target = "purchase.checkout.cart-line-item.render-after"

None of the 2 extensions is showing up in my checkout process.

I tried with both shopify app dev and shopify app deploy with the app installed in the admin, customising the Checkout and adding the extensions where I want them. Nothing shows up.

I've seen in the documentation that this should be only for Shopify Plus plans but it should also work with Developer stores provided the Checkout extensibility is activated. This is the case. I've seen a ticket mentioning that the extensions don't show on draft orders. It's not a draft order. I've seen on the troubleshooting part of the tutorial that the Adress autocomplete feature will prevent the display of extensions so I've disabled it. Still no luck.

I am running out of ideas about why this is not working.

Can you please advise?

Expected behavior

i'm expecting to see the extensions at the defined places.

Screenshots

jamesvidler commented 2 days ago

Are there any console errors that you see regarding your extension?

c-ancia commented 13 hours ago

Hello,

I just managed to fix the issue: it turns out the imports for the "Text" component (and all the components used in your tutorial here https://shopify.dev/docs/apps/build/checkout/thank-you-order-status/add-survey?extension=react) are wrong.

Changing from this

import {reactExtension, Text} from '@shopify/ui-extensions-react/checkout';

// 1. Choose an extension target
export default reactExtension(
  'purchase.checkout.cart-line-item.render-after',
  () => <Extension />,
);
function Extension() {
  return <Text>Test</Text>;
}

to this

import {reactExtension} from '@shopify/ui-extensions-react/checkout';
import {Text} from '@shopify/ui-extensions/checkout';

// 1. Choose an extension target
export default reactExtension(
  'purchase.checkout.cart-line-item.render-after',
  () => <Extension />,
);
function Extension() {
  return <Text>Test</Text>;
}

did the trick.

Same for the tutorial: from this

import {
  reactExtension,
  BlockStack,
  View,
  Heading,
  Text,
  ChoiceList,
  Choice,
  Button,
  useStorage,
} from '@shopify/ui-extensions-react/checkout';
import {useCallback, useEffect, useState} from 'react';

to this

import {reactExtension} from '@shopify/ui-extensions-react/checkout';
import {
  BlockStack,
  View,
  Heading,
  Text,
  ChoiceList,
  Choice,
  Button,
  useStorage,
} from '@shopify/ui-extensions/checkout';
import {useCallback, useEffect, useState} from 'react';

worked.

I had a big list of Text components available with my IDE autocomplete so it's not easy to figure out which one is the right one. I would've also thought the ones from the tutorial are the right one.

Anyways, it's now resolved. Thanks!

Shopify / ui-extensions