Gutenberg Immobiliendepot

Geändert am Fr, 14 Feb um 9:13 VORMITTAGS

Inhaltsverzeichnis

Nutzen / Funktion

Mit dieser Funktion werden Eigentümer an das Unternehmen gebunden. Durch die Nutzung eines Bewertungstools wie z.B. dem „Akquise-Generator“ auf Ihrer Webseite können Eigentümer eine Bewertung Ihrer Objekte anfragen. Dafür können entweder eigene Daten oder automatische Werte von iib, PriceHubble oder Sprengnetter verwendet werden. Die Angaben zur Immobilie werden direkt im CRM-System des Maklers und auf der Webseite gespeichert. Über den Login-Bereich der Webseite hat der Kunde Zugang zu seinem individuellen Immobiliendepot. Dort ist es ihm jederzeit möglich die Wertermittlung und Marktdaten zu seinen Immobilien einzusehen oder einzelne Immobilien aus dem Depot wieder zu löschen. Alternativ können die Daten im Immobiliendepot auch über das CRM-System selbst aktualisiert werden.

Voraussetzungen

Voraussetzung ist, dass Sie Gutenberg aktiv haben und das Gutenberg Benutzerkonto verwenden. Hier aktivieren Sie entsprechend im Benutzermenü den Eintrag für das Immobiliendepot. Anschließend können Sie das Standard-Template verwenden oder einzelne Teile oder Felder im Template entsprechend Ihren Wünsche austauschen bzw. ersetzen. Optional können Sie die Werte aus Wertermittlungen oder anderen Preisermittlungstools zu Immobilie ausgeben. Die Informationen aus den Wertermittlungen müssen über Ihre CRM-Software oder direkt per API in die Immobilie bzw. das Depot geschrieben werden.

Template

Die Darstellung des Immobiliendepots können Sie über Templates steuern. Hier haben Sie die Möglichkeit alle Felder, die in der Immobilie oder im Benutzer vorhanden sind darzustellen.

Bearbeiten Sie die JSON Konfiguration und ergänzen Sie entsprechend an den passenden Stellen die IDs aus den HTML-Templates. Folgende Felder stehen in der Konfiguration zur Verfügung:

new_depot_shortcode	Hier kann der Shortcode des Akquise-Generator übergeben werden. Bitte achten Sie auf das korrekte "escapen" der Zeichen. Beispiel: "new_depot_shortcode" : "[wertermittlungv2 id=\"904133\"]"
user_has_no_prop	Dieses Template wird angezeigt, wenn der Benutzer noch keine Immobilien in seinem Depot hat.
user_depot_wrapper	Dieses Templates wird als Gerüst um alle einzelnen Immobilien im Depot gelegt.
user_single_depot_prop	Dieses Template ist das Gerüst einer einzelnen Immobilie.
user_depot_before	Dieses Template wird vor den Immobilien innerhalb des "wrappers" angezeigt.
user_depot_after	Dieses Template wird nach den Immobilien innerhalb des "wrappers" angezeigt.

In den Beispielen finden Sie den Grundaufbau der Templates und können diese adaptieren.

Beispiele

Hier finden Sie Beispiele für einzelne Templates.

Beispiel für das Einbinden eines "Neue Immobilie hinzufügen Buttons" in Verbindung mit dem Akquise-Generator. Natürlich kann auch ein anderes Tool eingebunden werden. Bitte beachten Sie, dass das Wertermittlungstool entsprechend auf der Seite in einem Dialog platziert werden muss, damit dieser Code funktionieren kann.

<div style="margin-top: 40px;display: flex;flex-direction: row;flex-wrap: nowrap;align-content: center;justify-content: center;align-items: center;" class="ben_depot_add_new_prop_wrapper">
<div onclick="document.querySelector( '.tmp-hidden-wertv2-new' ).showModal();document.querySelector('#mw-ben-dialog-depot').close();document.querySelector('.active-prop-type-wrapper').addEventListener('click', function() {
    document.querySelector( '.tmp-hidden-wertv2-new' ).close();
})" style="align-content: center;
    border-radius: 4px;
    padding: 4px;
    background-color: var(--mw-det-main-color);
    width: 40%;
    color: white;
    font-size: 16px;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    font-weight: 600 !important;
    letter-spacing: .5px;
    line-height: 23px;
    text-transform: uppercase;" class="tmp_add_new_depot_prop" >Immobilie hinzufügen</div>
