Fields and filters

As you have probably noticed, two fields in the list view module were skipped during setup: Displayed fields and Filter. If these two fields are empty, the default configuration applies, whose effect you currently see when you open the list view.

As the name Displayed fields suggests, this field controls which data is provided in the list view. Suppose you only want to show the first property image together with the title; then enter the following in the field Displayed fields:

freitexte.objekttitel
anhaenge.anhang.#1.@gruppe
anhaenge.anhang.#1.daten.pfad
anhaenge.anhang.#1.format
anhaenge.anhang.#1.anhangtitel

Save the module settings, go to the menu item Maklermodul Setup in the left navigation and build the index with the button Build index. The index must be rebuilt after every change to the fields Displayed fields and Filter, otherwise the changes have no effect.

If you now reload the page with your list view, you will notice that the filter has disappeared. This is because the default settings no longer apply as soon as something has been entered in the field Displayed fields.

To let your customers filter by type of use, type of marketing and location, add the following lines to both fields:

objektkategorie.nutzungsart.@WAZ
objektkategorie.nutzungsart.@GEWERBE
objektkategorie.nutzungsart.@ANLAGE
objektkategorie.nutzungsart.@WOHNEN
objektkategorie.vermarktungsart.@MIETE_PACHT
objektkategorie.vermarktungsart.@LEASING
objektkategorie.vermarktungsart.@KAUF
objektkategorie.vermarktungsart.@ERBPACHT
geo.plz
geo.ort

The two fields would now look like this:

Save the module settings and rebuild the index.

You should now find filter buttons for the fields above in the list view. A button is generated for each value that occurs in at least one property.

You find further settings on the page List view configuration.

Customizing the select fields

To change the label Alle (all) in the select fields, adjust the template makler_list_filter_select.html5. You can create the template in the back end under the menu item Templates.

Replace the following line …

<option value="-1">Alle</option>

… with this line:

<option value="-1"><?= $filter['name'] ?></option>

After saving the change, the website should show the field name instead of Alle.

Settings

Sorting

You can sort the properties in the list view of your website by a specific field. The field must be listed in the module under displayed fields and in the template. Then rebuild the index.

Under Field selection you choose the field to sort by.

Under Field type you select the field type (number, floating point number or text).

Under Sorting you choose ascending or descending order.

Conditions

The field Conditions narrows down the results by certain criteria. If, for example, you want to show all two-room apartments in the town of Meißen, add the two lines from the image. Add only one condition per line and do NOT add a comma at the end of a line. Mind upper and lower case! For the changes to take effect, rebuild the index.

More examples:

Location NOT EQUAL Leipzig

geo.ort!=Leipzig

Property address released

objektadresse_freigegeben=true

Property title contains “ruhig gelegen” (only available in Maklermodul Bundle >= 2.2.0 and Maklermodul Sync Bundle >= 2.2.0)

freitexte.objekttitel=%ruhig gelegen%

Marketing type rent/lease

objektkategorie.vermarktungsart.@MIETE_PACHT=true

Marketing type purchase

objektkategorie.vermarktungsart.@KAUF=true

Image settings

Under image size, select the image mode. The options are:

• Proportional: The longer side of the image is fitted to the bounding box.
• Fit the box: The shorter side of the image is fitted to the bounding box.
• Important part: Defines an important area that is used as the image section.
• Left | Top: Image section at the top left.
• Center | Top: Image section at the top center.
• Right | Top: Image section at the top right.
• Left | Center: Image section at the center left.
• Center | Center: Image section in the center.
• Right | Center: Image section at the center right.
• Left | Bottom: Image section at the bottom left.
• Center | Bottom: Image section at the bottom center.
• Right | Bottom: Image section at the bottom right.

In the first text field next to the image mode you enter the width in pixels. In the next text field you enter the height in pixels.

You can also set your own placeholder image in case a property in the list view has no image. If no placeholder image is selected and the property has no image, a placeholder image provided by the module is shown.

Pagination

Under Number of properties you choose how many properties are shown per page.

