leemunroe / grunt-email-workflow

A Grunt workflow for designing and testing responsive HTML email templates with SCSS.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How to pass through an element without rendering?

Mizpah opened this issue · comments

Is there a way to pass through an element and leave it un-modified in the output?
I am using this (great!) tool to prepare loads of transaction emails for use in our Netsuite/ecommerce implementation. In the example below I need to leave this line alone <#list transaction.item as item><#if item_index==0> for Netsuites templating engine to iterate on on send. For all the rest of the email, I need the optimised html output from the dist folder. (I have about 60 differing emails to do here!)

<p>The details of your order are;</p> <table> **<#list transaction.item as item><#if item_index==0>** <thead> <p>Foo1</p> <tr><th>{item.quantity@label}</th><th>{item.itemname@label}</th></tr> </thead> <tbody> </#if> <tr><td>${item.quantity}</td><td>${item.description}</td></tr> </#list>

I should add that I have tried:
{{{<#list transaction.item as item><#if item_index==0>}}}
{{{{raw}}}}<#list transaction.item as item><#if item_index==0>{{{{/raw}}}}
\<#list transaction.item as item><#if item_index==0>}}}

and many other variants!

Hey @Mizpah haven't had time to look into this in detail but looks like you've tried the raw option which I thought would have worked. I found a slight variation of it here. And also a helper someone documented here. Two options worth looking at. I can dig deeper if this doesn't work.

I'm looking for similar, too. Trying to establish a workflow where this tool helps us develop and test templates that would make their way to Postmark as a template. Their templating language is Mustachio, which is mostly similar to what we're doing in handlebars. I think all the syntax I'd want to use is the same between HBS and Mustachio.

My ideal scenario is to build the template with g-e-w with dummy data provided from a /data file, iterate over it fully rendered, then be able to flag a render to output in "template mode," with no dummy data and all the partials flattened.

In this scenario, littering my template w/ extra flags would be sub-par.

I'll see if I can pull it off with a helper, but any feasibility insight would be super.

commented

@Mizpah - Block Helpers, see Raw Block sample are pry your best bet for getting uncompiled handlebars into your dist/ output.

@ericdfields - Agree this is helpful.
I've done a few iterations on the preview app that will render the compiled dist/ templates using various flavors (liquid, handlebars, php), plus allow you to create sample data files (json / yaml) that get parsed in for previewing only. You get A+ previews, and your templates are ready to ship as-is. TL;DR - Involves modifying server.js - I'll open a suggestion issue for this specifically.

@taeo very cool. Thanks for the guidance.

commented

@Mizpah - I just tried a variation of your code and it works just fine without the need to bypass compiling. Out of the box, handlebars won't compile non-handlebars syntax.

Both your sample code and the following simplification worked without issue and ended up in the compiled .html template identical to the input in .hbs

<#list transaction.item as item>
    <#if item_index==0>
        {item.quantity@label}
    </#if>
    ${item.description}
</#list>

Did you have any specific errors or munged output that you can share?

Thanks @taeo - will dive into this later today, and put together a .hbs and the output thats being modified!

Back again! As per the email above, am back doing some more of these. Here is an .hbs file containing an orders table.

<table class="order_details {{type}}" cellpadding="0" cellspacing="0">
<#list transaction.item as item><#if item_index==0>
  <thead>
    <tr>
      <th>{item.quantity@label}</th><th>{item.itemname@label}</th>
    </tr>
  </thead>
  <tbody>
</#if>
    <tr>
      <td>${item.quantity}</td><td>${item.description}</td>
    </tr>
</#list>
  </tbody>
</table>

Line 2 is the issue - when output in the workflow it looks like this:

<#list transaction.item="" as="" item=""><#if item_index="=0">

Which is enough to prevent it from being imported into the netsuite mail templates. Manually replacing this line after generation works as expected.

commented

@Mizpah99 - The juice task is treating the netsuite template syntax as html, converting logic and operators into attributes <#if item_index==0> becoming <#if item_index="=0">

You can reproduce the issue in isolation over here: http://automattic.github.io/juice/

I don't see a clear path to fixing that without doing something obscure.
For example. The following passes through juice unmodified. You'd have to then replace [[ to < and ]] to > after the juice task using something like grunt-replace

<table class="order_details {{type}}" cellpadding="0" cellspacing="0">
  [[#list transaction.item as item]]
  [[#if item_index==0]]
  <thead>
    <tr>
      <th>{item.quantity@label}</th><th>{item.itemname@label}</th>
    </tr>
  </thead>
  <tbody>
  [[/#if]]
    <tr>
      <td>${item.description}</td>
    </tr>
  [[/#list]]
  </tbody>
</table>
commented

With respect to non-html looking entities, passing other data through.

You can pass un-rendered single line hbs code with a backslash like this \{{myvar}}
#87 is working towards adding a raw helper and much more.