The AppBridge Modal API allows you to display an overlay that prevents interaction with the rest of the app until dismissed.

It is used by customizing your Modal content with the ui-modal element and then opening it with the show() instance method or the shopify.modal.show("modal-id") API.

Consider using OctantisWeb.Components.Polaris.Modal instead.

Prerequisite

The following is required in your .js file:

import { ShopifyAppBridgeModal } from "octantis
Hooks = { ShopifyAppBridgeModal }

Push Events

You can open and close the modal on the client from the server with

{:noreply, socket |> AppBridgeModal.push_open("my_modal_id")}

Warning

The contents of the modal are rendered in an iFrame that is not connnected to LiveView. This has a few very negative side effects:

• The content of the Modal is not updated once it is initially rendered.
• Phoenix events are not sent to the LiveView, instead they must be proxied through hidden buttons.
• Shopify is munging events such as click events in an unknown way to reach the parent LiveView. This is fragile to say the least.

Examples

  <.app_bridge_modal title="Uninstall Section" id="my-modal">
    <:static_iframe>
      Are you sure you want to uninstall the section?
    </:static_iframe>
    <:primary_action content="Uninstall" phx_click="uninstall_section" phx_values={[id: "1234"]} />
    <:secondary_action content="Cancel" phx_click={AppBridgeModal.hide("my-modal")} />
  </.app_bridge_modal>

  <.button phx_click={AppBridgeModal.show("my-modal")}>Uninstall</.button>

See

• https://shopify.dev/docs/api/app-bridge-library/web-components/ui-modal

Attributes

• id (:string) (required) - A unique identifier for the Modal.
• variant (:string) - The size of the modal. Defaults to "base".
• src (:string) - The URL of the content to display within a Modal. If provided, the Modal will display the content from the provided URL and any children other than the ui-title-bar and ui-save-bar elements will be ignored. Defaults to nil.
• title (:string) - Title of the Modal. Defaults to nil.
• phx_hook (:string) - Defaults to "ShopifyAppBridgeModal".

Slots

• title_bar - Accepts attributes:
  • title (:string)
• static_iframe
• primary_action - Primary action for the modal. Only one will be rendered. Accepts attributes:
  • content (:string) - Content the action displays.
  • disabled (:boolean) - Whether or not the action is disabled.
  • variant (:string) - Changes the visual appearance of the Button.Must be one of "plain", "primary", "secondary", "tertiary", or "monochromePlain".
  • tone (:string) - Sets the color treatment of the Button.Must be one of "critical", or "success".
  • full_width (:boolean) - Allows the button to grow to the width of its container.
  • size (:string) - Changes the size of the button, giving it more or less padding.Must be one of "micro", "slim", "medium", or "large".
  • navigate (:string) - Passes through to .link component.
  • patch (:string) - Passes through to .link component.
  • href (:string) - Passes through to .link component.
  • target (:string) - Passes through to .link component.
  • icon (:any) - Source of the icon.Examples include &OctantisWeb.Components.Polaris.Icons.arrow_right/1.
  • phx_click (:any) - Click function passed through to the button.
• secondary_action - Secondary action for the modal. Only one will be rendered. Accepts attributes:
  • content (:string) - Content the action displays.
  • disabled (:boolean) - Whether or not the action is disabled.
  • variant (:string) - Changes the visual appearance of the Button.Must be one of "plain", "primary", "secondary", "tertiary", or "monochromePlain".
  • tone (:string) - Sets the color treatment of the Button.Must be one of "critical", or "success".
  • full_width (:boolean) - Allows the button to grow to the width of its container.
  • size (:string) - Changes the size of the button, giving it more or less padding.Must be one of "micro", "slim", "medium", or "large".
  • navigate (:string) - Passes through to .link component.
  • patch (:string) - Passes through to .link component.
  • href (:string) - Passes through to .link component.
  • target (:string) - Passes through to .link component.
  • icon (:any) - Source of the icon.Examples include &OctantisWeb.Components.Polaris.Icons.arrow_right/1.
  • phx_click (:any) - Click function passed through to the button.