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

Francisco Negrão

#Catálogo de Produtos

Postado: 29/06/2022 às 11h22

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 .= '

'.getBlockData(5170).'

'.getBlockData(5171).'

'.getBlockData(5172).'

'.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>

'.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>

</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>

<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>

//custom css

$list .= '


'.getBlockData(5170).'

'.getBlockData(5171).'

'.getBlockData(5172).'

'.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 .menuList {
list-style: none;
display: flex;
margin: 0px;
}

/* 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;
}