Is there a recommended way to pass liquid templates back in an app proxy response?

[Danh11]

I have an app built upon the Shopify remix app template. I am passing a product card (at the moment it's Dawn's product card) back in response to a request via the shopify app proxy. Although I'm running into issues to do with escaping characters.

As it's my first time, I'm wondering if I am doing it correctly as it seems a little fickle and I don't think I'd be comfortable releasing it into production. The template is fine if I don't touch it, but I'd like merchants to be able to use their own template if they wanted to.

The ways I've got it working is to only use single line liquid tags (not blocks of liquid), and no double quotes inside the template as it gets messy when it comes out the other side of the json() function that I need to return a response. I might be doing this wrong?

Would be great to hear or see how others are doing this.

The remix app:

export async function action({ request }) {
  if (request.method === 'OPTIONS') return await cors(request, json({}));

  // rest of code

  const response = json( productTemplate(data) );
  response.headers.set("Content-Type", "application/liquid");
  return await cors(request, response);
}

Client/theme

  async storeHtml(response) {
    const responseText = await response.text();
    const rawHtml = responseText;
    const htmlCleaned = rawHtml.replace(/\\n/g, '');
    const parser = new DOMParser();
    const doc = parser.parseFromString(htmlCleaned, 'text/html');
    const card = doc.querySelector('.product-card');

    if (card !== null) {
      const cardHtmlString = card.outerHTML;
      this.data.html = cardHtmlString;
    }
  }

[Liam]

Hi Danh11,

Your approach seems to be right. However, the escaping issue commonly occurs when you are sending a response from the server to the client.

The problem you are facing is related to the characters in your JSON string that needs to be escaped. You are replacing the newline characters with an empty string using replace(/\\n/g, ''). It's a good approach but you need to consider other characters as which needs to be escaped such as backspace, form feed, carriage return, horizontal tab, double quote, and backslash.

Here's how you can escape these characters:

const htmlCleaned = rawHtml.replace(/[\n\r\t\\'"]/g, function(char) {
  switch (char) {
    case '\n': return '\\n';
    case '\r': return '\\r';
    case '\t': return '\\';
    case '\\': return '\\\\';
    case "'": return "\\'";
    case '"': return '\\"';
    default: return char;
  }
});

This code will replace all the special characters with their escaped versions. This way, your JSON string will be correctly formatted and won't face any issues related to escaping characters.

Hope this helps!

[Danh11]

Unfortunately I couldn't get this one working. I spent some time on it and wasn't able to get anywhere. In the end I've changed how I'm going about this. May come back to it sometime later 🙂

[NickShi]

Hi @Danh11 , I have same problem as you, did you get a better solution now ? many thanks.

[Danh11]

No I haven't attempted it since, sorry!

[DodoDev]

Hi,
Maybe you are looking for: `liquid()` ? You can use it inside your action handling the proxy logic.

const { session, liquid } = await authenticate.public.appProxy(request)

See https://github.com/Shopify/shopify-app-template-remix/issues/295#issuecomment-1710586193 .

Not sure it works, I am stuck at trying to display the result!