Passing text into a custom module

[#1]

Hi, code question about calling custom modules.

I've set up custom modules to house the various email code components. For instance my header 3 component loos like this:

  <font face="'Ubuntu' , Helvetica, Arial, sans-serif;" size="3" color="#D3BB39">
    <h3 style="font-weight: 500; color: #D3BB39; font-size: 18px; line-height: 120%; margin: 22px 0 9px 0;">{% text "h3_text" value="{{ module.h3_text }}", no_wrapper="True" %}</h3>
  </font>

I then create a new email template and call the component like this:

{% module "h3" module_id="4406934" label="section header" %}

My question: is there a way to pass in / pre-populate the text when I call the h3 component? Thanks.

ps - what I'm trying to do is create a single source of truth for various email elements like headers, buttons, etc. If I can pass in the text when I call the component that will allow for great flexibility.

[#2 · Accepted solution]

@dsiglin,

{% module "h3" module_id="4406934" label="section header" value="some amazing text" %}

[#3]

Thank you, I will try that out. In the meantime I discovered macros. It allows me to pass in multiple variables.

{% from 'Vast/Modules/earnnest-custom__email-components.html' import h1 %}
{{ h1("Did we miss something?") }}

@dennis_e is there a way to pass in multiple variables using the method you showed? 

Using Macros I found out I can pass in multiple variables which is great for buttons like this:

{% macro button (button_url, target, text) %}
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td style="padding: 0;">
        <table border="0" cellspacing="0" cellpadding="0">
          <tr>
            <font face="'Ubuntu' , Helvetica, Arial, sans-serif;" size="2" color="#ffffff" bgcolor="#716F7e">
              <td align="center" style="border-radius: 8px; color:#ffffff; background-color:#716F7e;">
                <a href="{{ button_url }}" target="{{ target }}" style="font-size: 16px; font-family: 'Ubuntu', Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; border-radius: 8px; padding: 10px 32px; border: 1px solid #716F7e; display: inline-block; text-transform: uppercase; font-weight: 500;">{{ text }}</a>
              </td>
            </font>
          </tr>
        </table>
      </td>
    </tr>
  </table>
{% endmacro %}

[#4]

@dsiglin, have you considered making your components with custom modules?

i build all of my sections with custom modules then add them to the html file.  

i try to encapsulate them as mush as possible as email is finnicky at best

[#5]

I believe that's what was doing originally. I created a module for h3 

  <font face="'Ubuntu' , Helvetica, Arial, sans-serif;" size="3" color="#D3BB39">
    <h3 style="font-weight: 500; color: #D3BB39; font-size: 18px; line-height: 120%; margin: 22px 0 9px 0;">{% text "h3" value="h3", no_wrapper="True" %}</h3>
  </font>

I then called the h3 module in the HTML email template like this:

{% module "module_1544063249129271" module_id="4406934" label="earnnest-custom__h3" %}

[#6]

@dsiglin,

yep

my modules tend to include more elements.

i would have a heading, an image and a paragraph for example.  I dont think i have ever limited the module to a single h3.  

also, keep in mind that you can make the module a repeater module.  that is pretty powerful

[#7]

I really need to look into repeater modules. Thanks for the help by the way. Appreciate it.

[#8]

Oh, forgot to ask, using modules is it possible to pass in multiple objects? For buttons I want to pass in the button url, button target, and button text.

[#9]

@dsiglin, 

yep.  set each as a separate text field.  

easy peasy

[#10]

This is a great thread -- I have a programming background but I'm struggling to understand a few pieces. 

I am adding a Stripe button to HubSpot so my pages can do payments.

var stripe = Stripe('pk_live_XXXXXXXXXX', { betas: ['checkout_beta_3'] });

the pk_live cannot be hard-coded in the component; it needs to be an input parameter. Would it be something like this:

var stripe = Stripe('{{stripe_sku_id}}', { betas: ['checkout_beta_3'] });

? If so how do I set this in a given instance of a form (ie a landing page)?

[#11]

@Julian-Harris,

you should probably open a new thread for this one. 

this wont work the same way as forms work differently.

@tjoyceis the wizard of forms