Menu icon Foundation
How to call partials

How do I include a partial into my mail project??

 

Maybe I'm being dumb but can't see anything in the documentation for V2

Partialsfoundation for emails 2

How do I include a partial into my mail project??

 

Maybe I'm being dumb but can't see anything in the documentation for V2

Rafi Benkual over 3 years ago

 I made a file called src/partials/menu.html and put in this content:

<menu>
  <item href="#">Menu!</item>
</menu>

And then in src/pages/index.html I added at the top:

{{> menu}}

 

You can find the docs here: http://foundation.zurb.com/emails/docs/panini.html

 

 

Rafi Benkual over 3 years ago

Did that help oliver?

Luke over 3 years ago

oh really? I was adding my {{> sample}} to src/layouts/default.html.

Doesn't the src/pages go in the {{> body}} of the default.html layout?

Then you can add header and footer ..etc into the default layout so it duplicates onto every page you create.

Carlos Eduardo Gomes over 2 years ago

This is a realy simple tip that must be on the official docs.

I spend a lot of time seaching about this issue but cant find anything.

Thanks Rafi :)

Education bangla 12 months ago

 I have separate emails set up for different languages. Here's how I've worked around the challenges that presents without using separate partials:

  1. Added a language variable to the yaml section of each email:
---
lang: en
---
  1. Set up a few common translations in a file called data/translations.yml. Basically, I created an ID for the type of text I'm trying to pull:
- lang: en
  btn-plan: 'Choose Your Plan'
  btn-email: 'Email Us!'
- lang: es
  btn-plan: 'Elija Su Plan'
  btn-email: 'Correo Electrónico'
  1. Created a translate.hbs mixin that my templates and partials can pull from. This particular mixin only translates two types buttons at the moment...but could easily be modified to add more options:
{{~#each translations~}}
	{{~#ifequal this.lang ../email.lang~}}
		{{~#switch ../text~}}
			{{~#case "btn-plan"~}}
				{{~this.btn-plan~}}
			{{~/case~}}
			{{~#case "btn-email"~}}
				{{~this.btn-email~}}
			{{~/case~}}
		{{/switch}}
	{{~/ifequal~}}	
{{~/each~}}

The tilde (~) characters are used for collapsing the whitespace.

Note: I originally referenced this article to help me figure out that mixin.

This allowed me to insert code like this into my templates. I'm passing the ID of the element that I want to translate:

<button target="_blank" href="{{btnLink}}" class="large radius m-b-0">{{~> translate text='btn-plan' ~}}</button>

Not sure if that's the most efficient way to do everything, but it works. Handlebars and yaml are really irritating code to deal with. Education bangla