Code examples for client-side template implementations
JavaScript Dynamic Yield server-side integration example
import Mustache from "mustache";
Mustache.tags = ["${", "}"];
const host = "https://api-templates-dev.dynamicyield.com";
const CHOICE_TYPES = {
RECS_DECISION: "RECS_DECISION",
DECISION: "DECISION"
};
const fetchApiTemplate = async (token, extension) => {
const sectionId = DY.section;
const url = `${host}/${sectionId}/${token}.${extension}.template`;
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return await response.text();
} catch (error) {
console.error("Error in fetchApiTemplate:", error);
throw error;
}
};
const render = (template, data) => {
try {
return Mustache.render(template, data);
} catch (err) {
return template;
}
};
const getTemplateProductData = (slot, templateProductData) => {
const { productData, sku } = slot;
const result = {
slotId: slot.slotId
};
for (const variableName in templateProductData) {
const productFieldName = templateProductData[variableName];
result[variableName] = productFieldName === "sku" ? sku : productData[productFieldName];
}
return result;
};
const transformDataByType = (choice, variation) => {
if (choice.type !== CHOICE_TYPES.RECS_DECISION) {
return {
...variation.payload.data
};
}
const { custom, slots } = variation.payload.data;
return {
...custom,
decisionId: choice.decisionId,
Recommendation: slots.map(slot => getTemplateProductData(slot, custom.TemplateProductData))
};
};
const handleVariation = async (choice, variation) => {
if (!variation.template) {
return null;
}
const { template: { files, token } } = variation;
const transformedData = transformDataByType(choice, variation);
const contents = {};
const extensions = ["html", "js", "css"];
for (const extension of extensions) {
if (files[extension]) {
const template = await fetchApiTemplate(token, extension);
contents[extension] = render(template, transformedData);
}
}
return {
contents,
data: transformedData
};
};
export const handleChoices = async (choices) => {
return await Promise.all(choices.map(async choice => {
return {
id: choice.id,
name: choice.name,
template: choice.variations.length > 0 ? await handleVariation(choice, choice.variations[0]) : null
};
}));
};
JavaScript site server example
This is a very basic web server example
const http = require('http');
const templates = handleChoices(choices);
const templatesContent = templates
.map(template => {
if (!template) return ''; // Skip if template is null or undefined
return `
${template.css ? `<style>${template.css}</style>` : ''}
${template.html || ''}
${template.js ? `<script>${template.js}</script>` : ''}
`;
})
.filter(content => content.trim() !== '') // Remove any empty strings
.join('');
const server = http.createServer((req, res) => {
res.writeHead(200, {'Content-Type': 'text/html'});
res.end(`
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Server-side Rendering Example</title>
</head>
<body>
${templatesContent}
</body>
</html>
`);
});
const PORT = 3000;
server.listen(PORT, () => {
console.log(`Server running at http://localhost:${PORT}/`);
});
Template in the Experience OS editor
Response example
{
"id":785442,
"name":"Rcom2",
"type":"RECS_DECISION",
"variations":[
{
"id":29204277,
"payload":{
"data":{
"custom":{
"dyVariationId":"29204277",
"Title":"",
"TemplateProductData":{
"Url":"url",
"Image_url":"image_url",
"Currency Icon":"dy_display_price",
"price":"price",
"Name":"name"
}
},
"slots":[
{
"sku":"119",
"productData":{
"group_id":"119",
"categories":[
"Cats",
"Toys"
],
"keywords":[
],
"in_stock":true,
"publish_time":"2024-07-21T10:27:13",
"name":"Cat Scratch Tower (Midi)",
"description":"Simple, effective and portable. Let your cat keep its claws in a scratch-tastis shape.",
"url":"/product/119",
"image_url":"http://cdn.dynamicyield.com/petshop/images/Group 119.png",
"price":0,
"dy_display_price":"0"
},
"slotId":"mIOobG9jYXRpb27ZUmh0dHBzOi8vZ3ZkeXRlc3RpbmcudHVtYmxyLmNvbS8/JmR5QXBpUHJldmlldz04MWI3NzlkMy1jZjkyLTQ0NjAtYTk1Zi1iOTE1YWRlY2YwYTCkdHlwZahIT01FUEFHRaRkYXRhkM3BPc4AA18BwgCjMTE5CQA=*nLM4NjYxMzYzNDA0OTk1OTY4MTMxzgAcfi+oMTM1NDA3MTYBkJHOAb2fNaU3MzYxNcDAtC01ODYzMjM2MDI5MTk3MzEyMjk5wMA="
},
{
"sku":"120",
"productData":{
"group_id":"120",
"categories":[
"Cats",
"Toys"
],
"keywords":[
],
"in_stock":true,
"publish_time":"2024-07-21T10:27:13",
"name":"Extreme Cat Distractor",
"description":"Your cat has seen it all, and for everything you throw at him you're only rewarded with a sleepy yawn? Well, try this!",
"url":"/product/120",
"image_url":"http://cdn.dynamicyield.com/petshop/images/Group 120.png",
"price":15,
"dy_display_price":"15"
},
"slotId":"mIOobG9jYXRpb27ZUmh0dHBzOi8vZ3ZkeXRlc3RpbmcudHVtYmxyLmNvbS8/JmR5QXBpUHJldmlldz04MWI3NzlkMy1jZjkyLTQ0NjAtYTk1Zi1iOTE1YWRlY2YwYTCkdHlwZahIT01FUEFHRaRkYXRhkM3BPc4AA18BwgGjMTIwCQE=*nLM4NjYxMzYzNDA0OTk1OTY4MTMxzgAcfi+oMTM1NDA3MTYBkJHOAb2fNaU3MzYxNcDAtC01ODYzMjM2MDI5MTk3MzEyMjk5wMA="
},
{
"sku":"122",
"productData":{
"group_id":"122",
"categories":[
"Cats",
"Travel"
],
"keywords":[
],
"in_stock":true,
"publish_time":"2024-07-21T10:27:13",
"name":"Atheletic Performance MAX Cat Collar",
"description":"For cats who love jogging with their humans, with patented Catdex(R) V3 synthetic fabric.",
"url":"/product/122",
"image_url":"http://cdn.dynamicyield.com/petshop/images/Group 122.png",
"price":39,
"dy_display_price":"39"
},
"slotId":"mIOobG9jYXRpb27ZUmh0dHBzOi8vZ3ZkeXRlc3RpbmcudHVtYmxyLmNvbS8/JmR5QXBpUHJldmlldz04MWI3NzlkMy1jZjkyLTQ0NjAtYTk1Zi1iOTE1YWRlY2YwYTCkdHlwZahIT01FUEFHRaRkYXRhkM3BPc4AA18BwgKjMTIyCQI=*nLM4NjYxMzYzNDA0OTk1OTY4MTMxzgAcfi+oMTM1NDA3MTYBkJHOAb2fNaU3MzYxNcDAtC01ODYzMjM2MDI5MTk3MzEyMjk5wMA="
}
]
},
"type":"RECS"
},
"template":{
"token":"0279be6c42caefabc84f463654b03342",
"files":{
"html":true,
"css":false,
"js":false
}
}
}
],
"groups":[
"rcomGroup"
],
"decisionId":"nLMxNjg0MjQ3OTkxOTgyMTY0NDA3zgAW4T+oMTIyNTMwNDYBkJHOAaqJZKU1NzM4OcDZIGU3N2FjYmM2MjVjNWQ4MWQ5NWIxMmIxNzY3YTU3MzIzszEwNjY0NTM4ODI3MjQ0NjE2MTDAwA=="
}
Data object created from the sample response
{
"dyVariationId":"29204277",
"Title":"",
"decisionId":"nLMxNjg0MjQ3OTkxOTgyMTY0NDA3zgAW4T+oMTIyNTMwNDYBkJHOAaqJZKU1NzM4OcDZIGU3N2FjYmM2MjVjNWQ4MWQ5NWIxMmIxNzY3YTU3MzIzszEwNjY0NTM4ODI3MjQ0NjE2MTDAwA==",
"Recommendation":[
{
"Url":"/product/119",
"Image_url":"http://cdn.dynamicyield.com/petshop/images/Group 119.png",
"Currency Icon":"0",
"price":0,
"Name":"Cat Scratch Tower (Midi)"
},
{
"Url":"/product/120",
"Image_url":"http://cdn.dynamicyield.com/petshop/images/Group 120.png",
"Currency Icon":"15",
"price":15,
"Name":"Extreme Cat Distractor"
},
{
"Url":"/product/122",
"Image_url":"http://cdn.dynamicyield.com/petshop/images/Group 122.png",
"Currency Icon":"39",
"price":39,
"Name":"Atheletic Performance MAX Cat Collar"
}
]
}
Updated 6 days ago