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.
@dsiglin,
{% module "h3" module_id="4406934" label="section header" value="some amazing text" %}
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?") }}
@dennisedson 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 %}
@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
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" %}
@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
I really need to look into repeater modules. Thanks for the help by the way. Appreciate it.
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.
@dsiglin,
yep. set each as a separate text field.
easy peasy
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)?
@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 