All things Shopify and commerce
let Button = window.AppBridge.actions.Button; let okButton = Button.create(window.app, {label: "Submit"}); okButton.subscribe(Button.Action.CLICK, () => { reportModal.dispatch(Modal.Action.CLOSE) }); let cancelButton = Button.create(window.app, {label: "Cancel"}); cancelButton.subscribe(Button.Action.CLICK, () => { reportModal.dispatch(Modal.Action.CLOSE); }); const modalOptions = { title: "Title", message: "Message body", footer: { buttons: { primary: okButton, secondary: [cancelButton], }, }, size: "medium" }; let Modal = window.AppBridge.actions.Modal; let reportModal = Modal.create(window.app, modalOptions); reportModal.dispatch(Modal.Action.OPEN);Applying this in Rails application with Stimulus JS.
Hi @aldrien ,
Here’s how you can approach it:
import { Controller } from "stimulus";
export default class extends Controller {
static targets = ["content"];
connect() {
this.createModal();
}
createModal() {
let Button = window.AppBridge.actions.Button;
let Modal = window.AppBridge.actions.Modal;
let okButton = Button.create(window.app, { label: "Submit" });
let cancelButton = Button.create(window.app, { label: "Cancel" });
okButton.subscribe(Button.Action.CLICK, () => {
this.submitForm();
});
cancelButton.subscribe(Button.Action.CLICK, () => {
this.closeModal();
});
const modalOptions = {
title: "Form Modal",
message: this.contentTarget.innerHTML, // Use innerHTML to inject form
footer: {
buttons: {
primary: okButton,
secondary: [cancelButton],
},
},
size: "medium",
};
this.reportModal = Modal.create(window.app, modalOptions);
this.reportModal.dispatch(Modal.Action.OPEN);
}
closeModal() {
this.reportModal.dispatch(Modal.Action.CLOSE);
}
submitForm() {
const form = document.getElementById('report-form');
const formData = new FormData(form);
// Handle form submission, e.g., send via Ajax or Rails controller
console.log(Object.fromEntries(formData.entries()));
this.closeModal();
}
}
Hi @rajweb - thanks for your reply. I tried your suggestion - but this `this.contentTarget.innerHTML renders as text not HTML. Am i missing something?
Hi @aldrien ,
Got it!
createModal() {
let Button = window.AppBridge.actions.Button;
let Modal = window.AppBridge.actions.Modal;
let okButton = Button.create(window.app, { label: "Submit" });
let cancelButton = Button.create(window.app, { label: "Cancel" });
okButton.subscribe(Button.Action.CLICK, () => {
this.submitForm();
});
cancelButton.subscribe(Button.Action.CLICK, () => {
this.closeModal();
});
// Create a modal without using the 'message' option to inject HTML directly later
const modalOptions = {
title: "Form Modal",
footer: {
buttons: {
primary: okButton,
secondary: [cancelButton],
},
},
size: "medium",
};
this.reportModal = Modal.create(window.app, modalOptions);
// Get the modal content container after creating the modal
const modalContent = document.createElement('div');
modalContent.innerHTML = this.contentTarget.innerHTML; // Inject HTML form
document.querySelector('.Polaris-Modal-Section').appendChild(modalContent); // Append HTML to modal
this.reportModal.dispatch(Modal.Action.OPEN);
}
This should resolve the issue of the content rendering as text instead of HTML. Let me know how it goes
Hi @rajweb - thanks for rechecking, however there is issue because the AppBridge Modal is in Shopify Admin while my Rails app is being iframed (embedded in Shopify), thus we cannot manually select the modal body and append/insert the target form 😞
Shopify made the polaris_modal deprecated (which I'm currently using)
https://shopify.dev/docs/api/app-bridge/using-modals-in-your-app#why-app-bridge-modals-instead-of-po...
But make it hard to customize their modal 😵💫
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024