Image based product recommendations can be inserted into an HTML template.
In the HTML code, this works similarly to the product selector. The main difference is that you can’t loop over the products as they are not known until the image is sent to a contact.
Before you begin
You need to include the attribute om:editable with the value product-recs.
As with other editable attributes, this will also require an om:id attribute.
Editing product recommendations
Enter the content you want to render in the HTML tag.
Example using a loop to display three images:
<div om:id="prod-recs-recent" om:editable="product-recs">
{% if recs.baseClickUrl and recs.baseImageUrl %}
{% for x in range(3) %}
<a href="{{recs.baseClickUrl}}&slot={{x+1}}&email={{ profile.email | urlencode }}&cachebuster={{ email.campaign_identifier | urlencode }}" target="_blank">
<img src="{{recs.baseImageUrl}}&slot={{x+1}}&size=120x180&email={{ profile.email | urlencode }}&cachebuster={{ email.campaign_identifier | urlencode }}">
</a>
{% endfor %}
{% else %}
<p>Recommendations not yet configured</p>
{% endif %}
</div>
recs is an object that contains the configuration for the recommendations.
The following properties are provided:
| Property | Description |
| instance | The ID of the product recommendations instance. |
| accountHash | The public identifier for the account. |
| showPrice | Indicates if the recommendation image should display the price of the product. |
| baseClickUrl |
The base URL for the link. You can override parameters by appending them. |
| baseImageUrl |
The base URL for the image. You can override parameters by appending them. |
| baseProductInfoUrl |
The base URL for an image containing the product title and price. You can override parameters by appending them. |
The following query string parameters are supported:
|
Query string parameter |
Description |
|
tc |
Hexadecimal text colour without leading # or 0x. |
|
pc |
Hexadecimal price colour without leading # or 0x. |
|
font |
One of the following:
|
|
size |
Image size in pixels, e.g. 150x200. |
|
ts |
Text size in pixels. The maximum size is 20px - do not specify unit. |
|
ps |
Price size in pixelsThe maximum size is 20px - do not specify unit. |
|
bgcolor |
Hexidecimal background colour without leading #. |
Comments
0 comments
Article is closed for comments.