Join us for an upcoming Shopify Partner webinar on February 27, 2024. Discover the latest Checkout Extensibility features, and deep dive on improvements to Shopify Functions and Web Pixels. Register now for either the 10am EST or 2pm EST sessions.

Shopify Post-Purchase Checkout Extension- How to render HTML product description? (React)

kavishatalsania
Shopify Partner
19 0 4

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!

Replies 18 (18)

Zworthkey
Shopify Partner
5581 642 1564

@kavishatalsania 
While adding products detail ,you can see the result.
Inkedimage_2021_12_27T06_12_40_291Z_LI.jpg

after clicking you can add the html code here.

Thank you.

kavishatalsania
Shopify Partner
19 0 4

I want to load that HTML on a post purchase page, which loads after payment page and before thank you page. 

Zworthkey
Shopify Partner
5581 642 1564

You mean Check out page

kavishatalsania
Shopify Partner
19 0 4

Yes

Zworthkey
Shopify Partner
5581 642 1564
kavishatalsania
Shopify Partner
19 0 4

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. 
pp.png

Zworthkey
Shopify Partner
5581 642 1564

Use Shopify tags like.

{{ product.description }}

It may be help you.

kavishatalsania
Shopify Partner
19 0 4

I am able to fetch product description. But it is not rendering properly on post purchase page. It is rendering like this. 

kavishatalsania_0-1640587329686.png

I don't see any component which renders HTML content - https://shopify.dev/api/checkout-extensions/components

Zworthkey
Shopify Partner
5581 642 1564

 

{{product.description | strip_html }}

 

Use this. i hope it will work exactly what you want.

Thank you.

kavishatalsania
Shopify Partner
19 0 4

I am using React framework  to create post purchase page not liquid code. It is giving error 'strip_html is not defined'.

Zworthkey
Shopify Partner
5581 642 1564
kavishatalsania
Shopify Partner
19 0 4

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

Zworthkey
Shopify Partner
5581 642 1564
kavishatalsania
Shopify Partner
19 0 4

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, 

Zworthkey
Shopify Partner
5581 642 1564

{{ product.description | strip_html | truncate: 80 }} 

kavishatalsania
Shopify Partner
19 0 4

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.

BrunoSS
Shopify Partner
4 0 1

You can try using dangerouslySetInnerHTML from React: 

 

 

<div dangerouslySetInnerHTML={product.descriptionHtml} />

 

 

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.

gilg
Shopify Partner
31 6 6

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/

I make Checkout Promotions on the app store. Native pre & post purchase upsells - used by over 1,800 merchants.