last update 2023-12-22
@author Ricardo Asensio & Tadeo Mendoza
Full guide for reference Mapaprop Express Web Design. Also visible in url/inmobiliaria/template.php
Mapaprop Express Reference Guide
Mapaprop Express
Previous requirements
- Php Server
- URL Provided (setup first in Mapapropapp.com > admin)
The system is prepared to provide a layout through url recognition. When accessing the url, our system asks MapapropWebsiteAPI2 for a result for that url, which will return our client's custId. This CustId will allow the system to return a url with the client's file folder.
Mapaprop-express allows you to deploy any design, with any CSS framework and any Javascript library you wish to use, following our instructions to finally integrate everything in a single folder with a simple and clearly defined structure.
Files & Folders
In customer folder, we have this:
/custId/
Header, nav and footer files. Pages files, and images, videos, etc.
Common Files
header.phpnav.phpfooter.phplogo.svgfavicon.svgslide1.jpgslide2.jpgslide3.jpgstyle.css
Page Files
home-page.phpsearch-page.phpproperty-page.phpfeatured-page.phpcontact-page.phpcustomer-page.php
Components Folder /custId/components/*.php
Html code in php files, for include in page php files.
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
Scripts Folder /custId/scripts/*
General Scripts for pages
scripts-footer.php //include scripts in footer for all pages inside <body>scripts-head.php //include scripts in <head> for all pages
Footer Scripts for individual pages
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
More options....
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
Preset values.
Favicon favicon.svg
El favicon se establece en formato svg. Se debe llamar favicon.svg. El mismo debe estar ubicado directamente en la carpeta del cliente. Segun el siguiente ejemplo.
/custId/favicon.svg
Meta <title>, <meta name=keywords> and <meta name=description>
Todos estos valores debe ser configurados desde la cuenta Mapaprop y se pueden editar en cualquier momento (modulo Sitio Web > Paginas).
Ver ayuda en Administrar paginas o secciones
Es posible para Ud alterar estos datos en forma "harcodeada", a traves de los componentes de <script> para cada pagina en especifico, detallado en la seccion Components.
Schema <div itemscope itemtype="https://schema.org/Organization">...
Schema.org markup for organization logos (read here) is predefined to declare a logo which basically should be in favicon.svg.
Usage examples.
Components are files that include the code blocks necessary to display a design for the web page. They are divided into general components (used for all pages) and page specific components, which are only included in certain pages. The components are listed in /custId/components/ folder. This is the list and its functions.
Pages
Pages are ready to use.Some of them contain html code, and others contain php shortcodes included.
It is mandatory to keep the page files (*-page.php), even if they do not contain any content.
Home home-page.php
This is the content
<!-- 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
This is an example of content based on the model presented in 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 & Footer
Header header.php
First component inserted after the <body> tag. **Included in all pages. Usually used to write any html content set for <header>. It is not mandatory to include it. This is an example...
<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
Second component inserted after the <body> tag. **Included in all pages. Usually used to write any html content set for <nav> (although you could also insert a <nav> inside the <header> component but we prefer to give you a separate option). Here is an example...
<?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
Verify that this component contains an include code (<?php include_once $MAPAPAPROPSCRIPTS. "menu-code.php";?>). This code allows you to list menu items that lead to pages previously created in your Mapaprop account. Without this code, pages created in Mapaprop will not be listed.
Footer /footer.php
Before the last component inserted before the closing </body> tag. **Usually used to write any html content set for <footer>. Such as...
<!-- 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/*
Can be included in any page. The system is ready to be used at your convenience. Although here we will detail our recommendations
At Mapaprop we recommend sub-including components within the main page file. Using our ShortCodes system you can include other components within the main component, simplifying the work, such as featured.php (featured) that are often included in several pages.
Include your own components using this model of ShortCode:
<?php include $CUSTOMERCOMPONENTS."your-file.php";?>
Example for...
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";?>
In the example above you can see how different components are included with the shortcode <?php include $CUSTOMERCOMPONENTS. "your-file.php";?> which simplifies writing any kind of file path to declare the components/ folder. These components are delivered in the development folder ready to use.
Scripts /scripts/*
These are files located in the scripts/* folder of the client. These scripts allow the use of search engine functions, linked combos, mapping systems, css frameworks, etc. They are integrated into the scripts folder to allow further customization of the design. These files can be fully modified, even unused, as long as you have a developer to simply reimplement the browser functions. We recommend that you do not alter them unless you have a developer who understands.
You can also create the files you want. They are used by inserting code of the following type:
<?php include $CUSTOMERSCRIPTS."searcher-scripts.php";?>
Some examples...
Main /scripts/main.php
Mandatory. Without main.php your design will not work. The file is used to declare the <!doctype> and start the <html> tag. You can alter it to use the code to your advantage. Without this declaration your website will not work (The closing of the </html> tag is controlled only by Mapaprop).
<!DOCTYPE html>
<html lang="es"></html>
Scripts Head /scripts/scripts-head.php
Usually used to declare any content within the <head> tag, and included in all pages, e.g. <script>, <meta>, <link>, etc. Use it freely to incorporate styles, scripts, and any type of information that must be placed inside the <head> tag.
<!-- 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
Last file inserted before the closing </body> tag. Included in all pages. Usually used to insert scripts that need to be loaded after the rest of the page. Such as...
<!-- 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
Used to give functionality to the search engine. It is included as follows
... searcher html code ...
<!-- CUSTOMER SEARCHER SCRIPT -->
<?php include $CUSTOMERSCRIPTS."searcher-scripts.php";?>
The complete example is provided inside the development folder for the client inside searcher-with-slide.php.
Searcher Temp Script. searcher-temp-scripts.php
Used to give functionality to the temporary search engine. It is included as follows
... searcher html code ...
<!-- CUSTOMER SEARCHER SCRIPT -->
<?php include $CUSTOMERSCRIPTS. "searcher-temp-scripts.php";?>
The complete example is provided inside the development folder for the client inside searcher-with-slide.php.
Mapbox Script. mapbox-script.php
Used to give functionality to the map contained in search-page-map.php . It is included as follows
... map controls ...
<div id="map"></div>
<?php include $CUSTOMERSCRIPTS."mapbox-script.php";?>
<!-- END MAP -->
The complete example is provided inside the development folder for the client inside search-page-map.php.
Specific Page Footer Script. Example: /scripts/home-page-footer-scripts.php
Usually used to declare any content (<script>) within the home page only. It is placed at the end of the page, after the closing </body> and before the closing </html>.
There are scripts for each type of page.
<!-- include your <scripts> here after close </body> and before close </html> -->
... your scripts
Complex components
Certain complex components contain pre-designed functions. These are provided in the development folder. Some examples...
Searcher. searcher-with-slider.php
It provides search engine functionality that includes an image carousel with links. The following is the sample html code:
<!-- 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";?>
It is observed the inclusion of MAPAPROPSCRIPTS to provide image data from your Mapaprop account to the Slider. Also included are CUSTOMERSCRIPTS to give functionality to the search engine. In addition a CUSTOMERCOMPONENTS was included to include a certain bar with quick search links.
Featured. featured.php
It provides a code to give functionality to a list of highlights. The following is the sample html code that you are free to modify:
<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>
The final functionality is determined by this php code
<?php
include $MAPAPROPSCRIPTS."mapaprop-scripts-featured.php";
foreach ($response as $row){
include $MAPAPROPSCRIPTS."mapaprop-scripts-featured-itemcode.php";
?>
El ejemplo completo esta provisto dentro de la carpeta de desarrollo para el cliente.
Featured Slide. featured-slide.php
Provee un Slider de propiedades destacadas de gran formato. El siguiente es le modelo de codigo 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>
In this special case, the system is somewhat more complex than the featured.php component. It is observed the inclusion of 2 MAPAPAPROPSCRIPTS to achieve this Slider functionality for the highlights (mapaprop-scripts-featured.php and mapaprop-scripts-featured-slide.php).
MAPAPROPSCRIPTS
These scripts allow you to use Mapaprop functions. They are used by including a code in certain components that require these functions. This is an example:
<?php include $MAPAPROPSCRIPTS."mapaprop-scripts-slide.php";?>
Some examples....
Mapaprop Script Slide. mapaprop-scripts-slide.php
Used to allow to get a system configuration regarding images and links set from Mapaprop. This script delivers 3 images and their links. It must be included before the start of a slider. For example...
<?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>
Finally, to use such images and links in the case of a slider, you should declare them with the following variables:
<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
Used to allow to obtain a configuration of the system with respect to highlighted properties, set from Mapaprop. This script provides a list of properties and variables to incorporate information in each item, like images, title, price, link, type of operation, etc. It must be included before the start of a slider. For example...
<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>
The functionality is determined by this php function
<?php
include $MAPAPROPSCRIPTS."mapaprop-scripts-featured.php";
foreach ($response as $row){
include $MAPAPROPSCRIPTS."mapaprop-scripts-featured-itemcode.php";
?>
The complete example is provided inside the development folder for the client inside featured.php.
Mapaprop Script Featured Slide. mapaprop-scripts-featured-slide.php
Used in combination with mapaprop-scripts-featured.php to allow to obtain a system configuration regarding featured properties, set from Mapaprop. This script provides a list of properties and variables to incorporate information in each item, like images, title, price, link, type of operation, etc. It must be included before the start of a slider. For example...
<<!--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>
The functionality is determined by this combined php function.
<!-- 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>
The complete example is provided inside the development folder for the client inside featured-slide.php.
ShortCodes - Summary
Including components
Include components inside other components with the following php code
<?php include $CUSTOMERCOMPONENTS."call-to-action-2.php";?>
The components to be included must always be located in the /components/ folder.*
Include scripts
Include scripts inside other components with the following php code
<?php include $CUSTOMERSCRIPTS. "searcher-scripts.php";?>
The components to include must always be in the /scripts/.* folder.
Data provided by Mapaprop
In addition to the properties, you can include dynamic information inside the different components using the following php codes
Customer data
Provided by Api in all pages
<?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
Provided by <?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
Search Results
Provided in 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
Provided by
<?php include $CUSTOMERCOMPONENTS."featured-slide.php";?> or <?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;
Property Data
Provided in 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>
Property Details
$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
Characteristics
(If have or not)
$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
Surfaces
$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
Description
$customer->custId && $code = Code
$description = description
Reservations
<?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 } ?>
Contact section
$propertyId = property Id$thisBranchAddress = Branch of Address$thisBranchPhones = Branch of Phones$thisBranchLocation = Branch of Location$thisBranchName = Branch of Names$url = url of property page
Gallery
$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);
}
})
Map section
// 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>
Property video section
$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 } ?>
Property blueprints section
<?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 > Menu Items
Mapaprop has page and/or section management. These are added automatically, but to access them they should be listed within the items of a navigation bar, <nav>. The following is the example code for inserting the items in a given 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>
"; } ?>