Gutenberg Immobiliendepot

Geändert am Do, 14 Nov um 11:31 VORMITTAGS

Inhaltsverzeichnis

Voraussetzungen

Ausgangsposition ist, dass Sie Gutenberg aktiv haben, sowie 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 eigene Teile einzeln austauschen oder andere Felder im Template entsprechend Ihrer Wünsche ersetzen. Optional können Sie die Werte aus Wertermittlungen oder anderen Preisermittlungstools zu Immobilie ausgeben. Diese müssen entsprechend die Informationen über Ihre CRM-Software oder direkt per API in die Immobilie bzw. das Depot schreiben.

Template

Die Darstellung das Immobiliendepot 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 an den passenden Stellen entsprechend die IDs aus den HTML-Templates. Folgende Felder gibt es in der Konfiguration:

new_depot_shortcode	Hier kann der Akquisegeneator Shortcode mitgegeben 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 sorgt für 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 Verbindungen 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 Akquisegenerator 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.