001. Catálogo em Lista - Formato Imobiliária
Visual de todas as páginas do catálogo de produtos em formato de lista - Ideal para imobiliárias
INICIAL:
<?php
$home = '<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="pt">
<head>'.$mainData['configHead'].'<meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1" /><meta charset="UTF-8">' ;
//favicon$home .= '<link rel="icon" href="">';
//SEO$home .= '<title>Catálogo de Produtos de '.$mainData['siteName'].'</title>
<meta name="description" content="Veja o catálogo de produtos completo de '.$mainData['siteName'].' e encontre as melhores ofertas. Estamos a total disposição para atendê-los">
<link rel="canonical" href="'.$mainData['configPath'].'">
<meta name="keywords" content=""><meta name="author" content="'.$mainData['siteName'].'">
<meta name="geo.position" content=""><meta name="ICBM" content="">
<meta name="geo.placename" content=""><meta name="geo.region" content="">
<meta name="robots" content="index,follow"><meta name="rating" content="General"><meta name="revisit-after" content="7 days"><base href="'.$mainData['configPath'].'"><meta property="og:region" content="Brazil"><meta property="og:title" content="Catálogo de Produtos de '.$mainData['siteName'].'"><meta property="og:type" content="article"><meta property="og:image" content=""><meta property="og:url" content="'.$mainData['configPath'].'"><meta property="og:description" content="Veja o catálogo de produtos completo de '.$mainData['siteName'].' e encontre as melhores ofertas. Estamos a total disposição para atendê-los"><meta property="og:site_name" content="'.$mainData['siteName'].'">
<meta property="twitter:description" content="Veja o catálogo de produtos completo de '.$mainData['siteName'].' e encontre as melhores ofertas. Estamos a total disposição para atendê-los"><meta property="twitter:card" content="summary_large_image"><meta property="twitter:title" content="Catálogo de Produtos de '.$mainData['siteName'].'"><meta property="twitter:image" content=""><script data-schema="Organization" type="application/ld+json">{ "@type":"Organization", "@context":"http://schema.org", "name": "'.$mainData['siteName'].'", "url": "http://'.$mainData['siteDomain'].'", "logo": { "@type": "ImageObject", "url": "", "width": "300", "height": "300" }}</script>
<script type="application/ld+json">{ "@context": "https://schema.org", "@type": "Store", "address": { "@type": "PostalAddress", "addressLocality": "", "addressRegion": "", "postalCode": "", "streetAddress": "" }, "name": "", "openingHours": [ "Mon-Fri 08:00-18:00", "" ], "priceRange": "$", "telephone": "", "url": "'.$mainData['siteName'].'", "image" : ""}</script>';
//custom css
$home .= '
<!-- Bootstrap -->
'.getBlockData(5170).'
<!-- Global CSS -->
'.getBlockData(5171).'
<!-- Nav CSS -->
'.getBlockData(5172).'
<!-- GTM Head -->
'.getBlockData(5167).'';
// STYLE FOR CATEGORIES NAVBAR
$home .='
<style> /*DEFAULT MENU*/
#catalogToggleButton { display: none; }
#categoriesNavBar { background-color: #163d4f; box-shadow: 0px 10px 10px rgb(0 0 0 / 15%); }
#categoriesNavBar .menuItemQtd { display: none; }
#categoriesNavBar .menu { display: flex; align-items: center; width: 100%; justify-content: flex-start; margin-block: 0px; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; }
#categoriesNavBar .menuList { list-style: none; display: flex; margin: 0px; }
#categoriesNavBar .menuItem a { text-decoration: none; color: #fff; font-size: 14px; transition: 0.3s ease; display: block; height: 100%; padding: 15px; } #categoriesNavBar .menuItem a:hover { color: #fff; background-color: #07212b; }
@media (min-width: 576px) { #categoriesNavBar .menu { max-width: 540px; } } @media (min-width: 768px) { #categoriesNavBar .menu { max-width: 720px; } } @media (min-width: 992px) { #categoriesNavBar .menu { max-width: 960px; } } @media (min-width: 1200px) { #categoriesNavBar .menu { max-width: 1140px; } } @media (min-width: 1400px) { #categoriesNavBar .menu { max-width: 1320px; } } @media (max-width: 992px) {
/* Scroll Navbar */
#categoriesNavBar .menu { white-space: nowrap; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; scroll-snap-type: x mandatory; overflow-x: scroll; }
/* Width */
#categoriesNavBar .menu::-webkit-scrollbar { width: 3px; height: 3px; }
/* Track */
#categoriesNavBar .menu::-webkit-scrollbar-track { background: #f1f1f1; }
/* Handle */
#categoriesNavBar .menu::-webkit-scrollbar-thumb { background: #888; }
/* Handle on hover */
#categoriesNavBar .menu::-webkit-scrollbar-thumb:hover { background: #555; }
}
</style>';
// STYLE FOR BANNER SLIDER
$home .= '<style>@keyframes tonext { 75% { left: 0; }
95% { left: 100%; }
98% { left: 100%; }
99% { left: 0; }}
@keyframes snap { 96% { scroll-snap-align: center; }
97% { scroll-snap-align: none; }
99% { scroll-snap-align: none; }
100% { scroll-snap-align: center; }}
/* AUTOPLAY CONFIGURATION - CHANGE LEFT ATTRIBUTE BASED IN SLIDER QUANTITY */
@keyframes tostart { 75% { left: 0; }
95% { left: -300%; }
98% { left: -300%; }
99% { left: 0; }}
.sectionBanner.iCarouselModel01 { height: 450px; position: relative;}
.sectionBanner.iCarouselModel01 ol,li { list-style: none; margin: 0; padding: 0;}
.sectionBanner.iCarouselModel01 .carouselViewport { position: absolute; height: 100%; top: 0; right: 0; bottom: 0; left: 0; display: flex; overflow-x: scroll; counter-reset: item; scroll-behavior: smooth; scroll-snap-type: x mandatory;}
.sectionBanner.iCarouselModel01 .carouselSlide { position: relative; flex: 0 0 100%; width: 100%; counter-increment: item;}
.sectionBanner.iCarouselModel01 .carouselSnapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; scroll-snap-align: center; z-index: -1;}
/* ARROWS CSS */
.sectionBanner.iCarouselModel01 .carouselPrev,.sectionBanner.iCarouselModel01 .carouselNext { position: absolute; top: 0; bottom: 0; margin: auto; width: 2rem; height: 2rem; border-radius: 50%; font-size: 0; outline: 0; z-index: 5;}
.sectionBanner.iCarouselModel01.carousel::before,.sectionBanner.iCarouselModel01 .carouselPrev { left: 0.3rem;}
.sectionBanner.iCarouselModel01.carousel::after,.sectionBanner.iCarouselModel01 .carouselNext { right: 0.3rem;}
.sectionBanner.iCarouselModel01.carousel::before,.sectionBanner.iCarouselModel01.carousel::after { content: ""; z-index: 1; background-repeat: no-repeat; background-position: center center; color: #fff; line-height: 4rem; text-align: center; pointer-events: none; background-size: 6px; box-shadow: 5px 5px 9px rgb(0 0 0 / 12%);}
.sectionBanner.iCarouselModel01.carousel::before { background-image: url("https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/Icon awesome-angle-left.svg"); position: absolute; top: 0; bottom: 0; margin: auto; width: 20px; height: 20px; border-radius: 50%; font-size: 0; outline: 0; background-color: #fff;}
.sectionBanner.iCarouselModel01.carousel::after { background-image: url("https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/Icon awesome-angle-right.svg"); position: absolute; top: 0; bottom: 0; margin: auto; width: 20px; height: 20px; border-radius: 50%; font-size: 0; outline: 0; background-color: #fff;}
/* SCROLL BAR CSS */
.sectionBanner.iCarouselModel01 .carouselViewport::-webkit-scrollbar { width: 0px; height: 0px;}
/* REMOVE COMMENT TO EDIT SCROLL BAR */
/*.sectionBanner.iCarouselModel01 .carouselViewport::-webkit-scrollbar-track { background: #f1f1f1; }
.sectionBanner.iCarouselModel01 .carouselViewport::-webkit-scrollbar-thumb { background: #888; }
.sectionBanner.iCarouselModel01 .carouselViewport::-webkit-scrollbar-thumb:hover { background: #555; }*/
/* AUTOPLAY CSS */
.sectionBanner.iCarouselModel01 .carouselViewport[data-icarousel="autoplay"] .carouselSnapper { animation-name: tonext, snap; animation-timing-function: ease; animation-duration: 6s; animation-iteration-count: infinite;}
.sectionBanner.iCarouselModel01 .carouselViewport[data-icarousel="autoplay"] .carouselSlide:last-child .carouselSnapper { animation-name: tostart, snap;}
.sectionBanner.iCarouselModel01.carousel:hover .carouselViewport[data-icarousel="autoplay"] .carouselSnapper,.sectionBanner.iCarouselModel01.carousel:focus-within .carouselViewport[data-icarousel="autoplay"] .carouselSnapper { animation-name: none;}
/* IMAGE CONTENT CSS */
.sectionBanner.iCarouselModel01 .carouselSlide img { width: 100%; height: 100%; object-fit: cover; object-position: left; position: absolute; z-index: -1;}
.sectionBanner.iCarouselModel01 .carouselSlide .sliderLink { display: block; width: 100%; height: 100%;}
/* SLIDER MOBILE CSS */
@media (max-width: 992px) { .sectionBanner.iCarouselModel01 { height: 200px; }
}</style>';
// STYLE FOR CARDS
$home .='<style>
/* CSS Cartões Categorias */
.iCategoriesModel01 h1 { font-size: 25px; margin-top: 0px;}
.iCategoriesModel01 img { width: 100%; height: 100%; object-fit: cover; position: absolute; transition: all 0.3s ease-in-out;}
.iCategoriesModel01 a:hover img { transform: scale(1.05);}
.iCategoriesModel01 .cardBox { position: relative; height: 250px; box-shadow: 10px 10px 30px #00000020; border-radius: 5px; overflow: hidden;}
.iCategoriesModel01 .cardBox h1 { position: absolute; font-weight: 600; bottom: 0; padding: 15px; margin: 0px; color: #fff; z-index: 1;}
.iCategoriesModel01 .cardBox:before { content: ""; display: block; position: absolute; width: 100%; height: 100%; z-index: 1; background: rgb(0,0,0); background: -moz-linear-gradient(0deg, rgba(0,0,0,0.7010154403558299) 0%, rgba(255,255,255,0) 100%); background: -webkit-linear-gradient(0deg, rgba(0,0,0,0.7010154403558299) 0%, rgba(255,255,255,0) 100%); background: linear-gradient(0deg, rgba(0,0,0,0.7010154403558299) 0%, rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#ffffff",GradientType=1);}
</style>';
// STYLE FOR CATALOG IN LIST
$home .= '<style>
/* CSS Cartões M1 Lista */
.iCardModel01 h1 { font-size: 25px; margin-top: 0px;}
.iCardModel01 .cardRealState { border-radius: 10px; box-shadow: 5px 5px 35px rgb(0 0 0 / 10%); background-color: #fff;}
.iCardModel01 .cardRealState a { color: #1e1e1e; display: flex; gap: 10px; align-items: center;}
.iCardModel01 .cardRealState .cardRealStateDsc { padding: 20px; position: relative; padding-bottom: 15px;}
.iCardModel01 .cardRealState .cardRealStateImage { overflow: hidden; height: 260px; width: 260px;}
.iCardModel01 .cardRealState .cardRealStateImage img { object-fit: cover; object-position: center; width: 100%; height: inherit; border-radius: 10px 0px 0px 10px;}
.iCardModel01 .cardRealState .cardRealStateDsc p { margin-block: 10px; color: #000;}
.iCardModel01 .cardRealState .cardRealStateDsc p.realStateLocal { font-size: 15px; color: #999;}
.iCardModel01 .cardRealState .cardRealStateDsc .realStateComplement { font-weight: bold; color: #333; font-size: 16px;}
.iCardModel01 .cardRealState .cardRealStateDsc .realStateLocation { font-weight: bold; background-color: #163d4f; max-width: 90px; text-align: center; padding: 5px; border-radius: 4px; color: #fff; font-size: 14px;}
.iCardModel01 .cardRealState .realStateId { color: #444; font-size: 14px; font-weight: bold;}
.iCardModel01 .cardRealState .realStatePrice { font-size: 24px; font-weight: bold;}
.iCardModel01 .cardRealState .cardRealStateDsc ul li { text-align: center; font-size: 14px; margin-inline: 10px; display: flex; gap: 8px; align-items: center; color: #888;}
.iCardModel01 .cardRealState .cardRealStateDsc ul { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px;}
.iCardModel01 .cardRealState .cardRealStateDsc ul li img { filter: brightness(0) invert(0.6);}
.iCardModel01 .realStateCity { font-weight: bold;}
@media (max-width: 992px) { .iCardModel01 .row { grid-gap: 5px; }
.iCardModel01 .cardRealState .cardRealStateDsc p { font-size: 14px; margin-block: 6px; } .iCardModel01 .cardRealState .realStatePrice { font-size: 16px; } .iCardModel01 .cardRealState .cardRealStateDsc { padding: 10px; padding-bottom: 10px; } .iCardModel01 .cardRealState .cardRealStateDsc ul li { margin-inline: 0px; gap: 5px; } .iCardModel01 .cardRealState .cardRealStateImage { height: 200px; width: 100%; position: relative; }
.iCardModel01 .cardRealState .realStateId { font-size: 12px; } .iCardModel01 .cardRealState .cardRealStateImage img { object-fit: cover; object-position: center; width: 100%; height: 100%; border-radius: 0px; position: absolute; }}
@media (max-width: 992px) and (min-width: 552px) { .iCardModel01 .cardRealState { border-bottom: solid 1px #eee; border-radius: 0px; padding-bottom: 10px; margin-bottom: 5px; background-color: transparent; box-shadow: none; }}
@media (max-width: 552px) { .iCardModel01 .cardRealState .cardRealStateImage img { object-fit: cover; object-position: center; width: 100%; height: inherit; border-radius: 10px 10px 0px 0px; } .iCardModel01 .cardRealState a { color: #1e1e1e; display: flex; gap: 10px; align-items: center; flex-direction: column; } .iCardModel01 .cardRealState { margin-top: 15px; min-height: 450px; }}</style>
</head>
<body>
<!-- GTM Body -->
'.getBlockData(5168).'';
$home .= '
<main>
'.getBlockData(5173).'
<div id="categoriesNavBar">
</div>
<section class="carousel sectionBanner iCarouselModel01"> <ol class="carouselViewport" data-icarousel="autoplay"> <li id="carouselSlide1" tabindex="0" class="carouselSlide active"> <a href="#1" class="sliderLink" title="Link Imagem"> <img src="https://cdn.interago.com.br/img/jpg/w_0_q_8/104/mc//Design Teste" alt="Imagem de fundo Eco Webdesign" /> </a> <div class="carouselSnapper"> </div> <a href="#carouselSlide4" class="carouselPrev">Voltar para o item anterior</a> <a href="#carouselSlide2" class="carouselNext">Ir para o próximo item</a> </li> <li id="carouselSlide2" tabindex="0" class="carouselSlide"> <a href="#2" class="sliderLink" title="Link Imagem"> <img src="https://cdn.interago.com.br/img/jpg/w_0_q_8/104/mc//Design Teste" alt="Imagem de fundo Eco Webdesign" /> </a> <div class="carouselSnapper"></div> <a href="#carouselSlide1" class="carouselPrev">Voltar para o item anterior</a> <a href="#carouselSlide3" class="carouselNext">Ir para o próximo item</a> </li> <li id="carouselSlide3" tabindex="0" class="carouselSlide"> <a href="#3" class="sliderLink" title="Link Imagem"> <img src="https://cdn.interago.com.br/img/jpg/w_0_q_8/104/mc//Design Teste" alt="Imagem de fundo Eco Webdesign" /> </a> <div class="carouselSnapper"></div> <a href="#carouselSlide2" class="carouselPrev">Voltar para o item anterior</a> <a href="#carouselSlide4" class="carouselNext">Ir para o próximo item</a> </li> <li id="carouselSlide4" tabindex="0" class="carouselSlide"> <a href="#4" class="sliderLink" title="Link Imagem"> <img src="https://cdn.interago.com.br/img/jpg/w_0_q_8/104/mc//Design Teste" alt="Imagem de fundo Eco Webdesign" /> </a> <div class="carouselSnapper"></div> <a href="#carouselSlide3" class="carouselPrev">Voltar para o item anterior</a> <a href="#carouselSlide1" class="carouselNext">Ir para o próximo item</a> </li> </ol> </section> <section class="iCategoriesModel01 py-5">
<div class="container">
<div class="row">
<div class="col-12"> <h1>Navegue por Interesses</h1> </div>
<div class="col-lg-4 col-md-4 col-12">
<a href="#" rel="nofollow noopener noreferrer" title="Acessar categoria MUDAR NOME"> <div class="cardBox"> <img src="https://cdn.interago.com.br/img/jpg/w_0_q_8/104/mc//casas-01" width="550" height="300"/> <h1>Visualizar Casas</h1> </div> </a>
</div>
<div class="col-lg-4 col-md-4 col-12">
<a href="#" rel="nofollow noopener noreferrer" title="Acessar categoria MUDAR NOME"> <div class="cardBox"> <img src="https://cdn.interago.com.br/img/jpg/w_0_q_8/104/mc//apartamentos" width="550" height="300"/> <h1>Visualizar Apartamentos</h1> </div> </a>
</div>
<div class="col-lg-4 col-md-4 col-12">
<a href="#" rel="nofollow noopener noreferrer" title="Acessar categoria MUDAR NOME"> <div class="cardBox"> <img src="https://cdn.interago.com.br/img/jpg/w_0_q_8/104/mc//lotes" width="550" height="300"/> <h1>Visualizar Lotes</h1> </div> </a>
</div>
</div>
</div>
</section>
<section class="iCardModel01 py-5">
<div class="container">
<div class="row"> <div class="col-12"> <h1>Nossos imóveis em destaque</h1> </div>';
$productListData = listCustomProducts($mainData['siteId'], 0, 0, 10, 0, 0, 0, "47,48,49,50,51,52");
foreach($productListData as $k => $v) {
$product = json_decode($v, true); $productImg = ''; $productPrice = ''; $product['img'] == '' ? $productImg = 'https://cdn.interago.com.br/img/png/w_0_q_8/1/mc/cdn//productGeneric' : $productImg = $product['img'];
$productImg = str_replace('w_0_', 'w_380_', $productImg);
$product['price'] == '0.00' ? $productPrice = '' : $productPrice = $product['price'];
// Bring product additional information - lines 851 ~ 971
$filterKey = "47"; /* Quartos */
if(array_key_exists($filterKey, $product)) {
if($product[$filterKey]["filterValue"] != '') {
$qtdQuartos = $product[$filterKey]["filterValue"];
} else {
$qtdQuartos = '';
}
} else {
$qtdQuartos = '';
}
$filterKey = "48"; /* Vagas */
if(array_key_exists($filterKey, $product)) {
if($product[$filterKey]["filterValue"] != '') {
$qtdVagas = $product[$filterKey]["filterValue"];
} else {
$qtdVagas = ''; }
} else {
$qtdVagas = ''; }
$filterKey = "49"; /* Banheiros */
if(array_key_exists($filterKey, $product)) {
if($product[$filterKey]["filterValue"] != '') {
$qtdBanheiros = $product[$filterKey]["filterValue"];
} else {
$qtdBanheiros = ''; }
} else {
$qtdBanheiros = ''; }
$filterKey = "50"; /* Área M2 */
if(array_key_exists($filterKey, $product)) {
if($product[$filterKey]["filterValue"] != '') {
$areaM2 = $product[$filterKey]["filterValue"];
} else {
$areaM2 = ''; }
} else {
$areaM2 = ''; }
$filterKey = "51"; /* Comprar ou Alugar */
if(array_key_exists($filterKey, $product)) {
if($product[$filterKey]["filterValue"] != '') {
$buyOrSell = $product[$filterKey]["filterValue"];
} else {
$buyOrSell = ''; }
} else {
$buyOrSell = ''; }
$filterKey = "52"; /* Localização */
if(array_key_exists($filterKey, $product)) {
if($product[$filterKey]["filterValue"] != '') {
$local = $product[$filterKey]["filterValue"];
} else {
$local = ''; }
} else {
$local = ''; }
$home .= '
<div class="col-12">
<div class="cardRealState"> <a href="'.$mainData['configPath'].'/item/'.$product['url'].'" title="Acessar o produto '.$product['title'].'"> <div class="cardRealStateImage"> <img class="imgFluid" src="'.$productImg.'" alt="Imagem do produto '.$product['title'].'"> </div> <div class="cardRealStateDsc"> <span class="realStateId">23955</span>'; if ($buyOrSell != "") { $home .= '<p class="realStateLocation">'.$buyOrSell.'</p>'; }
$home .= '<p><span class="realStateComplement">'.$product['title'].'</p>';
if ($local != "") { $home .= '<p class="realStateLocal">'.$local.'</p>'; }
$home .= '<h2 class="realStatePrice" value="'.$productPrice.'">'.$productPrice.'</h2> <ul>'; if ($qtdQuartos != "") { $home .= '<li class="realStateBedroom"><img src="https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/Icon awesome-bed.svg" width="16" height="16" alt="Ícone Banheiro" /><span>'.$qtdQuartos.'</span> Quartos</li>'; } if ($qtdVagas != "") { $home .= '<li class="realStateGarage"><img src="https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/Icon awesome-car.svg" width="16" height="16" alt="Ícone Vagas" /><span>'.$qtdVagas.'</span> Vagas</li>'; } if ($qtdBanheiros != "") { $home .= '<li class="realStateWashroom"><img src="https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/Icon awesome-bath.svg" width="16" height="16" alt="Ícone Banheiro" /><span>'.$qtdBanheiros.'</span> Banheiro</li>'; } if ($areaM2 != "") { $home .= '<li class="realStateArea"><img src="https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/Icon awesome-ruler-combined.svg" width="16" height="16" alt="Ícone Área" /><span>'.$areaM2.'</span> m²</li>'; } $home .= '</ul> </div> </a> </div> </div>';
}
$home .= '</div>
</div>
</section>
</main>'.getBlockData(5175).'</body>'.$mainData['configBody'].'
'.getBlockData(5174).'
<script>if (navigator.onLine) { var xmlhttp; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
// LOAD MENU WITH NAVBAR - DELETE BELOW IF DONT USE
xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == XMLHttpRequest.DONE ) { if(xmlhttp.status == 200){ let data = xmlhttp.responseText; document.getElementById("categoriesNavBar").innerHTML = data; console.log("menu ok");
} } } let url = "'.$mainData['configPath'].'/menu.html" xmlhttp.open("POST", url, true); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.setTimeout = 6000; //6s xmlhttp.ontimeout = function() { console.log("🚨 tempo esgotado - impossível enviar"); } xmlhttp.send(); } else { console.log("🚨 navegador offline"); }
</script>
<!-- Price Format BRL -->
<script> document.addEventListener("DOMContentLoaded", function() {
var prices = document.querySelectorAll(\'.realStatePrice:not(.no-value)\');
for (var i = 0; i < prices.length; i++) {
var actualPrice = prices[i].innerHTML.replace(\'R$\',\'\');
var f = parseInt(actualPrice).toLocaleString(\'pt-br\',{style: \'currency\', currency: \'BRL\'});
prices[i].innerHTML = f;
}
});
</script>
</html>
';
?>
LISTAS DE PRODUTOS:
<?php
$list = '<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="pt">
<head>'.$mainData['configHead'].'<meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1" /><meta charset="UTF-8">' ;
//favicon$list .= '<link rel="icon" href="">';
//SEO$list .= '<title>'.$categoryData['categoryName'].' em '.$mainData['siteName'].'</title>
<meta name="description" content="'.$categoryData['categoryDescription'].' - '.$mainData['siteName'].'">
<link rel="canonical" href="https://'.$mainData['configPath'].'/cat'.$categoryData['categoryUrl'].'">
<meta name="keywords" content="'.str_replace(' ', ',', $categoryData['categoryName']).'"><meta name="author" content="'.$mainData['siteName'].'">
<meta name="geo.position" content=""><meta name="ICBM" content="">
<meta name="geo.placename" content=""><meta name="geo.region" content="">
<meta name="robots" content="index,follow"><meta name="rating" content="General"><meta name="revisit-after" content="7 days"><base href="'.$mainData['configPath'].'"><meta property="og:region" content="Brazil"><meta property="og:title" content="Catálogo de Produtos de '.$mainData['siteName'].'"><meta property="og:type" content="article"><meta property="og:image" content=""><meta property="og:url" content="'.$mainData['configPath'].'/'.$categoryData['categoryUrl'].'"><meta property="og:description" content="'.$categoryData['categoryDescription'].' - '.$mainData['siteName'].'"><meta property="og:site_name" content="'.$mainData['siteName'].'">
<meta property="twitter:description" content="'.$categoryData['categoryDescription'].' - '.$mainData['siteName'].'"><meta property="twitter:card" content="summary_large_image"><meta property="twitter:title" content="'.$categoryData['categoryName'].' em '.$mainData['siteName'].'"><meta property="twitter:image" content=""><script data-schema="Organization" type="application/ld+json">{ "@type":"Organization", "@context":"http://schema.org", "name": "'.$mainData['siteName'].'", "url": "http://'.$mainData['siteDomain'].'", "logo": { "@type": "ImageObject", "url": "", "width": "300", "height": "300" }}</script>
<script type="application/ld+json">{ "@context": "https://schema.org", "@type": "Store", "address": { "@type": "PostalAddress", "addressLocality": "", "addressRegion": "", "postalCode": "", "streetAddress": "" }, "name": "", "openingHours": [ "Mon-Fri 08:00-18:00", "" ], "priceRange": "$", "telephone": "", "url": "'.$mainData['siteName'].'", "image" : ""}</script>';
//custom css
$list .= '<!-- Bootstrap -->
'.getBlockData(5170).'
<!-- Global CSS -->
'.getBlockData(5171).'
<!-- Nav CSS -->
'.getBlockData(5172).'
<!-- GTM Head -->
'.getBlockData(5167).'';
// STYLE FOR CATEGORIES NAVBAR
$list .='
<style> /*DEFAULT MENU*/
#categoriesNavBar #catalogToggleButton { display: none; }
#categoriesNavBar { background-color: #163d4f; box-shadow: 0px 10px 10px rgb(0 0 0 / 15%); }
#categoriesNavBar .menuItemQtd { display: none; }
#categoriesNavBar .menu { display: flex; align-items: center; width: 100%; justify-content: flex-start; margin-block: 0px; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; }
#categoriesNavBar .menuList { list-style: none; display: flex; margin: 0px; }
#categoriesNavBar .menuItem a { text-decoration: none; color: #fff; font-size: 14px; transition: 0.3s ease; display: block; height: 100%; padding: 15px; } #categoriesNavBar .menuItem a:hover { color: #fff; background-color: #07212b; }
@media (min-width: 576px) { #categoriesNavBar .menu { max-width: 540px; } } @media (min-width: 768px) { #categoriesNavBar .menu { max-width: 720px; } } @media (min-width: 992px) { #categoriesNavBar .menu { max-width: 960px; } } @media (min-width: 1200px) { #categoriesNavBar .menu { max-width: 1140px; } } @media (min-width: 1400px) { #categoriesNavBar .menu { max-width: 1320px; } } @media (max-width: 992px) {
/* Scroll Navbar */
#categoriesNavBar .menu { white-space: nowrap; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; scroll-snap-type: x mandatory; overflow-x: scroll; }
/* Width */
#categoriesNavBar .menu::-webkit-scrollbar { width: 3px; height: 3px; }
/* Track */
#categoriesNavBar .menu::-webkit-scrollbar-track { background: #f1f1f1; }
/* Handle */
#categoriesNavBar .menu::-webkit-scrollbar-thumb { background: #888; }
/* Handle on hover */
#categoriesNavBar .menu::-webkit-scrollbar-thumb:hover { background: #555; }
}
</style>';
// STYLE FOR LATERAL MENU
$list .= '<style>
/* CSS MENU LATERAL */
.iCardModel01 .sideMenu { padding: 15px 15px; border-radius: 5px; background-color: #fff; border: solid 1px #eee; height: 100%;}
.iCardModel01 .sideMenu .menuList { margin: 0px;}
.iCardModel01 .sideMenu .menuList li { border-bottom: solid 1px #eee; padding: 10px 0px;}
.iCardModel01 .sideMenu .menuList li:last-child { border-bottom: none;}
.iCardModel01 .sideMenu .menuList li a { color: #1e1e1e; font-weight: 600;}
.iCardModel01 .sideMenu .menuList li a:hover { color: #0098db;}
.iCardModel01 .sideMenu .menuList li .menuItemQtd { margin-left: 10px; background-color: #163d4f; padding: 0px; width: 18px; height: 18px; line-height: 10px; border-radius: 50px; font-size: 12px; color: #fff; display: inline-flex; align-items: center; justify-content: center;}
.iCardModel01 .menuToogle { display: none;}
@media (max-width: 992px) {
.iCardModel01 .sideMenu { padding: 15px 15px; border-radius: 5px; background-color: #fff; border: solid 1px #eee; height: auto; margin-bottom: 25px; }
.iCardModel01 .menuToogle { display: block; }
.iCardModel01 .sideMenu #catalogMenu { visibility: hidden; opacity: 0; transition: all 0.3s ease-in-out; overflow: hidden; height: 0px; } .iCardModel01 .sideMenu #catalogToggleButton { padding: 10px; background-color: #0071e3; color: #fff; font-weight: 600; border-radius: 5px; cursor: pointer; }}
</style>';
// STYLE FOR CATALOG IN LIST
$list .= '
<style>
/* CSS Cartões M1 Lista */
.iCardModel01 h1, .iCardModel01 h2 { font-size: 25px; margin-top: 0px;}
.iCardModel01 h3 { font-size: 15px; font-weight: 400; padding-bottom: 15px; border-bottom: solid 1px #eee; color: #777;}
.iCardModel01 .cardRealState { border-radius: 10px; box-shadow: 5px 5px 35px rgb(0 0 0 / 10%); background-color: #fff;}
.iCardModel01 .cardRealState a { color: #1e1e1e; display: flex; gap: 10px; align-items: center;}
.iCardModel01 .cardRealState .cardRealStateDsc { padding: 20px; position: relative; padding-bottom: 15px;}
.iCardModel01 .cardRealState .cardRealStateImage { overflow: hidden; height: 260px; width: 260px;}
.iCardModel01 .cardRealState .cardRealStateImage img { object-fit: cover; object-position: center; width: 100%; height: inherit; border-radius: 10px 0px 0px 10px;}
.iCardModel01 .cardRealState .cardRealStateDsc p { margin-block: 10px; color: #000;}
.iCardModel01 .cardRealState .cardRealStateDsc p.realStateLocal { font-size: 15px; color: #999;}
.iCardModel01 .cardRealState .cardRealStateDsc .realStateComplement { font-weight: bold; color: #333; font-size: 16px;}
.iCardModel01 .cardRealState .cardRealStateDsc .realStateLocation { font-weight: bold; background-color: #163d4f; max-width: 90px; text-align: center; padding: 5px; border-radius: 4px; color: #fff; font-size: 14px;}
.iCardModel01 .cardRealState .realStateId { color: #444; font-size: 14px; font-weight: bold;}
.iCardModel01 .cardRealState .realStatePrice { font-size: 24px; font-weight: bold;}
.iCardModel01 .cardRealState .cardRealStateDsc ul li { text-align: center; font-size: 14px; margin-inline: 10px; display: flex; gap: 8px; align-items: center; color: #888;}
.iCardModel01 .cardRealState .cardRealStateDsc ul { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px;}
.iCardModel01 .cardRealState .cardRealStateDsc ul li img { filter: brightness(0) invert(0.6);}
.iCardModel01 .realStateCity { font-weight: bold;}
@media (max-width: 992px) { .iCardModel01 .row { grid-gap: 5px; }
.iCardModel01 .cardRealState .cardRealStateDsc p { font-size: 14px; margin-block: 6px; } .iCardModel01 .cardRealState .realStatePrice { font-size: 16px; } .iCardModel01 .cardRealState .cardRealStateDsc { padding: 10px; padding-bottom: 10px; } .iCardModel01 .cardRealState .cardRealStateDsc ul li { margin-inline: 0px; gap: 5px; } .iCardModel01 .cardRealState .cardRealStateImage { height: 200px; width: 100%; position: relative; }
.iCardModel01 .cardRealState .realStateId { font-size: 12px; } .iCardModel01 .cardRealState .cardRealStateImage img { object-fit: cover; object-position: center; width: 100%; height: 100%; border-radius: 0px; position: absolute; }}
@media (max-width: 1399px) and (min-width: 552px) { .iCardModel01 .cardRealState { border-bottom: solid 1px #eee; border-radius: 0px; padding-bottom: 10px; margin-bottom: 5px; background-color: transparent; box-shadow: none; }}
@media (max-width: 552px) { .iCardModel01 .cardRealState .cardRealStateImage img { object-fit: cover; object-position: center; width: 100%; height: inherit; border-radius: 10px 10px 0px 0px; } .iCardModel01 .cardRealState a { color: #1e1e1e; display: flex; gap: 10px; align-items: center; flex-direction: column; } .iCardModel01 .cardRealState { margin-top: 15px; min-height: 450px; }}</style>';
// STYLE FOR BREADCRUMBS
$list .= '<style> .sectionBreadcrumbs { background-color: #f9f9f9; padding-block: 15px; } .sectionBreadcrumbs .container { display: flex; justify-content: space-between; } .sectionBreadcrumbs .container h1.pageIdentify { font-size: 20px; } .sectionBreadcrumbs .container ol#breadcrumb { display: flex; gap: 10px; list-style: none; padding: 0px; } .sectionBreadcrumbs .container ol#breadcrumb li { display: flex; gap: 10px; } .sectionBreadcrumbs .container ol#breadcrumb li a { color: #000; } .sectionBreadcrumbs .container ol#breadcrumb li a:hover { color: #0098db; } .sectioNBreadcrumbs .container #pageName { text-transform: capitalize; } @media (max-width: 772px) { .sectionBreadcrumbs .container { display: flex; justify-content: space-between; flex-direction: column; flex-wrap: wrap; align-items: center; } }</style>';
$list .='</head>
<body>
<!-- GTM Body -->
'.getBlockData(5168).'';
$list .= '
<main>
<!-- HEADER -->
'.getBlockData(5173).'
<div id="categoriesNavBar">
</div>
<!-- BREADCRUMBS -->
<section class="sectionBreadcrumbs"> <div class="container"> <h1 class="pageIdentify">'.$categoryData['categoryName'].'</h1> <ol id="breadcrumb" vocab="http://schema.org/" typeof="BreadcrumbList"> <li property="itemListElement" id="linkInicial" typeof="ListItem"> <a property="item" id="pageInitialUrl" typeof="WebPage" href=""> <span property="name" id="pageInitialName">Inicial</span></a> / <meta property="position" content="1"> </li> <!--<li property="itemListElement" typeof="ListItem" class="lastItem"> <a property="item" id="pageUrl" typeof="WebPage" href="catalogo/index"> <span property="name" class="active"><span id="pageName">Catálogo<br /></span></span></a> / <meta property="position" content="2"> </li>--> <li property="itemListElement" typeof="ListItem" class="lastItem"> <a property="item" id="pageUrl" typeof="WebPage" href="catalogo/cat'.$categoryData['categoryUrl'].'"> <span property="name" class="active"><strong id="pageName">'.$categoryData['categoryName'].'<br /></strong></span></a> <meta property="position" content="3"> </li> </ol> </div></section>
<section class="iCardModel01 py-5">
<div class="container">
<div class="row">
<div class="col-12 col-md-3"> <div class="sideMenu" id="loadSideMenu"></div> </div>
<div class="col-12 col-md-9">
<div class="row">
<div class="col-12">
<h2>'.$categoryData['categoryName'].'</h2> <h3>'.$categoryData['categoryDescription'].'</h3> </div>';
$productListData = listCustomProducts($mainData['siteId'], $categoryData['categoryId'], 0, 250, 0, 0, 0, "47,48,49,50,51,52");
if($productListData[0] != '{}') {
foreach($productListData as $k => $v) {
$product = json_decode($v, true); $productImg = ''; $productPrice = ''; $product['img'] == '' ? $productImg = 'https://cdn.interago.com.br/img/png/w_0_q_8/1/mc/cdn//productGeneric' : $productImg = $product['img'];
$productImg = str_replace('w_0_', 'w_380_', $productImg);
$product['price'] == '0.00' ? $productPrice = '' : $productPrice = $product['price'];
// Bring product additional information - lines 552 ~ 672
$filterKey = "47"; /* Quartos */
if(array_key_exists($filterKey, $product)) {
if($product[$filterKey]["filterValue"] != '') {
$qtdQuartos = $product[$filterKey]["filterValue"];
} else {
$qtdQuartos = '';
}
} else {
$qtdQuartos = '';
}
$filterKey = "48"; /* Vagas */
if(array_key_exists($filterKey, $product)) {
if($product[$filterKey]["filterValue"] != '') {
$qtdVagas = $product[$filterKey]["filterValue"];
} else {
$qtdVagas = ''; }
} else {
$qtdVagas = ''; }
$filterKey = "49"; /* Banheiros */
if(array_key_exists($filterKey, $product)) {
if($product[$filterKey]["filterValue"] != '') {
$qtdBanheiros = $product[$filterKey]["filterValue"];
} else {
$qtdBanheiros = ''; }
} else {
$qtdBanheiros = ''; }
$filterKey = "50"; /* Área M2 */
if(array_key_exists($filterKey, $product)) {
if($product[$filterKey]["filterValue"] != '') {
$areaM2 = $product[$filterKey]["filterValue"];
} else {
$areaM2 = ''; }
} else {
$areaM2 = ''; }
$filterKey = "51"; /* Comprar ou Alugar */
if(array_key_exists($filterKey, $product)) {
if($product[$filterKey]["filterValue"] != '') {
$buyOrSell = $product[$filterKey]["filterValue"];
} else {
$buyOrSell = ''; }
} else {
$buyOrSell = ''; }
$filterKey = "52"; /* Localização */
if(array_key_exists($filterKey, $product)) {
if($product[$filterKey]["filterValue"] != '') {
$local = $product[$filterKey]["filterValue"];
} else {
$local = ''; }
} else {
$local = ''; }
$list .= '
<div class="col-12">
<div class="cardRealState"> <a href="'.$mainData['configPath'].'/item/'.$product['url'].'" title="Acessar o produto '.$product['title'].'"> <div class="cardRealStateImage"> <img class="imgFluid" src="'.$productImg.'" alt="Imagem do produto '.$product['title'].'"> </div> <div class="cardRealStateDsc"> <span class="realStateId">23955</span>'; if ($buyOrSell != "") { $list .= '<p class="realStateLocation">'.$buyOrSell.'</p>'; }
$list .= '<p><span class="realStateComplement">'.$product['title'].'</p>';
if ($local != "") { $list .= '<p class="realStateLocal">'.$local.'</p>'; }
$list .= '<h2 class="realStatePrice" value="'.$productPrice.'">'.$productPrice.'</h2> <ul>'; if ($qtdQuartos != "") { $list .= '<li class="realStateBedroom"><img src="https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/Icon awesome-bed.svg" width="16" height="16" alt="Ícone Banheiro" /><span>'.$qtdQuartos.'</span> Quartos</li>'; } if ($qtdVagas != "") { $list .= '<li class="realStateGarage"><img src="https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/Icon awesome-car.svg" width="16" height="16" alt="Ícone Vagas" /><span>'.$qtdVagas.'</span> Vagas</li>'; } if ($qtdBanheiros != "") { $list .= '<li class="realStateWashroom"><img src="https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/Icon awesome-bath.svg" width="16" height="16" alt="Ícone Banheiro" /><span>'.$qtdBanheiros.'</span> Banheiro</li>'; } if ($areaM2 != "") { $list .= '<li class="realStateArea"><img src="https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/Icon awesome-ruler-combined.svg" width="16" height="16" alt="Ícone Área" /><span>'.$areaM2.'</span> m²</li>'; } $list .= '</ul> </div> </a> </div> <!-- cardrealState --> </div>';
}
} else { $list .= '<div class="col-12"><h3>Nenhum produto aqui 😞</h3></div>'; }
$list .= '</div> <!--row-->
</div> <!--9-->
</div> <!--row-->
</div> <!--container-->
</section>
</main>
'.getBlockData(5175).'</body>'.$mainData['configBody'].'
'.getBlockData(5174).'
<script>if (navigator.onLine) { var xmlhttp; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == XMLHttpRequest.DONE ) { if(xmlhttp.status == 200){ let data = xmlhttp.responseText; document.getElementById("loadSideMenu").innerHTML = data; document.getElementById("categoriesNavBar").innerHTML = data; console.log("menu ok");
//menu toggle function menuToggle() { let catalogToggleButton = document.querySelector(".sideMenu #catalogToggleButton"); let catalogMenu = document.querySelector(".sideMenu #catalogMenu"); let menuToogleLabel = document.querySelector(".sideMenu #menuToogleLabel");
let width = (window.innerWidth > 0) ? window.innerWidth : screen.width; if(width < 766) { console.log("mobile"); console.log(catalogToggleButton); catalogToggleButton.style.visibility = "visible"; catalogMenu.style.visibility = "hidden";
catalogToggleButton.addEventListener("click", () => { if ( catalogMenu.style.visibility == "" || catalogMenu.style.visibility == "visible" ) { //hide console.log("show"); catalogMenu.style.visibility = "hidden"; catalogMenu.style.opacity = "0"; catalogMenu.style.height = "0px"; menuToogleLabel.innerHTML = "+ Expandir Menu"; catalogMenu.classList.remove("menuTransition"); }else{ //show console.log("hide"); catalogMenu.style.visibility = "visible"; catalogMenu.style.opacity = "1"; catalogMenu.style.height = "auto"; menuToogleLabel.innerHTML = "- Esconder Menu"; catalogMenu.classList.add("menuTransition"); } })
} else { catalogMenu.style.display = "block"; } }
menuToggle();
} } } let url = "'.$mainData['configPath'].'/menu.html" xmlhttp.open("POST", url, true); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.setTimeout = 6000; //6s xmlhttp.ontimeout = function() { console.log("🚨 tempo esgotado - impossível enviar"); } xmlhttp.send(); } else { console.log("🚨 navegador offline"); }
</script>
<!-- Price Format BRL -->
<script> document.addEventListener("DOMContentLoaded", function() {
var prices = document.querySelectorAll(\'.realStatePrice:not(.no-value)\');
for (var i = 0; i < prices.length; i++) {
var actualPrice = prices[i].innerHTML.replace(\'R$\',\'\');
var f = parseInt(actualPrice).toLocaleString(\'pt-br\',{style: \'currency\', currency: \'BRL\'});
prices[i].innerHTML = f;
}
});
</script>
</html>';
?>
MENU:
<?php
$menu = '';
$menuControl = [];
$menu .= ' <div class="menuToogle" id="catalogToggleButton"><a class="subTagItemList" style="width:100%;"><span id="menuToogleLabel">+ Expandir Menu</span></a></div> <div class="menu" id="catalogMenu"><ul class="menuList" id="catalogMenuList">';
foreach($menuData as $k => $v) {
$menuItem = json_decode($v, true);
if($menuItem['qtd'] != 0) { //display only categories with products
$menuItem['categoryUrl'] == "0" ? $url = 'index' : $url = substr($menuItem['categoryUrl'], 1);
$menu .= '<li class="menuItem" cat="'.$menuItem['categoryId'].'" parent="'.$menuItem['categoryParentId'].'" id="item_'.$menuItem['categoryId'].'"><a href="'.$mainData['configPath'].''.$menuItem['categoryUrl'].'">'.$menuItem['categoryName'].'<span class="menuItemQtd">'.$menuItem['qtd'].'</span></a></li>';
}
}
$menu .= '</ul></div>'; ?>
PÁGINA PRODUTO:
<?php
$item = '<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="pt">
<head>'.$mainData['configHead'].'<meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1" /><meta charset="UTF-8">' ;
//favicon$item .= '<link rel="icon" href="">';
//SEO$item .= '<title>'.$productData['productTitle'].' - '.$mainData['siteName'].'</title>
<meta name="description" content="'.$productData['productDescription'].'">
<link rel="canonical" href="'.$mainData['configPath'].'/item/'.$productData['productUrl'].'">
<meta name="keywords" content="'.str_replace(' ', ',', $productData['productTitle']).'"><meta name="author" content="'.$mainData['siteName'].'">
<meta name="geo.position" content=""><meta name="ICBM" content="">
<meta name="geo.placename" content=""><meta name="geo.region" content="">
<meta name="robots" content="index,follow"><meta name="rating" content="General"><meta name="revisit-after" content="7 days"><base href="'.$mainData['configPath'].'"><meta property="og:region" content="Brazil"><meta property="og:title" content="'.$productData['productTitle'].' - '.$mainData['siteName'].'"><meta property="og:type" content="article"><meta property="og:image" content="'.$productData['productImg'].'"><meta property="og:url" content="'.$mainData['configPath'].'/item/'.$productData['productUrl'].'"><meta property="og:description" content="'.$productData['productDescription'].'"><meta property="og:site_name" content="'.$mainData['siteName'].'">
<meta property="twitter:description" content="'.$productData['productDescription'].'"><meta property="twitter:card" content="summary_large_image"><meta property="twitter:title" content="'.$productData['productTitle'].' em '.$mainData['siteName'].'"><meta property="twitter:image" content=""><script data-schema="Organization" type="application/ld+json">{ "@type":"Organization", "@context":"http://schema.org", "name": "'.$mainData['siteName'].'", "url": "http://'.$mainData['siteDomain'].'", "logo": { "@type": "ImageObject", "url": "", "width": "300", "height": "300" }}</script>
<script type="application/ld+json">{ "@context": "https://schema.org", "@type": "Store", "address": { "@type": "PostalAddress", "addressLocality": "", "addressRegion": "", "postalCode": "", "streetAddress": "" }, "name": "", "openingHours": [ "Mon-Fri 08:00-18:00", "" ], "priceRange": "$", "telephone": "", "url": "'.$mainData['siteName'].'", "image" : ""}</script>';
//custom css
$item .= '
<!-- Bootstrap -->
'.getBlockData(5170).'
<!-- Global CSS -->
'.getBlockData(5171).'
<!-- Nav CSS -->
'.getBlockData(5172).'
<!-- GTM Head -->
'.getBlockData(5167).'';
// PRODUCT FANCYBOX IMAGE
$item .= '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css" />';
// STYLE FOR CATEGORIES NAVBAR
$item .='
<style> /*DEFAULT MENU*/
#categoriesNavBar #catalogToggleButton { display: none; }
#categoriesNavBar { background-color: #163d4f; box-shadow: 0px 10px 10px rgb(0 0 0 / 15%); }
#categoriesNavBar .menuItemQtd { display: none; }
#categoriesNavBar .menu { display: flex; align-items: center; width: 100%; justify-content: flex-start; margin-block: 0px; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; }
#categoriesNavBar .menuList { list-style: none; display: flex; margin: 0px; }
#categoriesNavBar .menuItem a { text-decoration: none; color: #fff; font-size: 14px; transition: 0.3s ease; display: block; height: 100%; padding: 15px; } #categoriesNavBar .menuItem a:hover { color: #fff; background-color: #07212b; }
@media (min-width: 576px) { #categoriesNavBar .menu { max-width: 540px; } } @media (min-width: 768px) { #categoriesNavBar .menu { max-width: 720px; } } @media (min-width: 992px) { #categoriesNavBar .menu { max-width: 960px; } } @media (min-width: 1200px) { #categoriesNavBar .menu { max-width: 1140px; } } @media (min-width: 1400px) { #categoriesNavBar .menu { max-width: 1320px; } } @media (max-width: 992px) {
/* Scroll Navbar */
#categoriesNavBar .menu { white-space: nowrap; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; scroll-snap-type: x mandatory; overflow-x: scroll; }
/* Width */
#categoriesNavBar .menu::-webkit-scrollbar { width: 3px; height: 3px; }
/* Track */
#categoriesNavBar .menu::-webkit-scrollbar-track { background: #f1f1f1; }
/* Handle */
#categoriesNavBar .menu::-webkit-scrollbar-thumb { background: #888; }
/* Handle on hover */
#categoriesNavBar .menu::-webkit-scrollbar-thumb:hover { background: #555; }
}
</style>';
// STYLE FOR LATERAL MENU
$item .= '<style>
/* CSS MENU LATERAL */
.iCardModel01 .sideMenu { padding: 15px 15px; border-radius: 5px; background-color: #fff; border: solid 1px #eee; height: 100%;}
.iCardModel01 .sideMenu .menuList { margin: 0px;}
.iCardModel01 .sideMenu .menuList li { border-bottom: solid 1px #eee; padding: 10px 0px;}
.iCardModel01 .sideMenu .menuList li:last-child { border-bottom: none;}
.iCardModel01 .sideMenu .menuList li a { color: #1e1e1e; font-weight: 600;}
.iCardModel01 .sideMenu .menuList li a:hover { color: #0098db;}
.iCardModel01 .sideMenu .menuList li .menuItemQtd { margin-left: 10px; background-color: #163d4f; padding: 0px; width: 18px; height: 18px; line-height: 10px; border-radius: 50px; font-size: 12px; color: #fff; display: inline-flex; align-items: center; justify-content: center;}
.iCardModel01 .menuToogle { display: none;}
@media (max-width: 992px) {
.iCardModel01 .sideMenu { padding: 15px 15px; border-radius: 5px; background-color: #fff; border: solid 1px #eee; height: auto; margin-bottom: 25px; }
.iCardModel01 .menuToogle { display: block; }
.iCardModel01 .sideMenu #catalogMenu { visibility: hidden; opacity: 0; transition: all 0.3s ease-in-out; overflow: hidden; height: 0px; } .iCardModel01 .sideMenu #catalogToggleButton { padding: 10px; background-color: #0071e3; color: #fff; font-weight: 600; border-radius: 5px; cursor: pointer; }}
</style>';
// CSS IMAGEM PRINCIPAL E ADICIONAIS
$item .= '<style>
#mainCarousel { width: 100%; margin: 0 auto 1rem auto;
--carousel-button-color: #170724; --carousel-button-bg: #fff; --carousel-button-shadow: 0 2px 1px -1px rgb(0 0 0 / 20%), 0 1px 1px 0 rgb(0 0 0 / 14%), 0 1px 3px 0 rgb(0 0 0 / 12%);
--carousel-button-svg-width: 20px; --carousel-button-svg-height: 20px; --carousel-button-svg-stroke-width: 2.5;}
.productItemImg { position: relative;}#thumbCarousel { max-width: 100%; position: absolute;}
#main
Carousel .carousel__slide { width: 100%; padding: 0; overflow: hidden;}
#mainCarousel .carousel__slide img { height: 100%; width: 100%; object-fit: cover; object-position: center;}
#mainCarousel .carousel__button.is-prev { left: -0.5rem;}
#mainCarousel .carousel__button.is-next { right: -0.5rem;}
#mainCarousel .carousel__button:focus { outline: none; box-shadow: 0 0 0 1px #A78BFA;}
#thumbCarousel .carousel__slide { opacity: 0.5; padding: 0; margin: 0.25rem; width: 96px; height: 64px; overflow: hidden;}
#thumbCarousel .carousel__slide img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px;}
#thumbCarousel .carousel__slide.is-nav-selected { opacity: 1;}
</style>';
// CSS PRODUTO - INFORMAÇÕES
$item .= '
<style>
.iCardModel01 .productItemInfo .productItemAdditional { border-top: solid 1px #eee; border-bottom: solid 1px #eee;}
.iCardModel01 .productItemInfo .productItemAdditional ul { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px;}
.iCardModel01 .productItemInfo .productItemAdditional ul li { text-align: center; font-size: 14px; margin-inline: 10px; display: flex; gap: 8px; align-items: center; color: #4e4d4d; font-weight: 600;}
.iCardModel01 .productItemInfo .realStatePrice { font-size: 25px; font-weight: 800; margin-top: 10px;}
.iCardModel01 .productItemInfo .productItemAdditional .realStateAddress { font-size: 15px; color: #444; font-weight: 600;}
.iCardModel01 .productItemInfo .productItemAdditional .realStateAddress span { font-weight: 400;}
.iCardModel01 .productItemInfo .productItemTitle { font-weight: bold; color: #333; font-size: 20px; margin-bottom: 5px; margin-top: 0px;}
.iCardModel01 .productItemInfo .productItemAdditional img { filter: brightness(0) invert(0.6);}
.iCardModel01 .productItemInfo .productItemDescription { font-weight: 400; font-size: 14px;}
.iCardModel01 .productItemInfo .realStateLocation { font-weight: bold; background-color: #163d4f; max-width: 90px; text-align: center; padding: 5px; border-radius: 4px; color: #fff; font-size: 14px; margin-top: 0px;}
</style>';
// CSS PRODUTO FORMULÁRIO
$item .= '<style>
.iCardModel01 .iForm01 { padding: 20px; border: solid 1px #eee; border-radius: 5px; box-shadow: 5px 5px 35px rgb(0 0 0 / 10%); background-color: #fff; }
.iCardModel01 .iForm01 label { font-weight: 600; }
.iCardModel01 .iForm01 input, .iCardModel01 .iForm01 textarea { padding: 10px 10px; background-color: #f9f9f9; border: solid 1px #ccc; border-radius: 3px; font-size: 12px; } .iCardModel01 .iForm01 input::placeholder { color: #999; }
.iCardModel01 .iForm01 .formLink { width: 100%; background-color: #0071E3; border-radius: 2px; font-weight: 500; padding: 10px 15px; display: flex; align-items: center; text-transform: uppercase; justify-content: center; } .iCardModel01 .iForm01 .formLink:hover { background-color: #00638e; color: #fff; } .iCardModel01 .productItemForm h1 { display: none; }
@media (max-width: 992px) { .iCardModel01 .iForm01 { padding: 10px; border: solid 1px #eee; border-radius: 5px; box-shadow: none; } .iCardModel01 .productItemForm h1 { display: block; } }
</style>';
// STYLE FOR RELATED PRODUCTS
$item .= '
<style>
/* CSS Cartões M1 Grade */
.iCardModel01 h1, .iCardModel01 h2 { font-size: 25px; margin-top: 0px;}
.iCardModel01 .cardRealState { border-radius: 10px; box-shadow: 5px 5px 35px rgb(0 0 0 / 10%); background-color: #fff;}
.iCardModel01 .cardRealState a { color: #1e1e1e; display: flex; gap: 10px; flex-direction: column; align-items: center;}
.iCardModel01 .cardRealState .cardRealStateDsc { padding: 20px; position: relative; padding-bottom: 15px;}
.iCardModel01 .cardRealState .cardRealStateImage { overflow: hidden; height: 200px; width: 100%;}
.iCardModel01 .cardRealState .cardRealStateImage img { object-fit: cover; object-position: center; width: 100%; height: inherit; border-radius: 10px 10px 0px 0px;}
.iCardModel01 .cardRealState .cardRealStateDsc p { margin-block: 10px; color: #000;}
.iCardModel01 .cardRealState .cardRealStateDsc p.realStateLocal { font-size: 15px; color: #999;}
.iCardModel01 .cardRealState .cardRealStateDsc .realStateComplement { font-weight: bold; color: #333; font-size: 16px;}
.iCardModel01 .cardRealState .cardRealStateDsc .realStateLocation { font-weight: bold; background-color: #163d4f; max-width: 90px; text-align: center; padding: 5px; border-radius: 4px; color: #fff; font-size: 14px;}
.iCardModel01 .cardRealState .realStateId { color: #444; font-size: 14px; font-weight: bold;}
.iCardModel01 .cardRealState .realStatePrice { font-size: 24px; font-weight: bold;}
.iCardModel01 .cardRealState .cardRealStateDsc ul li { text-align: center; font-size: 14px; margin-inline: 10px; display: flex; gap: 8px; align-items: center; color: #888;}
.iCardModel01 .cardRealState .cardRealStateDsc ul { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px;}
.iCardModel01 .cardRealState .cardRealStateDsc ul li img { filter: brightness(0) invert(0.6);}
.iCardModel01 .realStateCity { font-weight: bold;}
@media (max-width: 992px) { .iCardModel01 .row { grid-gap: 5px; }
.iCardModel01 .cardRealState .cardRealStateDsc p { font-size: 14px; margin-block: 6px; } .iCardModel01 .cardRealState .realStatePrice { font-size: 16px; } .iCardModel01 .cardRealState .cardRealStateDsc { padding: 10px; padding-bottom: 10px; } .iCardModel01 .cardRealState .cardRealStateDsc ul li { margin-inline: 0px; gap: 5px; } .iCardModel01 .cardRealState .cardRealStateImage { height: 200px; width: 100%; position: relative; }
.iCardModel01 .cardRealState .realStateId { font-size: 12px; } .iCardModel01 .cardRealState .cardRealStateImage img { object-fit: cover; object-position: center; width: 100%; height: 100%; border-radius: 0px; position: absolute; }}
@media (max-width: 1399px) and (min-width: 552px) { .iCardModel01 .cardRealState { border-bottom: none; border-radius: 0px; padding-bottom: 10px; margin-bottom: 5px; background-color: transparent; box-shadow: none; }}
@media (max-width: 552px) { .iCardModel01 .cardRealState .cardRealStateImage img { object-fit: cover; object-position: center; width: 100%; height: inherit; border-radius: 10px 10px 0px 0px; } .iCardModel01 .cardRealState a { color: #1e1e1e; display: flex; gap: 10px; align-items: center; flex-direction: column; } .iCardModel01 .cardRealState { margin-top: 15px; min-height: 450px; }}</style>';
// STYLE FOR BREADCRUMBS
$item .= '<style> .sectionBreadcrumbs { background-color: #f9f9f9; padding-block: 15px; } .sectionBreadcrumbs .container { display: flex; justify-content: space-between; } .sectionBreadcrumbs .container h1.pageIdentify { font-size: 20px; } .sectionBreadcrumbs .container ol#breadcrumb { display: flex; gap: 10px; list-style: none; padding: 0px; } .sectionBreadcrumbs .container ol#breadcrumb li { display: flex; gap: 10px; } .sectionBreadcrumbs .container ol#breadcrumb li a { color: #000; } .sectionBreadcrumbs .container ol#breadcrumb li a:hover { color: #0098db; } .sectioNBreadcrumbs .container #pageName { text-transform: capitalize; } @media (max-width: 772px) { .sectionBreadcrumbs .container { display: flex; justify-content: space-between; flex-direction: column; flex-wrap: wrap; align-items: center; } }</style>';
$item .= '</head>
<body>
<!-- GTM Body -->
'.getBlockData(5168).'';
$item .= '
<main>
<!-- HEADER -->
'.getBlockData(5173).'
<div id="categoriesNavBar">
</div>
<!-- BREADCRUMBS -->
<section class="sectionBreadcrumbs"> <div class="container"> <h1 class="pageIdentify">'.$productData['productTitle'].'</h1> <ol id="breadcrumb" vocab="http://schema.org/" typeof="BreadcrumbList"> <li property="itemListElement" id="linkInicial" typeof="ListItem"> <a property="item" id="pageInitialUrl" typeof="WebPage" href=""> <span property="name" id="pageInitialName">Inicial</span></a> / <meta property="position" content="1"> </li> <!--<li property="itemListElement" typeof="ListItem" class="lastItem"> <a property="item" id="pageUrl" typeof="WebPage" href="catalogo/index/"> <span property="name" class="active"><span id="pageName">Catálogo<br /></span></span></a> / <meta property="position" content="2"> </li>--> <li property="itemListElement" typeof="ListItem" class="lastItem"> <a property="item" id="pageUrl" typeof="WebPage" href="catalogo/cat'.$productData['productUrl'].'"> <span property="name" class="active"><strong id="pageName">'.$productData['productTitle'].'<br /></strong></span></a> <meta property="position" content="3"> </li> </ol> </div> </section>
<section class="iCardModel01 py-5">
<div class="container"> <div class="row">';
$productImg = ''; $productPrice = '';
$productData['productImg'] == '' ? $productImg = 'https://cdn.interago.com.br/img/png/w_0_q_8/1/mc/cdn//productGeneric' : $productImg = $productData['productImg'];
$productData['productPrice'] == '0.00' ? $productPrice = '' : $productPrice = $productData['productPrice'];
if($productPrice != '') {
$productPrice = 'R$'.$productPrice; $productPrice = str_replace('.', ',', $productPrice);
}
// Getting Additional Information
$qtdQuartos = json_decode(getFilterData(47, $productData['productId']), true);
$qtdVagas = json_decode(getFilterData(48, $productData['productId']), true);
$qtdBanheiros = json_decode(getFilterData(49, $productData['productId']), true);
$areaM2 = json_decode(getFilterData(50, $productData['productId']), true);
$buyOrSell = json_decode(getFilterData(51, $productData['productId']), true);
$local = json_decode(getFilterData(52, $productData['productId']), true);
// Getting Medias Images
$additionalImages = getFilterData(46, $productData['productId']);
// PRODUCT IMAGE
$item .= '
<div class="col-12 col-lg-4 productItemImg">'; /* <picture> <source media="(min-width:300px;)" srcset="'.str_replace('w_0_', 'w_300_', $productImg).'"> <source media="(min-width:500px;)" srcset="'.str_replace('w_0_', 'w_500_', $productImg).'"> <source media="(min-width:700px;)" srcset="'.str_replace('w_0_', 'w_700_', $productImg).'"> <img class="imgFluid" src="'.$productImg.'" alt="Imagem de '.$productData['productImg'].'" title="Imagem de '.$productData['productImg'].'" /> </picture> */
$item .= '<div id="mainCarousel" class="carousel"> <div class="carousel__slide" data-src="'.$productImg.'" data-fancybox="gallery" > <img class="imgFluid" src="'.$productImg.'" /> </div>';
if($additionalImages != '{}') {
foreach($additionalImages as $k => $v) {
$media = json_decode($v, true);
$item .= '<div class="carousel__slide" data-src="'.$media['productmediasUrl'].'" data-fancybox="gallery"> <img src="'.$media['productmediasUrl'].'" /> </div>';
}
}
$item .= '</div> <!--mainCarousel-->
<div id="thumbCarousel" class="carousel"> <div class="carousel__slide"> <img class="panzoom__content" src="'.$productImg.'" /> </div>';
if($additionalImages != '{}') {
foreach($additionalImages as $k => $v) {
$media = json_decode($v, true);
$item .= '<div class="carousel__slide"> <img class="panzoom__content" src="'.$media['productmediasUrl'].'" /> </div>';
}
}
$item .='</div> <!--thumbCarousel--> </div> <!--4 productItemImg-->';
// PRODUCT INFO
$item .= '<div class="col-12 col-lg-4 productItemInfo">';
if(array_key_exists('filterValue', $buyOrSell)) {
if($buyOrSell['filterValue'] != '') {
$item .= '<p class="realStateLocation">'.$buyOrSell['filterValue'].'</p>';
}
}
$item .= '<h1 class="productItemTitle">'.$productData['productTitle'].'</h1> <p class="realStatePrice" value="'.$productPrice.'">'.$productPrice.'</p>
<div class="productItemAdditional">'; if(array_key_exists('filterValue', $local)) { if($local['filterValue']) {
$item .= '<p class="realStateAddress">Endereço: <span>'.$local['filterValue'].'</span></p>';
} }
$item .= '<ul>'; if(array_key_exists('filterValue', $qtdQuartos)) { if($qtdQuartos['filterValue']) { $item .= '<li class="realStateBedroom"><img src="https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/Icon awesome-bed.svg" width="16" height="16" alt="Ícone Banheiro" /><span>'.$qtdQuartos['filterValue'].'</span> Quartos</li>'; } } if(array_key_exists('filterValue', $qtdVagas)) { if($qtdVagas['filterValue']) { $item .= '<li class="realStateGarage"><img src="https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/Icon awesome-car.svg" width="16" height="16" alt="Ícone Vagas" /><span>'.$qtdVagas['filterValue'].'</span> Vagas</li>'; } } if(array_key_exists('filterValue', $qtdBanheiros)) { if($qtdBanheiros['filterValue']) { $item .= '<li class="realStateWashroom"><img src="https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/Icon awesome-bath.svg" width="16" height="16" alt="Ícone Banheiro" /><span>'.$qtdBanheiros['filterValue'].'</span> Banheiro</li>'; } } if(array_key_exists('filterValue', $areaM2)) { if($areaM2['filterValue']) { $item .= '<li class="realStateArea"><img src="https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/Icon awesome-ruler-combined.svg" width="16" height="16" alt="Ícone Área" /><span>'.$areaM2['filterValue'].'</span> m²</li>'; } }
$item .= '</ul> </div>
<h3 class="productItemDescription">'.nl2br($productData['productDescription']).'</h3> </div>';
// PRODUCT FORM
$item .= '<div class="col-12 col-lg-4 mt-lg-0 mt-3 productItemForm"> <h1>Tem interesse? Deixe seu contato</h1>
<div class="iForm01"> <script src="https://www.interago.com.br/App/Extensions/1/tag/components/form.js"></script> </div> </div>';
// PRODUCT RELATED
$item .= '<div class="col-12 mt-lg-0 mt-3 productsList"> <div class="row">';
$productListData = listCustomProducts($mainData['siteId'], $productData['categoryId'], 0, 3, 0, 0, $productData['productId'], "47,48,49,50,51,52");
if($productListData[0] != '{}') {
$item .= '<div class="col-12"> <h1>Produtos Relacionados</h1> </div>';
foreach($productListData as $k => $v) {
$product = json_decode($v, true); $productImg = ''; $productPrice = ''; $product['img'] == '' ? $productImg = 'https://cdn.interago.com.br/img/png/w_0_q_8/1/mc/cdn//productGeneric' : $productImg = $product['img'];
$productImg = str_replace('w_0_', 'w_380_', $productImg);
$product['price'] == '0.00' ? $productPrice = '' : $productPrice = $product['price'];
// Bring product additional information - lines 910 ~ 1030
$filterKey = "47"; /* Quartos */
if(array_key_exists($filterKey, $product)) {
if($product[$filterKey]["filterValue"] != '') {
$qtdQuartos = $product[$filterKey]["filterValue"];
} else {
$qtdQuartos = '';
}
} else {
$qtdQuartos = '';
}
$filterKey = "48"; /* Vagas */
if(array_key_exists($filterKey, $product)) {
if($product[$filterKey]["filterValue"] != '') {
$qtdVagas = $product[$filterKey]["filterValue"];
} else {
$qtdVagas = ''; }
} else {
$qtdVagas = ''; }
$filterKey = "49"; /* Banheiros */
if(array_key_exists($filterKey, $product)) {
if($product[$filterKey]["filterValue"] != '') {
$qtdBanheiros = $product[$filterKey]["filterValue"];
} else {
$qtdBanheiros = ''; }
} else {
$qtdBanheiros = ''; }
$filterKey = "50"; /* Área M2 */
if(array_key_exists($filterKey, $product)) {
if($product[$filterKey]["filterValue"] != '') {
$areaM2 = $product[$filterKey]["filterValue"];
} else {
$areaM2 = ''; }
} else {
$areaM2 = ''; }
$filterKey = "51"; /* Comprar ou Alugar */
if(array_key_exists($filterKey, $product)) {
if($product[$filterKey]["filterValue"] != '') {
$buyOrSell = $product[$filterKey]["filterValue"];
} else {
$buyOrSell = ''; }
} else {
$buyOrSell = ''; }
$filterKey = "52"; /* Localização */
if(array_key_exists($filterKey, $product)) {
if($product[$filterKey]["filterValue"] != '') {
$local = $product[$filterKey]["filterValue"];
} else {
$local = ''; }
} else {
$local = ''; }
$item .= '
<div class="col-lg-4 col-12">
<div class="cardRealState"> <a href="'.$mainData['configPath'].'/item/'.$product['url'].'" title="Acessar o produto '.$product['title'].'"> <div class="cardRealStateImage"> <img class="imgFluid" src="'.$productImg.'" alt="Imagem do produto '.$product['title'].'"> </div> <div class="cardRealStateDsc"> <span class="realStateId">23955</span>'; if ($buyOrSell != "") { $item .= '<p class="realStateLocation">'.$buyOrSell.'</p>'; }
$item .= '<p><span class="realStateComplement">'.$product['title'].'</p>';
if ($local != "") { $item .= '<p class="realStateLocal">'.$local.'</p>'; }
$item .= '<h2 class="realStatePrice" value="'.$productPrice.'">'.$productPrice.'</h2> <ul>'; if ($qtdQuartos != "") { $item .= '<li class="realStateBedroom"><img src="https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/Icon awesome-bed.svg" width="16" height="16" alt="Ícone Banheiro" /><span>'.$qtdQuartos.'</span> Quartos</li>'; } if ($qtdVagas != "") { $item .= '<li class="realStateGarage"><img src="https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/Icon awesome-car.svg" width="16" height="16" alt="Ícone Vagas" /><span>'.$qtdVagas.'</span> Vagas</li>'; } if ($qtdBanheiros != "") { $item .= '<li class="realStateWashroom"><img src="https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/Icon awesome-bath.svg" width="16" height="16" alt="Ícone Banheiro" /><span>'.$qtdBanheiros.'</span> Banheiro</li>'; } if ($areaM2 != "") { $item .= '<li class="realStateArea"><img src="https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/Icon awesome-ruler-combined.svg" width="16" height="16" alt="Ícone Área" /><span>'.$areaM2.'</span> m²</li>'; } $item .= '</ul> </div> </a> </div> <!-- cardrealState --> </div>';
}
}
$item .= '</div></div>
</div>
</div>
</div>
</main>
'.getBlockData(5175).'
</body>'.$mainData['configBody'].'
'.getBlockData(5174).'
<script>if (navigator.onLine) { var xmlhttp; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
// LOAD MENU WITH NAVBAR - DELETE BELOW IF DONT USE
xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == XMLHttpRequest.DONE ) { if(xmlhttp.status == 200){ let data = xmlhttp.responseText; document.getElementById("categoriesNavBar").innerHTML = data; console.log("menu ok");
} } } let url = "'.$mainData['configUrl'].'/menu.html" xmlhttp.open("POST", url, true); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.setTimeout = 6000; //6s xmlhttp.ontimeout = function() { console.log("🚨 tempo esgotado - impossível enviar"); } xmlhttp.send(); } else { console.log("🚨 navegador offline"); }
</script>
<!-- FANCYBOX JS -->
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>
<script>
// Initialise Carouselconst mainCarousel = new Carousel(document.querySelector("#mainCarousel"), { Dots: false,});
// Thumbnailsconst thumbCarousel = new Carousel(document.querySelector("#thumbCarousel"), { Sync: { target: mainCarousel, friction: 0, }, Dots: false, Navigation: false, center: true, slidesPerPage: 1, infinite: false,});
// Customize FancyboxFancybox.bind(\'[data-fancybox="gallery"]\', { Carousel: { on: { change: (that) => { mainCarousel.slideTo(mainCarousel.findPageForSlide(that.page), { friction: 0, }); }, }, },})
</script>
<!-- Price Format BRL -->
<script> document.addEventListener("DOMContentLoaded", function() {
var prices = document.querySelectorAll(\'.realStatePrice:not(.no-value)\');
for (var i = 0; i < prices.length; i++) {
var actualPrice = prices[i].innerHTML.replace(\'R$\',\'\');
var f = parseInt(actualPrice).toLocaleString(\'pt-br\',{style: \'currency\', currency: \'BRL\'});
prices[i].innerHTML = f;
}
});
</script>
</html>
';
?>
PÁGINA DE BUSCA:
<?php
$data = ' <?php $method = \'subtag\'; if(isset($_GET[\'m\'])) { $method = $_GET[\'m\']; } $query = \'Assuntos\'; if(isset($_GET[\'q\'])) { if($_GET[\'q\'] != \'\') { $query = $_GET[\'q\']; } }
?> <!DOCTYPE HTML> <html lang="pt-br"> <head> '.$mainData['configHead'].' <meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title><?php echo $query; ?> em '.$mainData['siteName'].'</title> <meta name="description" content="Veja mais sobre <?php echo $query; ?> aqui em '.$mainData['siteName'].' para encontrar o que você procura">
<link rel="canonical" href="'.$mainData['configPath'].'/q.php?m=<?php echo $method; ?>&q=<?php echo $query; ?>"> <base href="'.$mainData['configPath'].'"> <meta property="og:type" content="article"> <meta property="og:description" content="Veja mais sobre <?php echo $query; ?> aqui em '.$mainData['siteName'].' para encontrar o que você procura"> <meta property="og:title" content="<?php echo $query; ?> em '.$mainData['siteName'].'"> <meta property="og:locale" content="pt_BR"> <meta property="og:site_name" content="'.$mainData['siteName'].'"> <meta property="og:image" content="https://cdn.interago.com.br/img/png/w_0_q_8/1/mc//interago"> <meta property="og:image:width" content="630"> <meta property="og:url" content="'.$mainData['configPath'].'/q.php?m=<?php echo $method; ?>&q=<?php echo $query; ?>">
<script data-schema="Organization" type="application/ld+json"> { "@type":"Organization", "@context":"http://schema.org", "name": "'.$mainData['siteName'].'", "url": "https://'.$mainData['siteDomain'].'", "logo": { "@type": "ImageObject", "url": "https://cdn.interago.com.br/img/png/w_0_q_8/1/mc//interago", "width": "1000", "height": "1000" } } </script>';
//custom css
$data .= '
<!-- Bootstrap -->
'.getBlockData(5170).'
<!-- Global CSS -->
'.getBlockData(5171).'
<!-- Nav CSS -->
'.getBlockData(5172).'
<!-- GTM Head -->
'.getBlockData(5167).'';
// STYLE FOR CATEGORIES NAVBAR
$data .='
<style> /*DEFAULT MENU*/
#categoriesNavBar #catalogToggleButton { display: none; }
#categoriesNavBar { background-color: #163d4f; box-shadow: 0px 10px 10px rgb(0 0 0 / 15%); }
#categoriesNavBar .menuItemQtd { display: none; }
#categoriesNavBar .menu { display: flex; align-items: center; width: 100%; justify-content: flex-start; margin-block: 0px; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; }
#categoriesNavBar .menuList { list-style: none; display: flex; margin: 0px; }
#categoriesNavBar .menuItem a { text-decoration: none; color: #fff; font-size: 14px; transition: 0.3s ease; display: block; height: 100%; padding: 15px; } #categoriesNavBar .menuItem a:hover { color: #fff; background-color: #07212b; }
@media (min-width: 576px) { #categoriesNavBar .menu { max-width: 540px; } } @media (min-width: 768px) { #categoriesNavBar .menu { max-width: 720px; } } @media (min-width: 992px) { #categoriesNavBar .menu { max-width: 960px; } } @media (min-width: 1200px) { #categoriesNavBar .menu { max-width: 1140px; } } @media (min-width: 1400px) { #categoriesNavBar .menu { max-width: 1320px; } } @media (max-width: 992px) {
/* Scroll Navbar */
#categoriesNavBar .menu { white-space: nowrap; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; scroll-snap-type: x mandatory; overflow-x: scroll; }
/* Width */
#categoriesNavBar .menu::-webkit-scrollbar { width: 3px; height: 3px; }
/* Track */
#categoriesNavBar .menu::-webkit-scrollbar-track { background: #f1f1f1; }
/* Handle */
#categoriesNavBar .menu::-webkit-scrollbar-thumb { background: #888; }
/* Handle on hover */
#categoriesNavBar .menu::-webkit-scrollbar-thumb:hover { background: #555; }
}
</style>';
// STYLE FOR LATERAL MENU
$data .= '<style>
/* CSS MENU LATERAL */
.iCardModel01 .sideMenu { padding: 15px 15px; border-radius: 5px; background-color: #fff; border: solid 1px #eee; height: 100%;}
.iCardModel01 .sideMenu .menuList { margin: 0px;}
.iCardModel01 .sideMenu .menuList li { border-bottom: solid 1px #eee; padding: 10px 0px;}
.iCardModel01 .sideMenu .menuList li:last-child { border-bottom: none;}
.iCardModel01 .sideMenu .menuList li a { color: #1e1e1e; font-weight: 600;}
.iCardModel01 .sideMenu .menuList li a:hover { color: #0098db;}
.iCardModel01 .sideMenu .menuList li .menuItemQtd { margin-left: 10px; background-color: #163d4f; padding: 0px; width: 18px; height: 18px; line-height: 10px; border-radius: 50px; font-size: 12px; color: #fff; display: inline-flex; align-items: center; justify-content: center;}
.iCardModel01 .menuToogle { display: none;}
@media (max-width: 992px) {
.iCardModel01 .sideMenu { padding: 15px 15px; border-radius: 5px; background-color: #fff; border: solid 1px #eee; height: auto; margin-bottom: 25px; }
.iCardModel01 .menuToogle { display: block; }
.iCardModel01 .sideMenu #catalogMenu { visibility: hidden; opacity: 0; transition: all 0.3s ease-in-out; overflow: hidden; height: 0px; } .iCardModel01 .sideMenu #catalogToggleButton { padding: 10px; background-color: #0071e3; color: #fff; font-weight: 600; border-radius: 5px; cursor: pointer; }}
</style>';
// STYLE FOR CATALOG IN LIST
$data .= '
<style>
/* CSS Cartões M1 Lista */
.iCardModel01 h3 { font-size: 25px; margin-top: 0px;}
.iCardModel01 #loadDynamicData .subtagLink { border-radius: 10px; box-shadow: 5px 5px 35px rgb(0 0 0 / 10%); background-color: #fff; display: flex; margin-bottom: 30px; color: #000; width: 100%; overflow: hidden;}
.iCardModel01 #loadDynamicData .subTagArticle { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; width: 100%; height: 170px;}
.iCardModel01 #loadDynamicData .subTagArticleImage { width: 20%; float: left; height: 100%; object-fit: cover;}
.iCardModel01 #loadDynamicData p { width: 80%; float: left; padding-left: 20px; margin-bottom: 0px; margin-top: 10px;}
.iCardModel01 #loadDynamicData p.subTagArticleP { font-weight: bold; color: #333; font-size: 16px; margin-top: 0px;}
.iCardModel01 #loadDynamicData p.subTagArticlePrice { font-size: 24px; font-weight: bold;}
.iCardModel01 #loadDynamicData p.subTagArticleDescription { font-size: 15px; color: #999; display: -webkit-box; max-width: 485px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
@media (max-width: 768px) {
.iCardModel01 #loadDynamicData .subtagLink { border-radius: 10px; box-shadow: 5px 5px 35px rgb(0 0 0 / 10%); background-color: #fff; display: flex; margin-bottom: 30px; color: #000; width: 100%; overflow: hidden; flex-direction: column; }
.iCardModel01 #loadDynamicData .subTagArticle { display: flex; flex-wrap: wrap; justify-content: flex-start; width: 100%; height: auto; padding-bottom: 15px; }
.iCardModel01 #loadDynamicData .subTagArticleImage { width: 100%; float: none; height: 150px; object-fit: cover; }
.iCardModel01 #loadDynamicData p { width: 100%; float: none; padding-inline: 20px; margin-bottom: 0px; margin-top: 10px; } .iCardModel01 #loadDynamicData p.subTagArticleP { font-weight: bold; color: #333; font-size: 16px; margin-top: 15px; } .iCardModel01 #loadDynamicData p.subTagArticleDescription { font-size: 15px; color: #999; display: -webkit-box; max-width: 485px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }}
@media (max-width: 375px) { .iCardModel01 #loadDynamicData p.subTagArticleDescription { font-size: 15px; color: #999; display: -webkit-box; max-width: 485px; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }}
</style>';
// STYLE FOR BREADCRUMBS
$data .= '<style> .sectionBreadcrumbs { background-color: #f9f9f9; padding-block: 15px; } .sectionBreadcrumbs .container { display: flex; justify-content: space-between; } .sectionBreadcrumbs .container h1.pageIdentify { font-size: 20px; } .sectionBreadcrumbs .container ol#breadcrumb { display: flex; gap: 10px; list-style: none; padding: 0px; } .sectionBreadcrumbs .container ol#breadcrumb li { display: flex; gap: 10px; } .sectionBreadcrumbs .container ol#breadcrumb li a { color: #000; } .sectionBreadcrumbs .container ol#breadcrumb li a:hover { color: #0098db; } .sectioNBreadcrumbs .container #pageName { text-transform: capitalize; } @media (max-width: 772px) { .sectionBreadcrumbs .container { display: flex; justify-content: space-between; flex-direction: column; flex-wrap: wrap; align-items: center; } }</style>';
$data .= '</head>
<body>
<!-- GTM Body -->
'.getBlockData(5168).'';
$data .='
<main>
'.getBlockData(5173).'
<div id="categoriesNavBar">
</div>
<!-- BREADCRUMBS -->
<section class="sectionBreadcrumbs"> <div class="container"> <h1 class="pageIdentify">Resultado para <?php echo $query; ?></h1> <ol id="breadcrumb" vocab="http://schema.org/" typeof="BreadcrumbList"> <li property="itemListElement" id="linkInicial" typeof="ListItem"> <a property="item" id="pageInitialUrl" typeof="WebPage" href=""> <span property="name" id="pageInitialName">Inicial</span></a> / <meta property="position" content="1"> </li> <!--<li property="itemListElement" typeof="ListItem" class="lastItem"> <a property="item" id="pageUrl" typeof="WebPage" href="catalogo/index/"> <span property="name" class="active"><span id="pageName">Catálogo<br /></span></span></a> / <meta property="position" content="2"> </li>--> <li property="itemListElement" typeof="ListItem" class="lastItem"> <a property="item" id="pageUrl" typeof="WebPage"> <span property="name" class="active"><strong id="pageName"><?php echo $query; ?><br /></strong></span></a> <meta property="position" content="3"> </li> </ol> </div> </section>
<section class="iCardModel01 py-5">
<div class="container"> <section id="loadDynamicData"></section>';
$data .= ' </div> <!--container--> </section> </main>
'.getBlockData(5175).'
</body>
'.$mainData['configBody'].'
'.getBlockData(5174).'
<script src="https://www.interago.com.br/App/Extensions/5/tag/search.js" wId="'.$mainData['siteId'].'" wD="'.$mainData['siteDomain'].'" st="<?php echo $query; ?>" limit="0" m="<?php echo $method; ?>" interval="10"></script> <script> loadMore(); </script>
<script>if (navigator.onLine) { var xmlhttp; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == XMLHttpRequest.DONE ) { if(xmlhttp.status == 200){ let data = xmlhttp.responseText; document.getElementById("categoriesNavBar").innerHTML = data; console.log("menu ok");
//menu toggle function menuToggle() { let catalogToggleButton = document.querySelector(".sideMenu #catalogToggleButton"); let catalogMenu = document.querySelector(".sideMenu #catalogMenu"); let menuToogleLabel = document.querySelector(".sideMenu #menuToogleLabel");
let width = (window.innerWidth > 0) ? window.innerWidth : screen.width; if(width < 766) { console.log("mobile"); console.log(catalogToggleButton); catalogToggleButton.style.visibility = "visible"; catalogMenu.style.visibility = "hidden";
catalogToggleButton.addEventListener("click", () => { if ( catalogMenu.style.visibility == "" || catalogMenu.style.visibility == "visible" ) { //hide console.log("show"); catalogMenu.style.visibility = "hidden"; catalogMenu.style.opacity = "0"; catalogMenu.style.height = "0px"; menuToogleLabel.innerHTML = "+ Expandir Menu"; catalogMenu.classList.remove("menuTransition"); }else{ //show console.log("hide"); catalogMenu.style.visibility = "visible"; catalogMenu.style.opacity = "1"; catalogMenu.style.height = "auto"; menuToogleLabel.innerHTML = "- Esconder Menu"; catalogMenu.classList.add("menuTransition"); } })
} else { catalogMenu.style.display = "block"; } }
menuToggle();
} } } let url = "'.$mainData['configPath'].'/menu.html" xmlhttp.open("POST", url, true); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.setTimeout = 6000; //6s xmlhttp.ontimeout = function() { console.log("🚨 tempo esgotado - impossível enviar"); } xmlhttp.send(); } else { console.log("🚨 navegador offline"); }
</script>
<!-- Price Format BRL -->
<script> document.addEventListener("DOMContentLoaded", function() {
var prices = document.querySelectorAll(\'.realStatePrice:not(.no-value)\');
for (var i = 0; i < prices.length; i++) {
var actualPrice = prices[i].innerHTML.replace(\'R$\',\'\');
var f = parseInt(actualPrice).toLocaleString(\'pt-br\',{style: \'currency\', currency: \'BRL\'});
prices[i].innerHTML = f;
}
});
</script>
</html>
';
?>
Você também pode gostar de ler
Guia completo para o catálogo de produtos (Extensão)
Instalação, passo a passo e guia prático para utilizar o catálogo no site dos clientes
Em 14/06/2022 às 13h38 - Atualizado em 11/04/2025 às 13h17
Guia da Extensão #11 Promoções
Uso da extensão que gerencia a exibição de preços, desconto por meios de pagamento, categorias e produtos e cupom (em breve)
Em 04/09/2023 às 10h41 - Atualizado em 12/02/2025 às 09h16
Carrinho de compras cart2.js
Extensão 6 do Interago para habilitar o uso de carrinho de compras ao website
Em 29/11/2022 às 12h54 - Atualizado em 03/02/2025 às 11h54
Buscas e Pesquisas no Catálogo de produtos
Script ativo é o search3.js. Buscas em cache com visualização no painel.
Em 01/03/2023 às 09h23 - Atualizado em 16/12/2024 às 11h48
Extensão #9 Envios e cálculos de frete
Extensão que utiliza a Fretnet, Correios, controle por estados e configurações gerais para controle de envios
Em 23/03/2023 às 20h22 - Atualizado em 15/09/2023 às 09h49
Checkout e Pedidos - Extensão #10
Guia para lojas virtuais utilizarem a extensão de checkout e suas especificações
Em 01/06/2023 às 14h35 - Atualizado em 18/08/2023 às 08h36
Estoque do Catálogo de Produtos - Layout, Uso e Consultas
Como adicionar informações de estoque no layoute realizar consultas assíncronas
Em 13/02/2023 às 14h40 - Atualizado em 07/08/2023 às 22h28
Catálogo de Produtos - Listar Produtos com AJAX
Como gerar listas de produtos diretamente da base de dados por ajax
Em 09/08/2022 às 11h03 - Atualizado em 26/12/2022 às 09h37
001. Catálogo em Lista - Formato Imobiliária
Visual de todas as páginas do catálogo de produtos em formato de lista - Ideal para imobiliárias
Em 29/06/2022 às 11h22 - Atualizado em 16/08/2022 às 09h09