Web component `ui-modal` in App Bridge doesn't work in RemixJS Shopify Template

Solved

Web component `ui-modal` in App Bridge doesn't work in RemixJS Shopify Template

nxtdev
Shopify Partner
2 0 0

I'm adding a modal to my app and noticed that the old Modal component in Polaris was deprecated so I checked out the `ui-modal` web component in App Bridge. I'm just trying this out and copy-pasted the code from docs but clicking any button under the `ui-title-bar` just crashes the entire app. Here's the code again that I copy-pasted from the docs to my Shopify-Remix template (with some React adjustments like onClick):

<ui-modal id="my-modal">
<p>Message</p>
<ui-title-bar title="Title">
<button variant="primary">Label</button>
<button onClick={() => document.getElementById('my-modal')!.hide()}>Label</button>
</ui-title-bar>
</ui-modal>

<button onClick={() => document.getElementById('my-modal')!.show()}>Open Modal</button> 

 

And what it's like clicking the Dialog buttons:

 

Screenshot 2024-09-29 at 12.41.46 AM.JPG

Accepted Solution (1)

BSSCommerce-HDL
Shopify Partner
2305 833 904

This is an accepted solution.

Hi @nxtdev, For remix, you should use this: https://shopify.dev/docs/api/app-bridge-library/react-components/modal-component

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

Replies 2 (2)

BSSCommerce-HDL
Shopify Partner
2305 833 904

This is an accepted solution.

Hi @nxtdev, For remix, you should use this: https://shopify.dev/docs/api/app-bridge-library/react-components/modal-component

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

nxtdev
Shopify Partner
2 0 0

Cool, thanks for pointing this out! I'm new to Remix, still figuring things out.