skip to Main Content

Shopify has a very useful method in its Embedded App SDK for showing errors on a small red floating modal : ShopifyApp.flashError("Your error");

My problem is that I cannot have multiline errors in it. I have tried n, /n, /r, r, <br /> and &#013 for having newline. None worked! Any Ideas?

2

Answers


  1. Looks like ShopifyApp.flashError makes a call to postMessage:

    e.postMessage = function(e, t) {
      var r;
      return null == t && (t = {}), r = JSON.stringify({
          message: e,
          data: t
        }), 
        n("client sent " + r + " to " + this.shopOrigin),
        window.parent.postMessage(r, this.shopOrigin), 
        null != t ? t.callbackId : void 0
    }, e.flashNotice = function(e) {
      return this.postMessage("Shopify.API.flash.notice", {
        message: e
      })
    }, e.flashError = function(e) {
      return this.postMessage("Shopify.API.flash.error", {
        message: e
      })
    }
    

    So, if you can find the bit of logic that is listening for messages sent to “Shopify.API.flash.error” you can find the code which renders the message. However, given the r = JSON.stringify({ message: e, data: t}) call, I suspect you are out of luck insofar as passing in a special enough character to invoke a newline.

    Login or Signup to reply.
  2. No, there currently isn’t a way to do this. If you look at the Shopify page source code, you can find the template used to render alerts:

    <script type="text/template" data-template-name="alert">
        ...
        <p>[%= message %]</p>
        ...
    </script>
    

    So your message is being put into a regular paragraph, without anything fancy like white-space: pre-line. And since text inserted into templates isn’t allowed to contain HTML tags, you cannot use a <br> tag either.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search