</div>
<div class="ben-depot-after-wrapper">
    <div class="ben-depot-calculated-values-wrapper">
        <div class="ben-depot-calculated-value min">
            <div class="single-calculated-label">
                Minimaler Gesamtwert
            </div>
            <div class="single-calculated-value js-calc-min-value">
                wird berechnet..
            </div>
        </div>
        <div class="ben-depot-calculated-value med">
        </div>
        <div class="ben-depot-calculated-value max">
            <div class="single-calculated-label">
                Maximaler Gesamtwert
            </div>
            <div class="single-calculated-value js-calc-max-value">
                wird berechnet..
            </div>
        </div>
    </div>
</div>

new_depot_shortcode

Hier kann ein Akquise-Generator Shortcode hinterlegt werden. Dieser kann dann im Standard über die Klasse "tmp_add_new_depot_prop" angesteuert werden.

user_has_no_prop

<div class="ben-depot-user-has-no-prop">
    <span>Sie haben noch kein Depot erstellt.</span>
</div>

user_depot_wrapper

<div class="ben-depot-whole-wrapper">
  {before_elm}
  <div class="ben-depot-all-single-prop-wrapper" id="MwSortableDepotProps">{all_single_props}</div>
  {after_elm}
</div>

user_single_depot_prop

<div class="ben-depot-single-prop-wrapper" data-depot_sort="{post_id}">
    <div class="ben-depot-single-prop-img-wrapper"><a href="{mw_pricehubble_dossier_link_page_builder}" target="_blank">{picture}</a></div>
    <div class="ben-depot-single-prop-data-wrapper">
        <div class="address-data-wrapper">
            <span>{objektart_raw}</span> | <span>{plz}</span> <span>{ort}</span>
        </div>
        <div class="single-data-wrapper">
            <div class="label-container">Baujahr</div>
            <div class="value-container">{baujahr}</div>
        </div>
        <div class="single-data-wrapper">
            <div class="label-container">Wohnfläche</div>
            <div class="value-container">{wohnflaecheformatarea}</div>
        </div>
        <div class="single-data-wrapper">
            <div class="label-container">Zimmer</div>
            <div class="value-container">{anzahl_zimmerformatclean}</div>
        </div>
    </div>
    <div class="ben-depot-marked-value">
        <div class="single-marked-value-wrapper min">
            <div class="label-container">Geschätzter minimaler Marktwert</div>
            <div data-min-price="{mw_pricehubble_min_price}" class="value-container">{mw_pricehubble_min_priceformatcurrency}</div>
        </div>
        <div class="single-marked-value-wrapper med">
            <div class="label-container">Geschätzter Marktwert</div>
            <div data-price="{mw_pricehubble_price}" class="value-container">{mw_pricehubble_priceformatcurrency}</div>
        </div>
        <div class="single-marked-value-wrapper max">
            <div class="label-container">Geschätzter maximaler Marktwert</div>
            <div data-max-price="{mw_pricehubble_max_price}" class="value-container">{mw_pricehubble_max_priceformatcurrency}</div>
        </div>
    </div>
    <div class="ben-depot-single-prop-positioning">
        <svg class="depot-sort-handle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 399.07 399.07" xml:space="preserve"><g><path d="M365.083,74.011L348.113,57.04c-3.906-3.904-10.236-3.904-14.143,0c-3.873,3.873-3.899,10.129-0.091,14.042h-22.365c-5.522,0-10,4.477-10,10c0,5.523,4.478,10,10,10h22.365c-3.809,3.913-3.782,10.169,0.091,14.042c1.953,1.952,4.512,2.929,7.071,2.929c2.56,0,5.118-0.977,7.071-2.929l16.971-16.971C368.988,84.248,368.988,77.916,365.083,74.011z"/><path d="M225.747,105.124c1.953,1.952,4.512,2.929,7.071,2.929c2.56,0,5.118-0.977,7.071-2.929c3.873-3.873,3.899-10.129,0.091-14.042h22.365c5.522,0,10-4.477,10-10c0-5.523-4.478-10-10-10h-22.365c3.809-3.913,3.782-10.169-0.091-14.042c-3.906-3.904-10.236-3.904-14.143,0l-16.971,16.971c-3.905,3.905-3.905,10.237,0,14.143L225.747,105.124z"/><path d="M286.93,95.666c-5.522,0-10,4.477-10,10v22.365c-3.913-3.809-10.168-3.782-14.042,0.091c-3.05,3.905-3.905,10.237,0,14.143l16.971,16.971c1.953,1.953,4.512,2.929,7.071,2.929c2.56,0,5.118-0.976,7.071-2.929l16.971-16.971c3.905-3.905,3.905-10.237,0-14.143c-3.874-3.873-10.129-3.9-14.042-0.091v-22.365C296.93,100.143,292.452,95.666,286.93,95.666z"/><path d="M276.93,34.133v22.365c0,5.523,4.478,10,10,10c5.522,0,10-4.477,10-10V34.133c1.94,1.889,4.453,2.838,6.971,2.838c2.56,0,5.118-0.976,7.071-2.929c3.905-3.905,3.905-10.237,0-14.143L294.001,2.929c-3.906-3.905-10.236-3.905-14.142,0L262.888,19.9c-3.905,3.905-3.905,10.237,0,14.143C266.762,37.915,273.017,37.942,276.93,34.133z"/><path d="M276.403,184.847c-5.572,0-11.22,1.072-16.508,3.065c-7.351-14.431-22.344-24.338-39.604-24.338c-6.152,0-12.015,1.166-17.344,3.271c-7.494-14.005-22.274-23.558-39.244-23.558c-4.251,0-8.414,0.594-12.394,1.743c0.004-4.974,0.008-10.103,0.012-15.225l0.028-39.856c0.008-10.637,0.011-15.562-0.033-18.109h0.043c0-22.711-19.849-41.188-44.246-41.188c-24.521,0-44.471,19.95-44.471,44.472v135.569c-16.375,5.479-30.83,20.593-31.436,42.169c-0.949,33.752,1.816,76.462,31.893,107.396c25.391,26.114,65.127,38.809,121.482,38.809c50.684,0,88.169-14.909,111.414-44.311c16.326-20.651,24.955-48.48,24.955-80.48l-0.078-44.995C320.873,204.797,300.924,184.847,276.403,184.847z M184.582,379.07c-119.311,0-135.217-60.478-133.383-125.644c0.441-15.717,13.953-25,25-25v28.823c0,3.625,2.514,4.047,3.264,4.047s3.18-0.412,3.18-4.038c0-3.499,0-182.132,0-182.132c0-13.515,10.955-24.472,24.471-24.472c12.402,0,24.246,8.881,24.246,21.188c0.008,0.045-0.064,89.86-0.076,111.957c-0.002,0.046-0.014,0.089-0.014,0.135v4.617c0,2.201,1.785,3.985,3.986,3.985c2.199,0,3.984-1.784,3.984-3.985v-1.194c0.217-13.328,11.082-24.067,24.463-24.067c13.514,0,24.473,10.957,24.473,24.473l0.018,17.721c0,2.168,1.758,3.925,3.926,3.925c2.166,0,3.924-1.757,3.924-3.925l-0.008-1.014c0-12.305,11.955-20.894,24.256-20.894c13.516,0,24.422,10.956,24.422,24.472l0.049,17.937c0,2.109,1.709,3.819,3.818,3.819c2.109,0,3.818-1.71,3.818-3.819l-0.014-1.365c0-11.19,12.109-19.771,24.018-19.771c13.514,0,24.471,10.957,24.471,24.472l0.078,44.96C300.951,316.094,284.69,379.07,184.582,379.07z"/></g></svg>
    </div>