Under Number of links you choose how many links the pagination shows. For this, enable the option Use Isotope.

Example - Use Isotope enabled:

Example - Use Isotope not enabled:

Filter only

If you enable Filter only in the options, all filter results are hidden. You then have to specify a list view to redirect to when the user clicks the button Search properties. The filter settings are passed on.

More options

With Show in sitemap navigation, the properties of this list view are also shown in the sitemap navigation. The template nav_makler_sitemap must be selected in the template settings of the sitemap navigation.

Debug shows all available field keys that can be used.

Include CSS includes the module’s own CSS in the template.

Include JavaScript includes the module’s own JavaScript in the template.

Enabling Backwards compatibility means that the old template functions are used in the list view (earlier versions <1.4.0). Rebuild the index after changing this.

Property attributes

You can define how property attributes are displayed in the filter of the list view.

You control the type, i.e. how each property attribute is output, by creating a file named data.filter.ini in the folder maklermodul in the file manager. Then rebuild the index on the Maklermodul Setup page.

Example content of data.filter.ini

flaechen.wohnflaeche = 'cssMapRange10'

The living space is then output in steps of 10.

The following output types are available

General types:

• cssMapDefault output without change
• cssMapBoolean output as a true or false button
• cssMapNumber output of prices in the format 12.000,00

Ranges

• cssMapRange1
• cssMapRange3
• cssMapRange10
• cssMapRange50
• cssMapRange100
• cssMapRange200
• cssMapRange1000
• cssMapRange10000
• cssMapRange50000
• cssMapRange100000

Available since version 1.2.0 build 16

• cssMapFloor1
• cssMapFloor3
• cssMapFloor10
• cssMapFloor50
• cssMapFloor100
• cssMapFloor200
• cssMapFloor1000
• cssMapFloor10000
• cssMapFloor50000
• cssMapFloor100000

Integrating Google Maps

Integrating Google Maps

Follow these steps to show a Google Maps map on your website.

You can also show a privacy-compliant Google Maps map. Users first see a notice that Google Maps is used and have to confirm with a click that the map may be shown. This prevents data transfer to Google if users don’t consent.

1 / Install the Google Maps extension:

To install the extension, follow these steps:

• Open the Contao Manager and log in
• Select Install packages
• Enter “dlh_googlemaps” in the search field
• Click Add package on the extension delahaye/dlh_googlemaps and then Apply changes
• Open the install tool and update the database

2 / Enter the API key in the site structure

In the site structure, enter the Google Maps API key in the website root of your site. You find the setting in the Google Maps tab. All information on creating the API key is on the Google Maps APIs website.

3 / Create a Google Maps map:

After a successful installation you should see a new menu item Google Maps under Content in the left menu. Click it and create a new map with the button “New Google Map”. You only need to enter a title; you can keep all other settings or change them as you like. Address and geo coordinates are set automatically by the real estate module.

4 / Create a module:

Then click Themes under Layout in the left menu. Click the gear icon to edit the front end modules of the theme. Now create a new module.

Give your module a meaningful title. Select Google Map as the module type. You can also use the search in the select field. In the map data tab, select the map you just created.

In the template settings tab, select the template mod_dlh_googlemaps_default_mm.

Privacy notice:

A checkbox enables or disables the privacy notice, so that data is only sent to Google once the user explicitly consents. If you leave the privacy notice field empty, the default text of the module is used. Alternatively, you can enter your own text or use our example below.

If you paste the following code in the source code view (icon <>), the privacy notice is shown on your website as in the image below.

<h3>This website uses Google Maps</h3>
<p>Click here to activate it permanently. I agree that data will be transferred to Google when using it. Note: You can revoke your consent at any time for the future by deleting the cookie dlh_googlemaps. You find detailed information on how we handle user data in our privacy policy.</p>
<p><a class="btn" href="#">Activate Google Maps</a></p>

5 / Adjusting the real estate module template

Select Templates under Layout in the left menu and edit your detail view template (makler_details_extended or makler_details_simple). If the template is not in this folder yet, create it with the button “New template”.

