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 1569

@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 1569

You mean Check out page

kavishatalsania
Shopify Partner
19 0 4

Yes

Zworthkey
Shopify Partner
5581 642 1569
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 1569

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 1569

 

{{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 1569
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 1569
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 1569

{{ 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.