last update 2023-12-22
@author Ricardo Asensio & Tadeo Mendoza
Guia completo de referência do design web do Mapaprop Website. Também visível em url/inmobiliaria/template.php
Guia de Referência do Mapaprop Website
Mapaprop Website
Requisitos prévios
- Servidor Php
- URL fornecida (configurar primeiro em Mapapropapp.com > admin)
O sistema está preparado para fornecer um layout por meio do reconhecimento da url. Ao acessar a url, nosso sistema pede à MapapropWebsiteAPI2 um resultado para essa url, que retornará o custId do nosso cliente. Esse CustId permitirá ao sistema retornar uma url com a pasta de arquivos do cliente.
O Mapaprop Website permite implantar qualquer design, com qualquer framework CSS e qualquer biblioteca Javascript que você queira 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 de componentes /custId/components/*.php
Código html em arquivos php, para incluir em 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 de scripts /custId/scripts/*
Scripts gerais para 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 no 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 a ajuda em Gerenciar páginas ou seções
Você pode alterar esses dados de forma "hardcoded", por meio 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 logos de organização (leia aqui) está predefinida para declarar um logo que basicamente deve estar em favicon.svg.
Exemplos de uso.
Os componentes são arquivos que incluem os blocos de código necessários para exibir um design da página web. Eles se dividem em componentes gerais (usados em todas as páginas) e componentes específicos de página, que só são incluídos 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 estão prontas para usar. Algumas delas 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.
Home 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";?>
Search 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. Geralmente 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. Geralmente usado para escrever qualquer conteúdo html definido para <nav> (embora você também possa inserir um <nav> dentro do componente <header>, mas preferimos oferecer 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";?>). Esse 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
Antes do último componente inserido antes da tag de fechamento </body>. **Geralmente 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 conforme sua conveniência. Ainda assim, aqui detalharemos nossas recomendações.
No Mapaprop recomendamos sub-incluir componentes dentro do arquivo de página principal. Usando nosso sistema de ShortCodes você pode incluir outros componentes dentro do componente principal, simplificando o trabalho, como featured.php (destacados), 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...
Home /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 escrever qualquer tipo de caminho de arquivo para declarar a pasta components/. Esses componentes são entregues na pasta de desenvolvimento prontos para usar.
Scripts /scripts/*
São arquivos localizados na pasta scripts/* do cliente. Esses scripts permitem o uso de funções do buscador, combos vinculados, sistemas de mapas, frameworks css, etc. Eles são integrados à pasta scripts para permitir uma maior personalização do design. Esses arquivos podem ser totalmente modificados, ou até mesmo não usados, desde que você tenha um desenvolvedor para simplesmente reimplementar as funções do buscador. Recomendamos que você não os altere a menos que tenha um desenvolvedor que entenda.
Você também pode criar os arquivos que quiser. Eles são usados inserindo um código do seguinte tipo:
<?php include $CUSTOMERSCRIPTS."searcher-scripts.php";?>
Alguns exemplos...
Main /scripts/main.php
Obrigatório. Sem main.php seu design não 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 seu site não funcionará (o fechamento da tag </html> é controlado apenas pelo Mapaprop).
<!DOCTYPE html>
<html lang="es"></html>
Scripts Head /scripts/scripts-head.php
Geralmente 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 da tag de fechamento </body>. Incluído em todas as páginas. Geralmente usado para inserir scripts que precisam ser carregados depois do restante 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>
Searcher Scripts. searcher-scripts.php
Usado para dar funcionalidade ao buscador. É 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 para o cliente em searcher-with-slide.php.
Searcher Temp Script. searcher-temp-scripts.php
Usado para dar funcionalidade ao buscador 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 para o cliente em searcher-with-slide.php.
Mapbox Script. 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 para o cliente em search-page-map.php.
Script de footer específico de página. Exemplo: /scripts/home-page-footer-scripts.php
Geralmente usado para declarar qualquer conteúdo (<script>) somente dentro da página home. É colocado no final da página, após o fechamento </body> e antes do fechamento </html>.
Existem scripts para cada tipo de página.
<!-- include your <scripts> here after close </body> and before close </html> -->
... your scripts
Componentes complexos
Certos componentes complexos contêm funções pré-desenhadas. Estes são fornecidos na pasta de desenvolvimento. Alguns exemplos...
Searcher. searcher-with-slider.php
Fornece a funcionalidade do buscador que inclui um carrossel de imagens com links. A seguir está o modelo de código html:
<!-- 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 os dados de imagem da sua conta Mapaprop ao Slider. Também são incluídos os CUSTOMERSCRIPTS para dar funcionalidade ao buscador. Além disso, foi incluído um CUSTOMERCOMPONENTS para incluir uma determinada barra com links de busca rápida.
Featured. featured.php
Fornece um código para dar funcionalidade a uma lista de destacados. A seguir está 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 para o cliente.
Featured Slide. featured-slide.php
Fornece um slider de propriedades em destaque de grande formato. A seguir está 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 destacados (mapaprop-scripts-featured.php e mapaprop-scripts-featured-slide.php).
MAPAPROPSCRIPTS
Esses scripts permitem usar as funções do Mapaprop. Eles são usados incluindo um código em determinados componentes que requerem essas 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 entrega 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 tais 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 destacadas, definidas a partir do Mapaprop. Este script fornece uma lista de propriedades e variáveis para incorporar informação 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 para o cliente em 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 destacadas, definidas a partir do Mapaprop. Este script fornece uma lista de propriedades e variáveis para incorporar informação 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 para o cliente em featured-slide.php.
ShortCodes - Resumo
Incluir componentes
Inclua componentes dentro de outros componentes com o seguinte código php
<?php include $CUSTOMERCOMPONENTS."call-to-action-2.php";?>
Os componentes a serem incluídos devem estar sempre localizados na pasta /components/.*
Incluir scripts
Inclua scripts dentro de outros componentes com o seguinte código php
<?php include $CUSTOMERSCRIPTS. "searcher-scripts.php";?>
Os componentes a incluir devem estar sempre na pasta /scripts/.*.
Dados fornecidos pelo Mapaprop
Além das propriedades, você pode incluir informação dinâmica dentro dos diferentes componentes usando os seguintes códigos php
Dados do cliente
Fornecidos 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
Featured
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 possui gerenciamento de páginas e/ou seções. Estas são adicionadas automaticamente, mas para acessá-las devem ser listadas dentro dos itens de uma barra de navegação, <nav>. A seguir está 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>
"; } ?>