In the template, add the following code snippet where the map should be shown. Replace ID with the ID of the module you created (you see it at the very top when editing the module).

{{insert_module::ID}}

If the map should only be shown when the address is actually released, put the code snippet inside the following if statement.

Example of including the Google Maps map:

<?php if($this->estate->renderer('verwaltung_objekt.objektadresse_freigeben')->asText()->value(true) == true && $this->showMap == 1): ?>
    <h3>Karte</h3>
    <div class="address">
        <h4>Objektanschrift</h4>
        <?php $this->estate->renderer('geo.strasse')->asText()->value() ?> <?php $this->estate->renderer('geo.hausnummer')->asText()->value() ?><br />
        <?php $this->estate->renderer('geo.plz')->asText()->value() ?> <?php $this->estate->renderer('geo.ort')->asText()->value() ?>
    </div>

    {{insert_module::48}}

    <script>
        $(document).ready( function() {
            $("#confirm-googlemaps").click( function() {
                setMap();
            });

            $("#confirm-googlemaps .btn").click( function() {
                $("#confirm-googlemaps").trigger("click");
                return false;
            });

            var mapsCookie = "<?= \Input::cookie('dlh_googlemaps') ?>";
            if(mapsCookie != "" || $(".dlh_googlemap > div").attr("id") != "confirm-googlemaps") {
                setMap();
            }

            function setMap() {
                setTimeout( function() {
                    var geocoder = new google.maps.Geocoder();
                    var lat; var lng;
                    geocodeAddress(geocoder);
                },500);
            }

            function geocodeAddress(geocoder, resultsMap) {
                var address = "<?php $this->estate->renderer('geo.strasse')->asText()->value() ?>";
                address = address + " <?php $this->estate->renderer('geo.hausnummer')->asText()->value() ?>";
                address = address + ", <?php $this->estate->renderer('geo.ort')->asText()->value() ?>";
                geocoder.geocode({'address': address}, function(results, status) {
                    if (status === google.maps.GeocoderStatus.OK) {
                        lat = results[0].geometry.location.lat();
                        lng = results[0].geometry.location.lng();
                        setCenter(lat, lng);
                        setMarker(lat, lng);
                    }
                });
            }

            function setCenter(lat, lng) {
                gmap1.setCenter(new google.maps.LatLng(lat, lng));
            }

            function setMarker(lat, lng) {
                var gmap1_marker = new google.maps.Marker({
                    position: new google.maps.LatLng(lat, lng),
                    map: gmap1,
                    zIndex: 1
                });
            }
        });
    </script>
<?php endif; ?>

Optional: CSS adjustments

To make CSS adjustments, edit your CSS file. If you don’t have one yet, create a CSS file, e.g. style.css, and select it in the page layout under external stylesheets.

Code snippets

Below are some code snippets that show how to adjust colors, widths and heights.

Change the height of the Google Maps map:

.mod_dlh_googlemaps, .dlh_googlemap {
    height: 600px;
}

Change the privacy notice:

#confirm-googlemaps {
    background: #fff;
    color: #000;
    width: 50%;
}

Change the h3 headline:

#confirm-googlemaps h3 {
    background: #f2f2f2;
    color: #b91e1e;
}

Change the button:

#confirm-googlemaps a.btn {
    background: #d45a5a;
    color: #fff;
}

Change the button hover:

#confirm-googlemaps a.btn:hover {
    background: #b91e1e;
    color: #fff;
}

Property inquiry form

Including a simple property inquiry form

Create a new form named “Objektanfrage” (property inquiry) with the form generator. Add the fields and descriptions you need, and don’t forget a field for the property number, ideally as a hidden field.

Passing the property number

With a little JavaScript we can pass the property number to the input field. You can add the script, for example, to the detail view template (makler_details_simple or makler_details_extended).

Passing the property number to the input field with the ID “ctrl_17” with jQuery

<script>
if(typeof jQuery('.verwaltung-techn-objektnr-extern') != 'undefined')
  jQuery('#ctrl_17').val(jQuery('.verwaltung-techn-objektnr-extern .value-text').html());
