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

Re: Custom HTML code to target "customer-account.profile.block.render" doesn't work as exp

Custom HTML code to target "customer-account.profile.block.render" doesn't work as expected

dtcowner
Shopify Partner
2 0 0

Hi everybody,

 

I want to add a simple HTML code into customer's profile page, so I tried to created a customer account UI extension following https://shopify.dev/docs/apps/build/customer-accounts/start-building and https://shopify.dev/docs/apps/build/customer-accounts/inline-extensions/build-profile?extension=reac... . According to these articles, I tried to render a React component into "customer-account.profile.block.render" target, but when I installed it into my test site, my custom React extension isn't rendered as expected. 

Here is the content of my "shopify.extension.toml" file in "extensions/customer-account-ui-2/shopify.extension.toml"

api_version = "unstable"

[[extensions]]
name = "customer-account-ui-2"
handle = "customer-account-ui-2"
type = "ui_extension"


[[extensions.targeting]]
module = "./src/ProfileExtension2.tsx"
target = "customer-account.profile.block.render"

[extensions.capabilities]
api_access = true

And here is my "ProfileExtension2" React component under "extensions/customer-account-ui-2/src/ProfileExtension2.tsx"

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

export default reactExtension(
  'customer-account.profile.addresses.render-after',
  () => <Extension />,
);

function Extension() {
  console.log('Hello from: "customer-account.profile.addresses.render-after"!');
  return <Text>I am a company details extension</Text>;
}

I also try to run a console log but when I access https://shopify.com/xxx/account page, there is nothing in the browser's console as well.


Am I missed something?

Replies 2 (2)

ctdevelopment
Shopify Partner
2 0 0

Yes, You missed something

dtcowner
Shopify Partner
2 0 0

Hi @ctdevelopment , could you please help to which is the part I missed? 😞