Can't use html in post puchase extension?

[noahfaro]

Hi All!

I am trying to build a post-purchase extension, and want to organize the information displayed in ways that are not easily covered by the UI components provided by @Shopify/post-purchase-ui-extensions-react. When I try to put something simple into the React component, like a standard div tag saying hello, it throws the error "Unsupported component: div". Is it impossible to use standard HTML tags inside of extensions / do I have to use the components provided by Shopify?

Thanks so much!

[Moira]

Hey @noahfaro,

Shopify's post-purchase extension supports only a limited set of UI components. You can't use standard HTML tags in the extensions, only the components provided by @Shopify/post-purchase-ui-extensions-react.

If you need to organize the information displayed in ways that are not easily covered by the UI components provided by Shopify, you can use CSS to style the components provided by Shopify or create your own custom components.

Alternatively, you can use an iframe to display a separate page with your own HTML and CSS code. However, keep in mind that this approach may negatively impact the performance of your extension.

I hope that helps! Let me know if you have any further questions.

[noahfaro]

@Moira Thank you so much for the input on this. I am trying to import CSS into the file to make some minor adjustments to the components that are available, and the index.tsx script is not picking up the css file at all. Do you know how to solve this or what my options are? Thank you so much for your quick response.

[Moira]

@noahfaro,

You're welcome!

To import CSS into your post-purchase extension, you can use the import statement in your TypeScript file. Here's an example of how you can import a CSS file in your index.tsx file:

import './styles.css';

You can then add your CSS styles to the styles.css file. Make sure to include the correct file path when importing the CSS file.

If this is not working for you, make sure that your CSS file is in the same directory as your index.tsx file, and that the file name and extension are correct. Additionally, you may need to configure your build process to include CSS files.

Let me know if you have any further questions!

[noahfaro]

@Moira Thank you for that! That is what I was currently doing unfortunately, and the CSS was not applying to the components - can you elaborate a bit on what you mean by "configure the build process to include CSS files"? I am currently just running it locally with yarn dev.

[Moira]

@noahfaro,

Ah I see! You may need to add a module bundler or build tool to your project that can handle the importing of CSS files. If you're using create-react-app to build your project, it supports importing CSS files out of the box. However, if you're not using create-react-app, you may need to add a build tool like Webpack or Parcel that can handle CSS imports.

Would you like me to provide an example on how you can use Webpack to handle CSS imports?

[noahfaro]

@Moira I see, thank you so much for that! If it does not take you too much time / you have an example on hand that would be great, but otherwise I can probably figure that out on my end - just let me know!

For context, I made the boilerplate for the post-purchase extension using the command "npm run shopify app generate extension -- --type post_purchase_ui --name=<my name>". My extension currently just has the structure of:

- src

    -> index.tsx

-> shopify.ui.extension.toml

Thank you so much!

[noahfaro]

@Moira Actually yeah it would be great if you could provide an example - thank you so much, sorry for the confusion!

[Moira]

@noahfaro,

No worries! 

Here's an example of how you can use webpack to handle CSS imports in your project:

1. Install the necessary packages:

yarn add webpack webpack-cli css-loader style-loader

2. Create a webpack.config.js file in the root of your project directory:

module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
],
},
};

3. Update your package.json file to include these scripts:

"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --open"
},

4. Update your index.tsx file to import the CSS file as follows:

import React from 'react';
import ReactDOM from 'react-dom';
import './styles.css';

const App = () => {
return <div>Hello World!</div>;
};

ReactDOM.render(<App />, document.getElementById('root'));

5. Run yarn build to build your project or yarn dev to start a development server.

I hope that helps. Let me know if you have any further questions!

[noahfaro]

@Moira Thank you so much for this advice! What package.json should I change the build scripts in since we are working specifically with a UI Extension?

Also, are you sure that I can change the build command for a UI Extension? Here (https://shopify.dev/docs/apps/tools/cli/structure#build-and-deploy-process) it says that it builds extensions with ESBuild, and I'm not sure how to alter the config of the build process to include the addition of CSS files.

[Strydar]

Hi @noahfaro, Did this approach work for you?

If yes, I'd appreciate if you can guide me through it. I followed the same steps which @Moira mentioned in the thread above but the webpack seems to not work.

[Bill_F_Shopify]

Hey y'all. I apologize for any confusion regarding the use of iframes and native DOM elements.

I need to clarify that while iframes and native DOM elements can be used in embedded apps, they are not supported in extensions.

Extensions are designed to run in a secure and isolated environment, which limits the use of standard HTML tags, including iframes. This ensures the performance, security, and integrity of the checkout experience. Instead, you can only use the components provided by @Shopify/ui-extensions-react/checkout.

Additionally, you can't override the CSS for these UI components. The checkout UI will always render the merchant's own branding, and the CSS cannot be altered or overridden. Checkout UI extensions don't have access to the DOM and can't return DOM nodes. They can't return <div> elements, for example. Building an arbitrary tree of HTML and loading additional scripts using script tags are also not supported.

For more detailed information, you can refer to the following resources:

• Shopify Checkout UI Extensions Documentation
• Shopify Engineering: Remote Rendering and UI Extensibility

I hope this clarifies the situation. Please let me know if you have any further questions or need additional assistance.

[RS12]

Hi @Moira,

Can you please let me know the way to add iframe in post purchase checkout extension?

[jtay_onstate]

Hi @Moira ,

I am also interested in a tutorial or example of how to implement an iframe into a Thank You Page UI Extension