</script>

Passing the property number to the input field with the ID “ctrl_17” with MooTools

<script>
if(typeof $('.verwaltung-techn-objektnr-extern') != 'undefined')
    $('#ctrl_17').set('value', $('.verwaltung-techn-objektnr-extern .value-text')[0].get('text'));
</script>

This is what the finished form can look like

Form with OpenImmo feedback XML

Form with OpenImmo feedback XML

This guide shows how to set up a property inquiry form with OpenImmo feedback XML in Contao 4 using the real estate module and the Notification Center. The goal is that property inquiries do not simply land in the inbox of the real estate software, but are shown under “Objektanfragen” (property inquiries).

The following steps assume that, in addition to the real estate module, the Notification Center is installed and the property list and the exposé are set up.

Create the property inquiry form

To set up the property inquiry form, create a new form in the form generator and name it, for example, “Anfrage Objekt”. You should also select a redirect page to which visitors are sent after submitting the form. We will create the notification later, so leave this field empty for now.

Create the form fields

Now create the fields in the form.

For the property number you can create a normal text field or a hidden field. The field name must be oobj_id.

The field names of the other fields must be exactly as in the following screenshot or the XML example after it. You don’t have to create all fields that appear in the XML example, though.

XML example:

<openimmo_feedback>
	<sender>
		<name/>
		<openimmo_anid/>
		<datum>01.01.2010</datum>
		<makler_id>12345</makler_id>
	</sender>
	<objekt>
		<portal_unique_id/>
		<portal_obj_id/>
		<anbieter_id/>
		<oobj_id>Objektnummer</oobj_id>
		<zusatz_refnr/>
		<expose_url>http:www.domain.de/expose?ID=12345</expose_url>
		<vermarktungsart>Kauf</vermarktungsart>
		<bezeichnung>Kurzbeschreibung</bezeichnung>
		<etage/>
		<whg_nr/>
		<strasse>Objekt_Strasse</strasse>
		<ort>Objekt_Ort</ort>
		<preis>Objektpreis</preis>
		<gebot/>
		<wae/>
		<interessent>
			<int_id/>
			<anrede>Herr</anrede>
			<vorname>Vorname_Interessent</vorname>
			<nachname>Nachname_Interessent</nachname>
			<firma>Firma_Interessent</firma>
			<strasse>Strasse_Interessent</strasse>
			<postfach/>
			<plz>PLZ</plz>
			<ort>Ort_Interessent</ort>
			<tel>01234/1234567</tel>
			<fax>01224/6545223</fax>
			<mobil/>
			<email>email@domain.de</email>
			<bevorzugt>EMAIL, POST oder FAX</bevorzugt>
			<wunsch>BESICHTIGUNG oder RÜCKRUF</wunsch>
			<anfrage>Anfrage-Text </anfrage>
		</interessent>
	</objekt>
</openimmo_feedback>

Place the form and fill in the property number

You can then add the form to the article of the exposé by selecting the element type Form and the corresponding form.

To make sure the form field for the property number gets the right value, we need a small piece of jQuery code. You can put the following code, for example, in a separate JavaScript file or add it in the layout under Custom JavaScript code.

<script>
jQuery(document).ready(function($) {
	if(typeof $('.verwaltung_techn-objektnr_extern') != 'undefined') {
		$('input[name="oobj_id"]').val( $('.verwaltung_techn-objektnr_extern .value-text').html() );
	}
});
</script>

This is what the finished property inquiry form could look like:

Create the OpenImmo feedback XML

Next, create a file named openimmo_feedback.xml in the file manager. It must look like the following example.