</div>

user_depot_before

<div class="ben-depot-before-wrapper">
    <h2>Mein Immobiliendepot</h2>
</div>

user_depot_after

<div class="ben-depot-after-wrapper">
    <div class="ben-depot-calculated-values-wrapper">
        <div class="ben-depot-calculated-value min">
            <div class="single-calculated-label">
                Gesamter minimaler Marktwert
            </div>
            <div class="single-calculated-value js-calc-min-value">
                wird berechnet..
            </div>
        </div>
        <div class="ben-depot-calculated-value med">
            <div class="single-calculated-label">
                Gesamter Marktwert
            </div>
            <div class="single-calculated-value js-calc-value">
                wird berechnet..
            </div>
        </div>
        <div class="ben-depot-calculated-value max">
            <div class="single-calculated-label">
                Gesamter maximaler Marktwert
            </div>
            <div class="single-calculated-value js-calc-max-value">
                wird berechnet..
            </div>
        </div>
    </div>
</div>

Berechnung

Im Depot bzw. im Template haben Sie noch die Möglichkeit Werte aus dem Depot zusammenzurechnen, um einen Gesamtdepotwert anzuzeigen. Verwenden Sie dafür "data-min-price", "data-max-price" und "data-price" im Template. Bitte achten Sie darauf, dass die Werte von Sonderzeichen wie einem "€" befreit sind. Für die Anzeige der Zusammenrechnung verwenden Sie "js-calc-min-value", "js-calc-max-value" und "js-calc-value". Alle Versionen können Sie sich auch in den HTML-Beispielen ansehen.