last update 2023-12-22
@author Ricardo Asensio & Tadeo Mendoza
Guia completo de referência do Mapaprop Express Web Design. Também visível em url/inmobiliaria/template.php
Guia de Referência do Mapaprop Express
Mapaprop Express
Requisitos prévios
- Servidor Php
- URL Provido (configurar primeiro em Mapapropapp.com > admin)
O sistema está preparado para fornecer um layout através do reconhecimento de url. Ao acessar a url, nosso sistema consulta o MapapropWebsiteAPI2 por um resultado para essa url, que vai retornar o custId do nosso cliente. Esse CustId vai permitir que o sistema retorne uma url com a pasta de arquivos do cliente.
O Mapaprop-express permite que você implemente qualquer design, com qualquer framework CSS e qualquer biblioteca Javascript que deseje usar, seguindo nossas instruções para finalmente integrar tudo em uma única pasta com uma estrutura simples e claramente definida.
Arquivos e pastas
Na pasta do cliente, temos o seguinte:
/custId/
Arquivos de header, nav e footer. Arquivos de páginas, e imagens, vídeos, etc.
Arquivos comuns
header.phpnav.phpfooter.phplogo.svgfavicon.svgslide1.jpgslide2.jpgslide3.jpgstyle.css
Arquivos de página
home-page.phpsearch-page.phpproperty-page.phpfeatured-page.phpcontact-page.phpcustomer-page.php
Pasta Components /custId/components/*.php
Código Html em arquivos php, para incluir nos arquivos php de página.
call-to-action-1.php //simple call to actioncall-to-action-2.php //simple call to actionfeatured.php //simple featured listfeatured-slide.php //featured big with carouselsearch-map.phpsearch-page-controls.php //search page change viewsearch-page-list.phpsearch-page-map.phpsearch-page-pagination.php //search page pagination controlssearcher-ext.php //home page searcher linkssearcher-with-slider.php //home page searcher
Pasta Scripts /custId/scripts/*
Scripts gerais para as páginas
scripts-footer.php //include scripts in footer for all pages inside <body>scripts-head.php //include scripts in <head> for all pages
Scripts de footer para páginas individuais
contact-page-footer-scripts.php //footer scripts to include only herecustomer-page-footer-scripts.php //footer scripts to include only herehome-page-footer-scripts.php //footer scripts to include only heremap-page-footer-scripts.php //footer scripts to include only hereproperty-page-footer-scripts.php //footer scripts to include only heresearch-page-footer-scripts.php //footer scripts to include only here
Mais opções....
main.php //define doctype and htmlmapbox-script-property.php //manipulate mabpox script for propertymapbox-script.php //manipulate mabpox script for searchsearcher-bycode.js //manipulate searcher by codesearcher-scripts.php //manipulate searcher functionalitysearcher-temp-scripts.php //manipulate temp searcher functionality
Valores predefinidos.
Favicon favicon.svg
O favicon é definido em formato svg. Deve se chamar favicon.svg. Ele deve estar localizado diretamente na pasta do cliente. Conforme o exemplo a seguir.
/custId/favicon.svg
Meta <title>, <meta name=keywords> and <meta name=description>
Todos esses valores devem ser configurados a partir da conta Mapaprop e podem ser editados a qualquer momento (módulo Site > Páginas).
Veja ajuda em Gerenciar páginas ou seções
É possível para você alterar esses dados de forma "hardcoded", através dos componentes <script> para cada página específica, detalhado na seção Components.
Schema <div itemscope itemtype="https://schema.org/Organization">...
A marcação Schema.org para logotipos de organizações (leia aqui) já vem predefinida para declarar um logotipo que, basicamente, deve estar em favicon.svg.
Exemplos de uso.
Components são arquivos que incluem os blocos de código necessários para exibir um design para a página web. Eles se dividem em componentes gerais (usados em todas as páginas) e componentes específicos de página, que são incluídos apenas em determinadas páginas. Os componentes estão listados na pasta /custId/components/. Esta é a lista e suas funções.
Páginas
As páginas já estão prontas para uso. Algumas contêm código html, e outras contêm shortcodes php incluídos.
É obrigatório manter os arquivos de página (*-page.php), mesmo que não contenham nenhum conteúdo.
Início home-page.php
Este é o conteúdo
<!-- include your /components here -->
<!-- CUSTOMER PATH SEARCHER + SLIDE -->
<?php include $CUSTOMERCOMPONENTS."searcher-with-slider.php";?>
<?php include $CUSTOMERCOMPONENTS."call-to-action-1.php";?>
<!-- CUSTOMER PATH FEATURED -->
<?php include $CUSTOMERCOMPONENTS."featured-slide.php";?>
<?php include $CUSTOMERCOMPONENTS."featured.php";?>
<!-- CUSTOMER PATH OTHER OPTION -->
<?php include $CUSTOMERCOMPONENTS."call-to-action-2.php";?>
Busca search-page.php
Este é um exemplo de conteúdo baseado no modelo apresentado em express.mapaprop.com
<!-- SEARCHPAGE-->
<section class="searchpage-list">
<div class="container-fluid">
<!-- search controls -->
<?php include $CUSTOMERCOMPONENTS."search-page-controls.php"; ?>
<!-- /.search controls -->
<!--SEARCH RESULTS-->
<div class="searchpage-results mt-2">
<!-- TAB 1 - CARD&MAP -->
<div class="" id="">
<div class="row">
<!-- card list view -->
<div class="col col-xs-12 col-sm-6">
<div class="row row-cols-1 row-cols-md-2 g-4">
<?php
$properties = $searchResponse->items; foreach ($properties as $row) { include
$MAPAPROPSCRIPTS."search-item.php"; ?>
<!-- property card -->
<div class="col">
<div class="card h-100 shadow-sm">
<div class="card-header">
<?php echo $operationDesc ?>
<small class="text-muted float-right mt-1">
Cód.
<?php echo $code ?>
</small>
</div>
<a href="/propiedad/<?php echo $seoURL ?> ">
<img
src="<?php echo CDN_IMAGES?>/photos/<?php echo $image ?>"
style="width:100%;"
class="card-img-top"
alt="..."
/>
</a>
<!-- status -->
<?php
$statusClass = "hide";
if ($sold) {
?>
<div class="card-footer text-center bg-danger text-white">VENDIDO</div>
<?php
}
if ($rented) {
?>
<div class="card-footer text-center bg-warning text-white">ALQUILADO</div>
<?php
}
if ($reserved) {
?>
<div class="card-footer text-center bg-success text-white">RESERVADO</div>
<?php
}
if ($suspended) {
?>
<div class="card-footer text-center bg-danger text-white">SUSPENDIDO</div>
<?php
}
?>
<div class="card-body">
<h5 class="card-title"><?php echo $title ?></h5>
<p class="card-text">
<?php echo $description?>
...
</p>
<p class="card-text">
<?php
if ($rooms) {
?>
<small class="text-muted"
>Dormitorios:
<?php echo $rooms ?></small
>
<?php
}
if ($ambiences) {
?>
<small class="text-muted "
>Ambientes / Espacios:
<?php echo $ambiences ?></small
>
<?php
}
if ($occupancy) {
?>
<small class="text-muted float-right"
>Ocupantes:
<?php echo $occupancy?></small
>
<?php
}
?>
</p>
</div>
<div class="card-footer">
<h5 class="card-title mt-2 text-primary float-left"><?php echo $price ?></h5>
<a href="/propiedad/<?php echo $seoURL ?>" class="btn btn-primary float-right"
>Ver más</a
>
</div>
</div>
</div>
<!--/.property card -->
<?php
}
?>
</div>
</div>
<!-- /.card list view -->
<!-- MAP view -->
<div class="col-6 d-none d-sm-block">
<?php include $CUSTOMERCOMPONENTS."search-page-map.php"; ?>
</div>
<!-- /.MAP view -->
</div>
</div>
<!-- /.TAB 1 - CARD&MAP -->
<?php include $CUSTOMERCOMPONENTS."search-page-pagination.php"; ?>
</div>
<!--/.SEARCH RESULTS-->
</div>
</section>
<!-- /.SEARCHPAGE-->
<!-- FEATURING -->
<section>
<h1 class="display-4 text-center mt-4">Inmuebles Destacados</h1>
<p class="text-right"><a class="link-primary" href="/destacados">Ver todos</a></p>
<div>
<?php include $CUSTOMERCOMPONENTS."featured.php";?>
</div>
</section>
<!-- /. FEATURING -->
Header, Nav e Footer
Header header.php
Primeiro componente inserido após a tag <body>. **Incluído em todas as páginas. Normalmente usado para escrever qualquer conteúdo html definido para <header>. Não é obrigatório incluí-lo. Este é um exemplo...
<header>
<div class="container">
<!-- main header -->
<div class="row">
<!-- left -->
<div class="col d-none d-md-block d-lg-block d-xl-block d-block d-print-none mt-4">
<p class="">
<a class="text-black" href="https://www.facebook.com/" target="_blank"
><i class="fab fa-facebook-square"></i
></a>
<a class="text-black" href="https://www.instagram.com" target="_blank"
><i class="fab fa-instagram"></i
></a>
<a class="text-black" href="/contacto"
><i class="fas fa-envelope-square"></i> Contáctenos</a
>
</p>
<p class="mb-1 phone d-none d-md-block d-lg-block d-xl-block">
<a
class="text-dark"
href="https://web.whatsapp.com/send?phone=549<?php echo $customer->mobile; ?>"
target="_blank"
><i class="fab fa-whatsapp" target="_blank"></i>
<?php echo $customer->mobile; ?></a
>
</p>
<p class="mb-1 text-muted">
<i class="fas fa-map-marker-alt"></i>
<small>
<?php echo $customer->address; ?> <br /><?php echo $customer->location; ?>
</small>
</p>
</div>
<!-- branch ZONE -->
<div class="col-xs-12 col-sm-12 col-md-8 d-block d-print-none mt-3 mb-3">
<p class="text-center">
<a href="/" class=""
><img
class="img-fluid brand "
src="<?php echo $customer->getResource('logo'); ?>"
title="<?php echo $customer->name?>"
alt="<?php echo $customer->name?>"
/></a>
</p>
</div>
<!-- END LOGO ZONE -->
<!-- right -->
<div class="col d-none d-md-block d-lg-block d-xl-block mt-4">
<a href="http://www.cmcplz.com.ar/" target="_blank"
><img
src="/styles/customers/<?php echo $customer->path; ?>/lz.png"
class="float-right hidden-xs"
/></a>
</div>
</div>
<div class="row d-block d-md-none d-lg-none d-xl-none">
<?php
if($customer->mobile){ ?>
<!-- bottom header -->
<div class="col pb-2">
<a
class="btn btn-success btn-block btn-lg"
href="https://api.whatsapp.com/send?phone=549<?php echo $customer->mobile; ?>"
target="_blank"
>
<i class="fab fa-whatsapp"></i>
<?php echo $customer->mobile; ?>
</a>
</div>
<?php
}
?>
</div>
</div>
</header>
Nav /nav.php
Segundo componente inserido após a tag <body>. **Incluído em todas as páginas. Normalmente usado para escrever qualquer conteúdo html definido para <nav> (embora você também possa inserir um <nav> dentro do componente <header>, mas preferimos te dar uma opção separada). Aqui está um exemplo...
<?php include_once $MAPAPROPSCRIPTS."menu-code.php";?>
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top menu-responsive">
<div class="container">
... su contenido
</div>
</nav
Verifique que este componente contenha um código de include (<?php include_once $MAPAPAPROPSCRIPTS. "menu-code.php";?>). Este código permite listar itens de menu que levam a páginas previamente criadas na sua conta Mapaprop. Sem esse código, as páginas criadas no Mapaprop não serão listadas.
Footer /footer.php
Penúltimo componente inserido antes do fechamento da tag </body>. **Normalmente usado para escrever qualquer conteúdo html definido para <footer>. Como por exemplo...
<!-- footer bootstrap 4 -->
<footer>
<div class="container">... your content</div>
</footer>
<!-- btn whatsapp general footer-->
<a
class="btn btn-success btn-action btn-fab visible-xs btn-lg d-block d-print-none"
href="https://api.whatsapp.com/send?phone=<?php echo $customer->mobile; ?>&text=Hola, me contacto desde su pagina web:"
>
<i class="fab fa-whatsapp fa-lg"></i>
</a>
<a
class="btn btn-success btn-action btn-fab hidden-xs btn-lg d-block d-print-none"
href="https://web.whatsapp.com/send?phone=<?php echo $customer->mobile; ?>&text=Hola, me contacto desde su pagina web:"
target="_blank"
>
<i class="fab fa-whatsapp fa-lg"></i>
</a>
Components /components/*
Podem ser incluídos em qualquer página. O sistema está pronto para ser usado da forma que for mais conveniente para você. Ainda assim, aqui detalhamos nossas recomendações
Na Mapaprop recomendamos sub-incluir componentes dentro do arquivo da página principal. Usando nosso sistema de ShortCodes você pode incluir outros componentes dentro do componente principal, simplificando o trabalho, como featured.php (destaques) que costumam ser incluídos em várias páginas.
Inclua seus próprios componentes usando este modelo de ShortCode:
<?php include $CUSTOMERCOMPONENTS."your-file.php";?>
Exemplo para...
Início /home-page.php
<!-- include your /components here -->
<!-- CUSTOMER PATH SEARCHER + SLIDE -->
<?php include $CUSTOMERCOMPONENTS."searcher-with-slider.php";?>
<!-- CUSTOMER PATH FEATURED -->
<?php include $CUSTOMERCOMPONENTS."featured-slide.php";?>
<?php include $CUSTOMERCOMPONENTS."featured.php";?>
<!-- CUSTOMER PATH OTHER OPTION -->
<?php include $CUSTOMERCOMPONENTS."call-to-action-1.php";?>
<?php include $CUSTOMERCOMPONENTS."call-to-action-2.php";?>
No exemplo acima você pode ver como diferentes componentes são incluídos com o shortcode <?php include $CUSTOMERCOMPONENTS. "your-file.php";?>, que simplifica a escrita de qualquer tipo de caminho de arquivo para declarar a pasta components/. Esses componentes são entregues prontos para uso na pasta de desenvolvimento.
Scripts /scripts/*
São arquivos localizados na pasta scripts/* do cliente. Esses scripts permitem o uso de funções do motor de busca, combos vinculados, sistemas de mapas, frameworks css, etc. Eles são integrados à pasta scripts para permitir uma customização adicional do design. Esses arquivos podem ser totalmente modificados, e até mesmo não utilizados, desde que você conte com um desenvolvedor para simplesmente reimplementar as funções do navegador. Recomendamos que você não os altere a menos que tenha um desenvolvedor que entenda do assunto.
Você também pode criar os arquivos que quiser. Eles são usados inserindo código do seguinte tipo:
<?php include $CUSTOMERSCRIPTS."searcher-scripts.php";?>
Alguns exemplos...
Principal /scripts/main.php
Obrigatório. Sem main.php o seu design não vai funcionar. O arquivo é usado para declarar o <!doctype> e iniciar a tag <html>. Você pode alterá-lo para usar o código a seu favor. Sem essa declaração, o seu site não vai funcionar (o fechamento da tag </html> é controlado apenas pelo Mapaprop).
<!DOCTYPE html>
<html lang="es"></html>
Scripts Head /scripts/scripts-head.php
Normalmente usado para declarar qualquer conteúdo dentro da tag <head>, e incluído em todas as páginas, por exemplo <script>, <meta>, <link>, etc. Use-o livremente para incorporar estilos, scripts e qualquer tipo de informação que deva ser colocada dentro da tag <head>.
<!-- RecaptchaV3 script head -->
<?php include $MAPAPROPSCRIPTS."scripts-head-recaptchaV3.php"; ?>
<script src="https://www.google.com/recaptcha/api.js?render=<?php echo $customer->getCaptcha();?>"></script>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Bootstrap CSS 2023-04-03-->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ"
crossorigin="anonymous"
/>
<!-- 2022-08-22 fontawesome personalized -->
<script src="https://kit.fontawesome.com/acd0e2fca1.js" crossorigin="anonymous"></script>
<!-- Searcher bycode Script -->
<script src="/styles/customers/<?php echo $customer->path?>/scripts/searcher-bycode.js"></script>
<!-- Copy Code Script -->
<script
src="/styles/customers/<?php echo $customer->path?>/scripts/copy-text-script.js"
type="text/javascript"
></script>
<link rel="stylesheet" href="\styles\customers\<?php echo $customer->path?>\style.css " />
<!-- iconos de bootstrap -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css"
/>
Scripts Footer /scripts/scripts-footer.php
Último arquivo inserido antes do fechamento da tag </body>. Incluído em todas as páginas. Normalmente usado para inserir scripts que precisam ser carregados depois do resto da página. Como por exemplo...
<!-- Bootstrap Font Icon CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"
/>
<!-- Popper and Bootstrap JS -->
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
crossorigin="anonymous"
></script>
<script>
....
</script>
Scripts do Buscador. searcher-scripts.php
Usado para dar funcionalidade ao motor de busca. É incluído da seguinte forma
... searcher html code ...
<!-- CUSTOMER SEARCHER SCRIPT -->
<?php include $CUSTOMERSCRIPTS."searcher-scripts.php";?>
O exemplo completo é fornecido dentro da pasta de desenvolvimento do cliente, dentro de searcher-with-slide.php.
Script Temporário do Buscador. searcher-temp-scripts.php
Usado para dar funcionalidade ao motor de busca temporário. É incluído da seguinte forma
... searcher html code ...
<!-- CUSTOMER SEARCHER SCRIPT -->
<?php include $CUSTOMERSCRIPTS. "searcher-temp-scripts.php";?>
O exemplo completo é fornecido dentro da pasta de desenvolvimento do cliente, dentro de searcher-with-slide.php.
Script do Mapbox. mapbox-script.php
Usado para dar funcionalidade ao mapa contido em search-page-map.php. É incluído da seguinte forma
... map controls ...
<div id="map"></div>
<?php include $CUSTOMERSCRIPTS."mapbox-script.php";?>
<!-- END MAP -->
O exemplo completo é fornecido dentro da pasta de desenvolvimento do cliente, dentro de search-page-map.php.
Script de Footer específico de página. Exemplo: /scripts/home-page-footer-scripts.php
Normalmente usado para declarar qualquer conteúdo (<script>) apenas dentro da página inicial. É colocado no final da página, depois do fechamento de </body> e antes do fechamento de </html>.
Existem scripts para cada tipo de página.
<!-- include your <scripts> here after close </body> and before close </html> -->
... your scripts
Componentes complexos
Determinados componentes complexos contêm funções pré-desenhadas. Eles são fornecidos na pasta de desenvolvimento. Alguns exemplos...
Buscador. searcher-with-slider.php
Fornece a funcionalidade do motor de busca que inclui um carrossel de imagens com links. A seguir, o código html de exemplo:
<!-- MAPAPROPSCRIPTS FOR SCRIPTS SLIDER -->
<?php include $MAPAPROPSCRIPTS."mapaprop-scripts-slide.php";?>
<!-- section search & carousel -->
<section>
<div id="carousel-homepage" class="carousel slide carousel-fade" data-bs-ride="false">
<!-- carousel -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#carousel-homepage" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carousel-homepage" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carousel-homepage" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block" src="<?php echo $slide1 ?>" class="d-block w-100" alt="<?php echo $customer->name; ?>">
<div class="carousel-caption d-none d-md-block">
<h1>Ventas, Alquileres</h1>
<p class="lead">Nuestro trabajo es conseguir su propiedad</p>
</div>
</div>
<div class="carousel-item">
<img class=" d-block" src="<?php echo $slide2 ?>" class="d-block w-100" alt="<?php echo $customer->name; ?>">
<div class="carousel-caption d-none d-md-block">
<h1>Una transacción inmobiliaria</h1>
<p class="lead">cumple un sueño, concreta un anhelo, materializa el esfuerzo.... </p>
</div>
</div>
<div class="carousel-item">
<img class="d-block" src="<?php echo $slide3 ?>" class="d-block w-100" alt="<?php echo $customer->name; ?>">
<div class="carousel-caption d-none d-md-block">
<h1>Solicite tasación</h1>
<p class="lead">Valore su inmueble solo con profesionales</p>
</div>
</div>
</div>
<!-- END carousel -->
<!-- searcher-carousel -->
<div class="searcher-carousel pr-3 pl-3">
<div class="container py-2">
<form action="/buscar/" onsubmit="return fillsearch();">
<div class="form-row">
<!-- operation -->
<!-- type -->
<!-- bedrooms -->
<!-- price -->
<!-- more options collapse-->
<div class="collapse" id="collapseExample">
.....
</div>
<!--END more options collapse-->
<!-- view map or list -->
<!-- search button -->
<div class="col-12 col-md-4 mt-2 align-self-center justify-content-end">
<button class="btn btn-primary btn-lg float-right btn-block" type="submit" id="searchlink" tabindex="6">
<i class="fas fa-search fa-lg"></i> BUSCAR
</button>
<input type="hidden" name="page" value="0" />
</div>
....
</form>
<?php include $CUSTOMERCOMPONENTS."searcher-ext.php";?>
</div>
</div>
<!-- END searcher-carousel -->
</div>
</section>
<!-- CUSTOMER SEARCHER SCRIPT -->
<?php include $CUSTOMERSCRIPTS."searcher-scripts.php";?>
<?php include $CUSTOMERSCRIPTS."searcher-temp-scripts.php";?>
Observa-se a inclusão de MAPAPROPSCRIPTS para fornecer dados de imagens da sua conta Mapaprop ao Slider. Também é incluído o CUSTOMERSCRIPTS para dar funcionalidade ao motor de busca. Além disso, foi incluído um CUSTOMERCOMPONENTS para incluir uma determinada barra com links de busca rápida.
Destaques. featured.php
Fornece um código para dar funcionalidade a uma lista de destaques. A seguir, o código html de exemplo, que você é livre para modificar:
<div class="row row-cols-1 row-cols-md-2 g-4">
<?php
include $MAPAPROPSCRIPTS."mapaprop-scripts-featured.php";
foreach ($response as $row){
include $MAPAPROPSCRIPTS."mapaprop-scripts-featured-itemcode.php";
?>
<div class="col-lg-4 col-md-6">.... your html code for item</div>
<?php
}
?>
</div>
A funcionalidade final é determinada por este código php
<?php
include $MAPAPROPSCRIPTS."mapaprop-scripts-featured.php";
foreach ($response as $row){
include $MAPAPROPSCRIPTS."mapaprop-scripts-featured-itemcode.php";
?>
O exemplo completo é fornecido dentro da pasta de desenvolvimento do cliente.
Slide de Destaques. featured-slide.php
Fornece um Slider de propriedades em destaque de grande formato. A seguir, o modelo de código html:
<!--section detailed featured -->
<article>
<?php include $MAPAPROPSCRIPTS."mapaprop-scripts-featured.php";?>
<div id="carruselDestacados" class="carousel slide ">
<div class="carousel-inner">
<?php
$arrays = array_chunk($response, 1, true);
$active = "active";
foreach ($arrays as $slide) {
?>
<?php
foreach($slide as $featuredItem){
include $MAPAPROPSCRIPTS."mapaprop-scripts-featured-slide.php";
?>
<div class="carousel-item <?php echo $active?>" id="carouselItemFeatured">
<img src="<?php echo $image?>" class="d-block w-100 cropped-image" alt="...">
<div class="carousel-caption d-block d-md-block">
<div class="mb-auto">
<h1><?php echo $title?></h1>
<h3> <?php echo $operationDesc?> de <?php echo $typeDesc?></h3>
<p class="mb-0">
<?php if (!empty($rooms)) { ?>Dormitorios: <?php echo $rooms?> <?php } ?>
<?php if (!empty($ambiences)) { ?>Ambientes / Espacios: <?php echo $ambiences?> <?php } ?>
<?php if (!empty($occupancy)) { ?>| Ocupantes: <?php echo $occupancy?><?php } ?>
</p>
<p class="mb-0">
<?php if ($showPrice) { ?>
<strong><?php echo $price?></strong> |
<?php } ?>
Cód. <?php echo $code?>
</div>
<br />
<a class="IrPropiedad" href="/propiedad/<?php echo $seoURL?>">
Ir a la propiedad
</a>
</p>
</div>
</div>
<?php
}
$active = " ";
}
?>
<button class="carousel-control-prev" type="button" data-bs-target="#carruselDestacados" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carruselDestacados" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</article>
Neste caso especial, o sistema é um pouco mais complexo do que o componente featured.php. Observa-se a inclusão de 2 MAPAPAPROPSCRIPTS para conseguir essa funcionalidade de Slider para os destaques (mapaprop-scripts-featured.php e mapaprop-scripts-featured-slide.php).
MAPAPROPSCRIPTS
Esses scripts permitem que você use funções do Mapaprop. São usados incluindo um código em determinados componentes que precisam dessas funções. Este é um exemplo:
<?php include $MAPAPROPSCRIPTS."mapaprop-scripts-slide.php";?>
Alguns exemplos....
Mapaprop Script Slide. mapaprop-scripts-slide.php
Usado para permitir obter uma configuração do sistema referente a imagens e links definidos a partir do Mapaprop. Este script fornece 3 imagens e seus links. Deve ser incluído antes do início de um slider. Por exemplo...
<?php include $MAPAPROPSCRIPTS."mapaprop-scripts-slide.php";?>
<!-- section search & carousel -->
<section>
<div id="carousel-homepage" class="carousel slide carousel-fade" data-bs-ride="false">
<!-- carousel -->
<div class="carousel-inner">
<div class="carousel-item active">
<img
class="d-block"
src="<?php echo $slide1 ?>"
class="d-block w-100"
alt="<?php echo $customer->name; ?>"
/>
...
</div>
</div>
</div>
</section>
Por fim, para usar essas imagens e links no caso de um slider, você deve declará-los com as seguintes variáveis:
<a class="carousel-item active" href="<?php echo $url1 ?>">
<img class="d-block" src="<?php echo $slide1 ?>" alt="<?php echo $customer->name; ?>" />
</a>
Mapaprop Script Featured. mapaprop-script-featured.php
Usado para permitir obter uma configuração do sistema referente a propriedades em destaque, definida a partir do Mapaprop. Este script fornece uma lista de propriedades e variáveis para incorporar informações em cada item, como imagens, título, preço, link, tipo de operação, etc. Deve ser incluído antes do início de um slider. Por exemplo...
<div class="row row-cols-1 row-cols-md-2 g-4">
<?php
include $MAPAPROPSCRIPTS."mapaprop-scripts-featured.php";
foreach ($response as $row){
include $MAPAPROPSCRIPTS."mapaprop-scripts-featured-itemcode.php";
?>
<div class="col-lg-4 col-md-6">.... your html code for item</div>
<?php
}
?>
</div>
A funcionalidade é determinada por esta função php
<?php
include $MAPAPROPSCRIPTS."mapaprop-scripts-featured.php";
foreach ($response as $row){
include $MAPAPROPSCRIPTS."mapaprop-scripts-featured-itemcode.php";
?>
O exemplo completo é fornecido dentro da pasta de desenvolvimento do cliente, dentro de featured.php.
Mapaprop Script Featured Slide. mapaprop-scripts-featured-slide.php
Usado em combinação com mapaprop-scripts-featured.php para permitir obter uma configuração do sistema referente a propriedades em destaque, definida a partir do Mapaprop. Este script fornece uma lista de propriedades e variáveis para incorporar informações em cada item, como imagens, título, preço, link, tipo de operação, etc. Deve ser incluído antes do início de um slider. Por exemplo...
<<!--section detailed featured -->
<article>
<?php include $MAPAPROPSCRIPTS."mapaprop-scripts-featured.php";?>
<div id="carruselDestacados" class="carousel slide ">
<div class="carousel-inner">
<?php
$arrays = array_chunk($response, 1, true);
$active = "active";
foreach ($arrays as $slide) {
?>
<?php
foreach($slide as $featuredItem){
include $MAPAPROPSCRIPTS."mapaprop-scripts-featured-slide.php";
?>
<div class="carousel-item <?php echo $active?>" id="carouselItemFeatured">
<img src="<?php echo $image?>" class="d-block w-100 cropped-image" alt="...">
<div class="carousel-caption d-block d-md-block">
<div class="mb-auto">
<h1><?php echo $title?></h1>
<h3> <?php echo $operationDesc?> de <?php echo $typeDesc?></h3>
<p class="mb-0">
<?php if (!empty($rooms)) { ?>Dormitorios: <?php echo $rooms?> <?php } ?>
<?php if (!empty($ambiences)) { ?>Ambientes / Espacios: <?php echo $ambiences?> <?php } ?>
<?php if (!empty($occupancy)) { ?>| Ocupantes: <?php echo $occupancy?><?php } ?>
</p>
<p class="mb-0">
<?php if ($showPrice) { ?>
<strong><?php echo $price?></strong> |
<?php } ?>
Cód. <?php echo $code?>
</div>
<br />
<a class="IrPropiedad" href="/propiedad/<?php echo $seoURL?>">
Ir a la propiedad
</a>
</p>
</div>
</div>
<?php
}
$active = " ";
}
?>
<button class="carousel-control-prev" type="button" data-bs-target="#carruselDestacados" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carruselDestacados" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</article>
A funcionalidade é determinada por esta função php combinada.
<!-- MAPAPROPSCRIPTS FOR SCRIPTS FEATURED -->
<?php include $MAPAPROPSCRIPTS."mapaprop-scripts-featured.php";?>
<div class="container">
<?php
//Mapaprop Code
foreach($slide as $featuredItem){
// MAPAPROPSCRIPTS FOR SCRIPTS FEATURED SLIDE -->
include $MAPAPROPSCRIPTS."mapaprop-scripts-featured-slide.php"; //Mapaprop Code ?>
</div>
O exemplo completo é fornecido dentro da pasta de desenvolvimento do cliente, dentro de featured-slide.php.
ShortCodes - Resumo
Incluindo components
Inclua components dentro de outros components com o seguinte código php
<?php include $CUSTOMERCOMPONENTS."call-to-action-2.php";?>
Os components a serem incluídos devem sempre estar localizados na pasta /components/ folder.*
Incluir scripts
Inclua scripts dentro de outros components com o seguinte código php
<?php include $CUSTOMERSCRIPTS. "searcher-scripts.php";?>
Os components a incluir devem sempre estar na pasta /scripts/.*.
Dados fornecidos pelo Mapaprop
Além das propriedades, você pode incluir informações dinâmicas dentro dos diferentes components usando os seguintes códigos php
Dados do cliente
Fornecido pela Api em todas as páginas
<?php echo $customer->path; ?><?php echo $customer->phone1; ?><?php echo $customer->phone2; ?><?php echo $customer->phone3; ?><?php echo $customer->mobile; ?><?php echo $customer->name; ?><?php echo $customer->location; ?><?php echo $customer->address; ?><?php echo $customer->mail; ?>
slide
Fornecido por <?php include $MAPAPROPSCRIPTS."mapaprop-scripts-slide.php";?>
$slide1 = $customer->getResource("slide1.image"); //get image 1
$slide2 = $customer->getResource("slide2.image"); //get image 2
$slide3 = $customer->getResource("slide3.image"); //get image 3
$url1 = $customer->getResource("slide1.url"); //get link image 1
$url2 = $customer->getResource("slide2.url"); //get link image 1
$url3 = $customer->getResource("slide3.url"); //get link image 1
Resultados de Busca
Fornecido em search-page.php
<?php
$statusClass = null;
if ($sold) {
$statusClass = "search-item-sold";
} else if ($rented) {
$statusClass = "search-item-rented";
} else if ($reserved) {
$statusClass = "search-item-reserved";
} else if ($suspended) {
$statusClass = "search-item-suspended";
}
if ($statusClass) {
?>
<div class="searchpage-item-status <?php echo $statusClass?>" style="overflow: auto"></div>
<?php
}
?>
// for operation status banner
<?php echo $operation?> //property operation
<a href="/propiedad/<?php echo $seoURL ?>">xxx</a> //property page link
<?php echo $operationDesc ?> // operation description
<a href="/propiedad/?id=<?php echo $seoURL ?>">
<img class="" src="<?php echo CDN_IMAGES?>/photos/<?php echo $image ?>"
/></a> //img featured src
<?php echo $title ?> //property title
<?php echo $code ?> //property code
<?php echo $address?> //property address
<?php echo $occupancy ?> //property occupancy people total
<?php echo $rooms ?> //property rooms
<?php echo $ambiences ?> //property ambiences
<?php echo $description ?> //property description
<?php echo $price ?> //property price
Destaques
Fornecido por
<?php include $CUSTOMERCOMPONENTS."featured-slide.php";?> ou <?php include $CUSTOMERCOMPONENTS."featured.php";?>
$code = property code$price = property price$operation = Type of operation (ID number)$operationDesc = Description of the operation (Ex: Sale, rent or temporary rental)$propertyOperation = PropertyOperationType (ID number)$type = Type (Identification number)$typeDesc = Description of the property type (Ex: Apartment, House, Duplex..)$propertyType = Property type (ID number)$seoURL = URL of the property search (EX : "alquiler-temporario-de-triplex-en-ciudad-jardin-lomas-del-palomar-tres-de-febrero-buenos-aires-1-168997")$showPrice = Show or not the price of the property.$image = Image of the property$rooms = Number of rooms$ambiences = Number of rooms$occupancy = Occupancy$title = Title of the property (EX: great house for sale in san andres de giles)$sold = $row -> sold;$rented = $row->rented;$suspended = $row->suspended;$reserved = $row->reserved;
Dados da Propriedade
Fornecido em property-page.php
$rooms = Number of rooms$propertyId = id of the property we are on$statusClass = defines the state of the property
<!-- code that generates the carousel inside the property -->
<div class="carousel-inner">
<?php
$active = "active";
foreach ($imageRows as $row) {
$type = $row["type"];
$image = $row["image"];
$thumbnail = $row["thumbnail"];
$imageDesc = $row["description"];
?>
<div class="carousel-item <?php echo $active ?>">
<img
class="d-block w-100 imagen-carrusel"
src="<?php echo CDN_IMAGES ?>/photos/<?php echo $image ?>"
alt=""
/>
<div class="carousel-caption">
<h4 class="hidden-xs">
<?php echo $imageDesc ?>
</h4>
<p class="visible-xs">
<?php echo $imageDesc ?>
</p>
</div>
</div>
<?php
$active = "";
}
?>
</div>
Detalhes da Propriedade
$address = address of property$buildArea = total built$landArea = total area$bathrooms = bathrooms in ownage$location = neighborhood where the property is located$rooms = rooms of the property$yearsOld = age of the property$status = state the property is in$price = price of property$expensesCurrency && $expenses = expenses to pay$paymentPeriod = payment period$occupancy = maximum capacity$mortgageReady = Credit Able$taxesCurrency && $taxes =taxes to pay$conditions = property conditions
Características
(Se tem ou não)
$furnished = furnished$professional = fit professional$status = state the property is in$yearsOld = age of the property$buildArea = Covered area$landArea = Total area$rooms = Bedrooms:$suite = Bedroom suite$dependencies = Service room/s$playroom = playroom$dailyDinning = Daily Dining$bathrooms = bathrooms in ownage$toilettes = Toilette/s$laundry = Laundry$balcony = balcony$frontGarden = Garden in front$yard = yard$terrace = terrace$apartmentsPerFloor = Apartments per floor$floors = Floors/floors$location = location$orientation = orientation$heatingType = Heating$airConditionerType = Air Conditioner$waterHeaterType = Hot water$garageType = garageType$garages = garages$security = Surveillance / Security$alarm = Security Alarm$securityBox = SecurityBox$janitor = Manager / janitor$storage = Storage / Store objects$privateElevator = Private Elevator$grill = Grill$cable = Cable TV$wifi = Internet Wi-Fi$electricGenerator = Electric Generator$gatedCommunity = Gated Community$countryClub = CountryClub$Whirlpool = Whirlpool$barbecueArea = barbecueArea$park = park$sum = SUM / Party Room$phoneLine = Phone Line$swimmingPool = Pool
Superfícies
$livesize = LiveSize$kitchensize = kitchensize$room1Size = room 1 Size$room2Size = room 2 Size$room3Size = room 3 Size$room4Size = room 4 Size$dependency1Size = dependency 1 Size$dependency2Size = dependency 2 Size$bathroom1Size = bathroom 1 Size$bathroom2Size = bathroom 2 Size$toilette1Size = toilette 1 Size$toilette2Size = toilet 2 Size$yardSize = Size of yard$balconySize = balcony Size
Descrição
$customer->custId && $code = Code
$description = description
Reservas
<?php if ($reservations != null) { ?>
<div>
<div class="property-reservations">
<h3 class="black"><i class="fa fa-calendar fa-lg"></i> Disponibilidad para reservas</h3>
<div id="reservations"></div>
</div>
</div>
<div class="clearfix"></div>
<?php } ?>
Seção de contato
$propertyId = property Id$thisBranchAddress = Branch of Address$thisBranchPhones = Branch of Phones$thisBranchLocation = Branch of Location$thisBranchName = Branch of Names$url = url of property page
Galeria
$imageRows = list of images of the property
<div class="gallery col-xs-12 col-sm-12 col-md-12 justify-content-center">
<script>
var descripciones = [];
</script>
<?php
$i = 0;
foreach ($imageRows as $row) {
$type = $row["type"];
$image = $row["image"];
$thumbnail = $row["thumbnail"];
$imageDesc = $row["description"];
?>
<div class="gallery-image">
<img
class="image"
id="photo<?php echo $i ?>"
src="<?php echo CDN_IMAGES ?>/photos/<?php echo $thumbnail ?>"
alt="12.jpg"
style="height:150px;width:150px;"
/>
</div>
<script>
descripciones.push('<?php echo $imageDesc ?>');
</script>
<?php
$i++;
}
?>
</div>
// scripts of galley
const images = [...document.querySelectorAll('.image')];
// popup
const popup = document.querySelector('.popup');
const closeBtn = document.querySelector('.close-btn');
const imageName = document.querySelector('.image-name');
const largeImage = document.querySelector('.large-image');
const imageIndex = document.querySelector('.index');
const leftArrow = document.querySelector('.left-arrow');
const rightArrow = document.querySelector('.right-arrow');
let index = 0; // will track our current image;
images.forEach((item, i) => {
item.addEventListener('click', () => {
updateImage(i);
popup.classList.toggle('active');
})
})
contImg = 1;
const updateImage = (i) => {
var path = document.getElementById('photo' + i).src;
largeImage.src = path
if (!descripciones[i]) {
imageName.innerHTML = "Sin descripción"
} else {
imageName.innerHTML = descripciones[i];
}
imageIndex.innerHTML = `Imágen ${i + 1} de ` + descripciones.length;
index = i;
}
closeBtn.addEventListener('click', () => {
popup.classList.toggle('active');
})
leftArrow.addEventListener('click', () => {
if (index > 0) {
updateImage(index - 1);
}
})
rightArrow.addEventListener('click', () => {
if (index < images.length - 1) {
updateImage(index + 1);
}
})
Seção de mapa
// SCRIPT PARA PERSONALIZAR
<?php include $CUSTOMERSCRIPTS . "mapbox-script-property.php"; ?>
<div id="menu" class="d-print-none">
<input id="outdoors-v11" type="radio" name="rtoggle" value="outdoors" checked="checked">
<label for="outdoors-v11">Outdoors</label>
<input id="satellite-v9" type="radio" name="rtoggle" value="satellite">
<label for="satellite-v9">Satellite</label>
<input id="light-v10" type="radio" name="rtoggle" value="light">
<label for="light-v10">Light</label>
<input id="dark-v10" type="radio" name="rtoggle" value="dark">
<label for="dark-v10">Dark</label>
<input id="streets-v11" type="radio" name="rtoggle" value="streets">
<label for="streets-v11">Streets</label>
</div>
<div id="map"></div>
</div>
Seção de vídeo da propriedade
$videoRows = property video list
<?php if (count($videoRows) >
0) { ?>
<div class="col-sm-12 col-md-12 mt-3 videosPropiedad">
<h3><i class="fa fa-video-camera"></i> Videos de la propiedad</h3>
<?php
foreach ($videoRows as $row) {
$source = $row["source"];
$desc = $row["description"];
?>
<div class="embed-responsive embed-responsive-16by9 mb-3 ">
<!-- esta clase esta en common-classes.css -->
<?php echo $source ?>
</div>
<?php
}
?>
</div>
<?php } ?>
Seção de plantas da propriedade
<?php if ($blueprintRow) { ?>
<div class="col-sm-12 col-md-6 mt-3">
<h3><i class="fa fa-arrows-alt"></i> Plano de la propiedad</h3>
<?php
if ($blueprintRow) {
$image = $blueprintRow["image"];
?>
<div class="bottom20">
<img
class="img-responsive"
style="height:500px;width:500px;"
src="<?php echo CDN_IMAGES ?>/photos/<?php echo $image ?>"
/>
</div>
<?php } ?>
</div>
<?php } ?>
Navbar > Itens de Menu
O Mapaprop tem gerenciamento de páginas e/ou seções. Elas são adicionadas automaticamente, mas para acessá-las devem ser listadas dentro dos itens de uma barra de navegação, <nav>. A seguir, o código de exemplo para inserir os itens em um determinado html
<!-- menu page links items -->
<?php
foreach ($array as $menu) {
$text = $menu->text; $url = $menu->url; echo "
<li><a class="dropdown-item" href="/pagina/$url">$text</a></li>
"; } ?>