<?xml version="1.0" encoding="ISO-8859-1"?>
<openimmo_feedback>    
	<sender>        
		<name>Ihre Makler 24</name>        
		<datum>16.03.2020</datum>        
		<makler_id>5038545</makler_id>    
	</sender>    
	<objekt>        
		<oobj_id>##form_oobj_id##</oobj_id>        
		<interessent>            
			<anrede>##form_anrede##</anrede>            
			<vorname>##form_vorname##</vorname>            
			<nachname>##form_nachname##</nachname>            
			<strasse>##form_strasse##</strasse>            
			<plz>##form_plz##</plz>            
			<ort>##form_ort##</ort>            
			<tel>##form_tel##</tel>            
			<fax>##form_fax##</fax>            
			<email>##form_email##</email>            
			<bevorzugt>##form_bevorzugt##</bevorzugt>            
			<wunsch>##form_wunsch##</wunsch>            
			<anfrage>##form_anfrage##</anfrage>        
		</interessent>    
	</objekt>
</openimmo_feedback>

Create the notification

Create a notification:

For the form to be sent, create a new notification under Notification Center - Notifications and select Form submission as the notification type.

Create a message:

Then create a new message and select the gateway. If no gateway exists yet, go to Gateways in the left navigation and create one. There you can also enter SMTP data by ticking Override SMTP settings. Don’t forget to tick the checkbox to publish the message.

Create a language:

Once the gateway is selected in the message, you can add new languages with the button Manage languages. A new window opens where you can create a new language with the button at the top right.

The following steps are required (see the following screenshot):

• Select the language German and enable the fallback language checkbox
• Fill in the metadata (sender name, sender email, recipient)
• Fill in the content
  • Enter the email subject
  • Select the mode HTML and text
  • In raw text, enter e.g. ##raw_data##
  • Fill in the HTML (example at the end of this page)
• Under Attachments - Attachments from templates, select the openimmo_feedback.xml you just created

You could, for example, insert the following HTML code in the HTML field. Click the icon <> to open the source code editor and paste the HTML code. The example email is in German, as the OpenImmo format is mainly used in Germany.

<!-- BODY -->
<table class="body-wrap" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; width: 100%; background: #f5f5f5;">
<tbody>
	<tr>
		<td class="container" style="margin: 0 auto!important; display: block!important; max-width: 600px;" align="" bgcolor="#FFFFFF">
			<h1 style="margin: 20px 15px; padding: 10px; line-height: 1.1; margin-bottom: 15px; color: #000; font-size: 14px; background: #f2f2f2; font-weight: bold;">Objektanfrage</h1>
			<!-- content -->
			<div class="content" style="padding: 5px 15px;">
				<h2 style="margin: 0; padding: 5px 10px; line-height: 1.1; margin-bottom: 15px; color: #fff; font-size: 14px; background: #00a0e1;">Daten zum Objekt</h2>
				<table class="greybox obj-daten" style="margin: 0; padding: 15px; background: #f2f2f2; margin-bottom: 20px; width: 100%;" bgcolor="">
				<tbody>
					<tr style="margin: 0; padding: 0;">
						<td style="margin: 0; padding: 0;">
							<p style="margin: 0; padding: 0; color: #000; margin-bottom: 5px; font-weight: normal; font-size: 14px; line-height: 1.6;"><label style="margin: 0; padding: 0; font-weight: bold; color: #000; display: inline-block;">Objekt-Nr:</label> ##form_oobj_id##</p>
						</td>
					</tr>
				</tbody>
				</table>
				<h2 style="margin: 0; padding: 5px 10px; line-height: 1.1; margin-bottom: 15px; color: #fff; font-size: 14px; background: #00a0e1;">Anmerkungen/Fragen</h2>
				<table class="greybox" style="margin: 0; padding: 15px; background: #f2f2f2; margin-bottom: 20px; width: 100%;" bgcolor="">
				<tbody>
					<tr style="margin: 0; padding: 0;">
						<td style="margin: 0; padding: 0;">
							<p style="margin: 0; padding: 0; color: #000; margin-bottom: 5px; font-weight: normal; font-size: 14px; line-height: 1.6;">##form_anfrage##</p>
					</td>
					</tr>
				</tbody>
				</table>
				<h2 style="margin: 0; padding: 5px 10px; line-height: 1.1; margin-bottom: 15px; color: #fff; font-size: 14px; background: #00a0e1;">Ihre Angaben</h2>
				<table class="greybox" style="margin: 0; padding: 15px; background: #f2f2f2; margin-bottom: 20px; width: 100%;" bgcolor="">
				<tbody>
					<tr style="margin: 0; padding: 0;">
						<td style="margin: 0; padding: 0;">
							<p style="margin: 0; padding: 0; color: #000; margin-bottom: 5px; font-weight: normal; font-size: 14px; line-height: 1.6;">
							{if form_firma!=""} <strong>Firma:</strong> ##form_firma##<br>{endif}
							<strong>Name:</strong> ##form_vorname## ##form_nachname##<br>
							<strong>Straße:</strong> ##form_strasse##<br>
							<strong>PLZ/Ort:</strong>##form_plz## ##form_ort##<br>
							<strong>E-Mail:</strong> ##form_email##<br>
							<strong>Tel:</strong> ##form_tel##<br>
							{if form_fax!=""}<strong>Fax:</strong> ##form_fax##<br>{endif}
							{if form_wunsch!=""}Ich bitte um einen {if form_wunsch=="BESICHTIGUNG"}Besichtigungstermin{endif}{if form_wunsch=="RÜCKRUF"}Rückruf{endif}<br>{endif}
							{if form_bevorzugt!=""}Ich bitte um Übersendung eines Exposés per {if form_bevorzugt=="EMAIL"}E-Mail{endif}{if form_bevorzugt=="POST"}Post{endif}{if form_bevorzugt=="FAX"}Fax{endif}<br>{endif} 
							{if form_AGBs!=""}Ich bin damit einverstanden, dass XXX mich kontaktiert (telefonisch, per Post oder Email) und meine Daten für interne Zwecke speichert. Ich habe die AGB und die Datenschutzerklärung gelesen. Mit den AGB und der Datenschutzerklärung von XXX erkläre ich mich hiermit ausdrücklich einverstanden.{endif}
							</p>
						</td>
					</tr>
				</tbody>
				</table>
			</div>
			<!-- /content -->
		</td>
	</tr>
