{"id":13255,"date":"2024-03-20T15:41:07","date_gmt":"2024-03-20T14:41:07","guid":{"rendered":"https:\/\/helpcenter.blendee.com\/article\/how-to-create-a-custom-template\/"},"modified":"2024-03-20T15:41:09","modified_gmt":"2024-03-20T14:41:09","slug":"how-to-create-a-custom-template","status":"publish","type":"article","link":"https:\/\/helpcenter.streamwise.it\/en\/article\/how-to-create-a-custom-template\/","title":{"rendered":"How to create a custom template"},"content":{"rendered":"\n

Blendee allows, in addition to the default templates, to create custom templates for both Recommendations<\/strong> and Behavioural messages.<\/strong><\/p>\n\n

Let’s see point by point how to do it:<\/p>\n\n

The first step is to go to the Settings->Template Management section, choose the type of web personalization for which we want to create the template: whether behavioral message, recommendations, email or widget.<\/p>\n\n

<\/p>\n\n

\"\"<\/a><\/figure>\n\n

In this case, let’s take the example with a behavioural message, but the procedure is the same for the other elements as well.<\/p>\n\n

\"\"<\/a><\/figure>\n\n

Clicking on Template for Behavioural Message opens a page where there are three tabs containing the templates:<\/p>\n\n

General<\/strong>: i.e. the default ones that Blendee providesPersonal: <\/strong>these are those customized by the user,Archived: <\/strong>this is the section where we can archive unused templates.<\/p>\n\n

\"\"<\/a><\/figure>\n\n

Next we are going to clone the template we want to use as the basis for our customizations using the clone<\/em> button at the bottom right for each template.By pressing clone, a template configuration wizard opens, where we can set, in the first step, the name of the template and whether or not it should contain product recommendations. It is also possible to set the type of template whether overlay or not, i.e. whether it will appear as an element on a layer placed above our starting page or as an integrated element within those present on the page, thus modifying the structure of the DOM.<\/p>\n\n

\"\"<\/a><\/figure>\n\n

In step 2 we can set the keys that will be interpreted during the insertion phase within the page and that allow us to set variables for the customization of the template, such as colors, sizes and fields.<\/p>\n\n

\"\"<\/a><\/figure>\n\n

In the last step you can insert the HTML and CSS part related to our custom template.<\/p>\n\n

Once the configuration is complete, we will find the custom template in the “\n Personal” section.<\/strong>\n<\/strong><\/p>\n\n

To edit the template you just created, simply go to the Personals tab and click on “Edit” to return to the configuration section.<\/p>\n\n

Once the template has been created, it will be available in the “Personal<\/strong>” section when creating the behavioral message.<\/p>\n\n

With Blendee<\/strong> it is possible to insert recommended products<\/strong> both in Behavioral Messages<\/strong> and in Recommendation<\/strong>, in fact, by cloning a template it is possible to modify the code in order to customize it in the best possible way.<\/p>\n\n

Let’s see how you can add the code base to be able to insert recommended products anywhere.<\/p>\n\n

foreach.{{products}}\n\n..inserire il proprio codice html da ripetere per ogni elemento, ad esempio:\n\n <div class=\"ADB_IDRCTX_PLACEHOLDER_price_product ADB_hidden_##ADB_sc_card_price_bool##\">\n                    <div class=\"ADB_IDRCTX_PLACEHOLDER_price_original_product\">\n                        <span class=\"ADB_IDRCTX_PLACEHOLDER_amount\">{{products}}.{{priceOriginal}}<\/span>\n                        <span class=\"ADB_IDRCTX_PLACEHOLDER_currency\">{{products}}.{{currencySymbol}}<\/span>\n                    <\/div>\n                    <div class=\"ADB_IDRCTX_PLACEHOLDER_price_discount_product\">\n                        <span class=\"ADB_IDRCTX_PLACEHOLDER_amount\">{{products}}.{{priceDiscounted}}<\/span>\n                        <span class=\"ADB_IDRCTX_PLACEHOLDER_currency\">{{products}}.{{currencySymbol}}<\/span>\n                    <\/div>\n                <\/div>\n...\n\nendforeach<\/pre>\n\n
The code we see above is used to repeat the HTML structure inserted for each product shown, extracted from the algorithm.<\/p>\n\n
Access to the values related to the recommended product is possible thanks to the use of the keys:<\/p>\n\n
{{products}}. {{nomecampo}}<\/strong><\/p>\n\n
As we can see from the code above, it is also possible to change the name of the classes in real time through the use of the keys created during the customization of the template (e.g.: ##ADB_sc_card_price_bool##<\/em> in the code above which will take on the value true\/false depending on the value selected in the side menu visible below)<\/p>\n\n
\"\"<\/a><\/figure>\n\n
The keys that can be used for the products are:<\/p>\n\n
{{products}}.{{image}}:<\/strong> Product image URL<\/p>\n\n
{{products}}.{{priceOriginal}}:<\/strong> Original price of the Product<\/p>\n\n
{{products}}.{{priceDiscounted}}:<\/strong> Final price of the Product<\/p>\n\n
{{products}}.{{priceDelivery}}:<\/strong> Shipping price<\/p>\n\n
{{products}}.{{name}}:<\/strong> Product Title<\/p>\n\n
{{products}}.{{descriptionShort}}:<\/strong> Short Description of the Product<\/p>\n\n
{{products}}.{{discount}}:<\/strong> Percentage of discount on the Product<\/p>\n\n
{{products}}.{{shopLink}}:<\/strong> Link to the product<\/p>\n\n
{{products}}.{{currencySymbol}}:<\/strong> Currency symbol<\/p>\n\n
{{products}}.{{sku}}:<\/strong> Product SKU<\/p>\n\n
{{products}}.{{idExt}}:<\/strong> Product ID<\/p>\n\n
{{products}}.{{brand}}:<\/strong> Brand of the product<\/p>\n\n
{{products}}.{{model}}:<\/strong> Product model<\/p>\n\n
{{products}}.{{availableQuantity}}:<\/strong> Available quantity of the product<\/p>\n\n
{{products}}.{{insertionDate}}:<\/strong> Membership category IDs separated by space<\/p>\n\n
{{products}}.{{categoryIds}}:<\/strong> Id of the categories associated with the product separated by commas.<\/p>\n
\n
Was this content useful?<\/strong><\/div><\/p>\n
Thanks for contributing!<\/p>\n
\nYes<\/a>\nNo<\/a>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Blendee allows, in addition to the default templates, to create custom templates for both Recommendations and Behavioural messages. Let’s see point by point how to do it: The first step is to go to the Settings->Template Management section, choose the type of web personalization for which we want to create the template: whether behavioral message, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"menu_order":0,"template":"","format":"standard","article-category":[563],"article-tag":[639,589,170,190],"class_list":["post-13255","article","type-article","status-publish","format-standard","hentry","article-category-template-en","article-tag-behavioral-message-en","article-tag-personalization","article-tag-recommendation-en","article-tag-template-en"],"_links":{"self":[{"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article\/13255"}],"collection":[{"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":3,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article\/13255\/revisions"}],"predecessor-version":[{"id":13258,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article\/13255\/revisions\/13258"}],"wp:attachment":[{"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/media?parent=13255"}],"wp:term":[{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article-category?post=13255"},{"taxonomy":"article-tag","embeddable":true,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article-tag?post=13255"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}