//var tempbox = '<a href="@@@@"><div class="relatedProductArea" align="center"> <a href="#l"> <img src="@"></a> <br><div class="itemProductTitle"> @@@ </div><div><p class="itemProductPrice">@@ </p><p class="itemProductTax">s DPH</p></div></div></a>';
var tempbox =
'<div class="relatedProductArea" align="center">' +
    '<a href="{LINK}">' +
        '<img src="{IMAGE}" alt="{NAME}" title="{NAME}" loading="lazy">' +
        '<br>' +
        '<div class="itemProductTitle">{NAME}</div>' +
        '<div>' +
            '<p class="itemProductPrice">{PRICE}</p>' +
            '<p class="itemProductTax">s DPH</p>' +
        '</div>' +
    '</a>' +
'</div>';


var relatedProducts = null ;relatedProducts = relatedProducts.items.filter(elm => elm.visibility == 4 && elm.sku !="30011530").slice(0,4) ;
if(document.querySelector("#relatedProductContainer")){
document.querySelector("#relatedProductContainer").innerHTML = "";
for(var i = 0 ;  i < relatedProducts.length; i++){
//var price = (Math.round(relatedProducts[i].price*121/100*10)/10).toFixed(2)+"&nbsp;Kč"; //@
var price = (Math.round(relatedProducts[i].price*121/100*10)/10).toLocaleString("cs-CZ", {style:"currency", currency:"CZK"}); //@
var image = "/media/catalog/product"+relatedProducts[i].custom_attributes.find(elm => elm.attribute_code == "image").value; //@@
var name = relatedProducts[i].name; //@@@ 
var link = "/"+relatedProducts[i].custom_attributes.find(elm => elm.attribute_code == "url_key").value+".html"; //@@@@ 
//document.querySelector("#relatedProductContainer").innerHTML +=  tempbox.replace("@@@",name).replace("@@",price).replace("@",image);

var html = tempbox;

html = html.replace(/{LINK}/g, link);
html = html.replace(/{IMAGE}/g, image);
html = html.replace(/{NAME}/g, name);
html = html.replace(/{PRICE}/g, price);

document.querySelector("#relatedProductContainer").innerHTML += html;
}
}