</tbody>
</table>
<!-- /BODY -->

If everything has been set up according to this guide, the OpenImmo feedback XML form should now work. :)

Displaying images

Displaying images

Here you find various code snippets that you can add to the detail view template to display images.

Output all images:

<?php foreach ($this->estate->attachments()->startAt(0) as $attachment) : ?>
    <?php $attachment->size(600,350)->render() ?>
<?php endforeach; ?>

This snippet outputs all attachments of the group BILD. With startAt() you can specify any start position. With size() you specify the image width and height.

Output a specific number of images:

<?php foreach ($this->estate->attachments()->range(0,3) as $attachment) : ?>
    <?php $attachment->size(600,350)->render() ?>
<?php endforeach; ?>

With range() you specify a start position (starting at 0) and the length. For example, range(0,3) outputs 3 images starting at position 0.

Output images of one or more groups:

<?php foreach ($this->estate->attachments()->startAt(0) as $attachment) : ?>
    <?php $attachment->group("BILD,GRUNDRISS,AUSSENANSICHTEN,INNENANSICHTEN,PANORAMA")->size(600,350)->render() ?>
<?php endforeach; ?>

With group() you specify attachments of a certain group. Enter several groups comma-separated.

Header image with headline

Header image with headline

1 / Create a module:

Under Themes and Modules in the theme of your website, create a new module.

Select the module type “MaklerModul Kopfbild” (header image). If the property title should be shown as the headline, select the option “Show headline”. Alternatively, you can enter your own headline that replaces the property title in the header image (the option “Show headline” must be selected). The header image can be shown either as a normal image or as a background image.

You can also set your own placeholder image for the header image in case a property has no image. If no placeholder image is selected and the property has no image, a placeholder image provided by the module is shown.

2 / Create a content element:

You can also create the header image as a content element in an article. Select MaklerModul Kopfbild under pdirMaklermodul as the element type. The content element offers exactly the same settings as the module.

3 / This is what the finished header image can look like: