Shopify admin panel is allowing store owner to add HTML description for a product. I want to load HTML product description on a post purchase page. I am using React to create post purchase page. How can I do that? Need some help with this please!
2 Likes
@kavishatalsania
While adding products detail ,you can see the result.
after clicking you can add the html code here.
Thank you.
I want to load that HTML on a post purchase page, which loads after payment page and before thank you page.
You mean Check out page
Yes
@kavishatalsania
Check this it may be helpful.
https://help.shopify.com/en/manual/checkout-settings
I am creating app which opens post purchase page using shopify post purchase extension. I want to load HTML product description into that page. I am using React framework.
Use Shopify tags like.
{{ product.description }}
It may be help you.
I am able to fetch product description. But it is not rendering properly on post purchase page. It is rendering like this.
I don’t see any component which renders HTML content - https://shopify.dev/api/checkout-extensions/components
1 Like
{{product.description | strip_html }}
Use this. i hope it will work exactly what you want.
Thank you.
I am using React framework to create post purchase page not liquid code. It is giving error ‘strip_html is not defined’.
strip_html is for liquid templates. I am not using liquid. I am using React framework. This are the components which we can use for post purchase page: https://shopify.dev/api/checkout-extensions/components
Check this.
Not working. Also I don’t want to remove HTML tags. I want to render that HTML content using that HTML so it renders as expected,
1 Like
{{ product.description | strip_html | truncate: 80 }}
strip_html will not work in this scenario. I don’t want to remove HTML code from a string. I need HTML content to render as expected with the styling given by user.
Per Shopify’s documentation - you can not render native HTML on post purchase. You must convert that HTML markup into Shopify approved checkout-ui react components per https://shopify.dev/api/checkout-extensions/
You can try using dangerouslySetInnerHTML from React:
I am not sure if you can use “div” inside the post purchase extension. If not, you can also try to use a Box component with the same dangerouslySetInnerHTML attribute.