Email campaign template containing image without an anchor tag
If the image exists in the email template without an anchor tag (<a>)
Example
<td>
<img e-editable="image_1" alt="" />3
<td>Solution
In this case, the VCE Product Search add-on can automatically add links to images. The image link will not be editable in the email campaign until a product has been inserted.
Set the content type: image link destination and/or image link title on the image e-editable. This will wrap the image in an <a> tag.
Email campaign template containing image with an anchor tag
If the image exists in the template with an anchor tag (<a>)
Example
<td>
<a href="" e-editable="link_1" title="">
<img e-editable="image_1" alt="" />
</a>
<td>Solution
In this case, the content type: link destination or link title should be set the link e-editable instead.
Otherwise, the editor will add a second <a> tag and the image will not be linked.
Inserting Relational Data placeholders
The VCE Product Search add-on after Configuring email template blocks enables you to search for and insert Relational Data placeholders while creating your email campaign in the Visual Content Editor.
Cautions
Consider the following caveats before inserting Relational Data placeholders:
- The VCE Product Search add-on always uses the data available in the Predict Product Catalogue, not in the Relational database.
- The values coming from Relational Data cannot be manipulated, reformatted by the VCE Product Search add-on. These values are not available until the email campaign is personalised upon send.
- The email campaign will only show placeholders until personalized, so the Contact preview must be used to see the campaigns products.
Setting up the email campaign to store Relational Data placeholders
1. Set up the email template so that each product column with an e-editable element must be available to store an ESL string:
<!-- <tr><td e-editable="productData1"></td></tr> -->
2. Create a custom variable to be able to insert the ESL string (containing Relational Data placeholders) into this e-editable element block.
The variable will evaluated (with the product data) once before inserting it. The Relational Data placeholders must be output within a string {{ " " }}, otherwise they will be evaluated before they are inserted into the campaign.
{{ "{% set productTitle = rds.connection.table(" ~ product.item_id ~ ")[0].title %} " }}
{{ "{% set productLink = rds.connection.table(" ~ product.item_id ~ ")[0].link %} " }}
Extend as needed if the Product data in the Relational Database is personalized on further level, for example language or region:{{ "{% set productTitle = rds.connection.table(" ~ product.item_id ~ ", contact.35)[0].title %}" }}
3. Once the Relational Data placeholders are inserted with the VCE Product Search, they will contain the data from Relational Data once the campaign is personalised.
The variables may be used in the rest of the product block:{{ productTitle }}
These can be built directly into the email campaign template.
Hiding or showing email campaign elements
You can configure to hide or show a particular element of an email template according to the values in the product catalogue. For example by using a custom variable you can show or hide a price element if it is smaller than the msrp.
1. First, ensure that your email template has product columns with e-editable elements available to store an ESL string.
2. Set up a custom variable to fill for example, the price e-editable with the corresponding value from the product catalogue.
3. Open an email campaign which uses the email template you intend to edit in the Visual Content Editor.
4. In the VCE editor you can search for a specific product in the current product data, and insert the product into a pre-configured block.
Setting up a custom variable to insert an ESL string
1. Set up the email template so that each product column with an e-editable element must be available to store an ESL string:
<!-- <tr><td e-editable="productData1"></td></tr> -->
2. In the Custom Variable tab of the VCE Product Search add-on, create a custom variable to be able to insert the ESL string:
a.) Fill the price e-editable with the corresponding value from the product catalogue:
{{"{% if show_priceB == true %}" ~ product.price|number_format(2, ',', '.') ~ "€ {% endif %}"}}
b.) Add a custom Variable to show or hide the price element:
{% if product.msrp is empty %}
{{'{% set show_priceB = false %}'}}
{% else %}
{{'{% set show_priceB = true %}'}}
{% endif %}
3. In the VCE editor edit the block source: insert the set variable statement and decide on the template level which element should be shown.
Use the show_price variable to show or hide elements.
{% if show_price %}...{% endif %}
These can be built directly into the email campaign template.
Managing missing (NULL) values in product data
When the inserted product has no data for one of the fields mapped with VCE Product Search (e.g.: MSRP field is empty, because of the product is not on sale) then the VCE Editor will use the value set in the template by default, rather than hiding the element. This may cause unexpected results as the template often contains dummy text and values.
To get around this, one can pass an HTML character (such as ​ [zero-width space] or [non-breaking space]) as value for the field which will then essentially appear empty.
There are a few ways this could be implemented, for example:
- Use the default filter to display a fallback value
|default('​') - Use an if / else condition:
{% if product.price is not empty %}
{{ product.price|number_format(...)}}
{% else %}
​
{% endif %}- Use the ternary operator:
{{ product.price is not empty ? product.price : '​' }}