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.

[RS12]

Hi @Moira,

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