Projekt Landing-Pages

Wie man ein eigenes Template für Projekt Landing-Pages erstellt

Ein Template für eine Projekt Landing-Page ist eine einfache HTML-Datei, dessen Inhalt man nimmt und in Propstack eingibt.

Damit die Templates dynamisch sind, d.h. je nach Projekt andere Daten anzeigen, muss eine Template-Engine benutzt werden. Propstack nutzt dafür Liquid von Shopify.

Im Template hat man Zugriff auf folgende Daten (in JSON-Format dargestellt):

{
"project": {
"id": "123",
"name": "Templiner Park",
"street": "Musterstraße",
"houseNumber": "12",
"zipCode": "12345",
"city": "Berlin",
"country": "DEU",
"lat": 50.7010491,
"lng": 12.6461906,
"logoUrl": null,
"broker": {
"id": "4010",
"name": "Lars Heckmann",
"email": "heckmann@muster-immobilien.de",
"phone": "030 123 456 89",
"avatarUrl": "https://propstack.s3.eu-central-1.amazonaws.com/photos/..."
},
"title": "",
"descriptionNote": "Phosfluorescently incentivize orthogonal ROI with highly efficient e-business.\n\nMonotonectally formulate equity invested mindshare...",
"furnishingNote": "",
"locationNote": "Authoritatively generate customer directed interfaces before visionary solutions.\n\nDramatically procrastinate parallel supply chains...",
"constructionYear": 2018,
"showUnitsOnLandingPage": true,
"properties": [
{
"objectType": "LIVING",
"rsType": "APARTMENT",
"unitId": "WE 01",
"floor": "1",
"floorLabel": "1. OG",
"numberOfRooms": 3.0,
"livingSpace": 104.98,
"rented": false,
"price": 549000.0,
"pricePerSqm": 5229.57,
"floorplans": [
{
"url": "...",
"title": "Grundriss.pdf"
}
],
"propertyStatus": {
"name": "Verkauft",
"nonpublic": true
}
}
],
"images": [
{
"photoUrl": "https://propstack.s3.eu-central-1.amazonaws.com/photos/...",
"title": "Visualisierung Projekt"
},
{
"photoUrl": "https://propstack.s3.eu-central-1.amazonaws.com/photos/...",
"title": "Wohnzimmer Beispielwohnung"
}
],
"documents": [
{
"title": "Energieausweis",
"url": "...",
"isExposee": false
},
{
"title": "Exposé.pdf",
"url": "...",
"isExposee": true
}
],
"links": [
{
"url": "...",
"title": "360° Rundgang Beispielwohnung",
"isEmbedable": true
},
{
"url": "...",
"title": "Mit welchem Budget können Sie rechnen?",
"isEmbedable": false
}
],
"shop": {
"logoUrl": "...",
"imprintNote": null,
"termsNote": null,
"privacyNote": null,
"homepage": "http://muster-immobilien.de",
"name": "Muster Immobilien GmbH"
}
},
"locale": "de",
"t": {
"navi": {
"description": "Objektdaten",
"documents": "Dokumente",
"units": "Einheiten",
"images": "Bilder",
"location": "Lage"
},
"units": "Einheiten",
"size": "Größe",
"rented": "Vermietet",
"rooms": "Zimmer",
"description": "Beschreibung",
"furnishing": "Ausstattung",
"images": "Bilder",
"documents": "Dokumente",
"links": "Links",
"constructionYear": "Baujahr",
"unit": "Einheit",
"floor": "Etage",
"price": "Preis",
"status": "Status",
"floorplan": "Grundriss",
"location": "Lage",
"allUnits": "Alle Einheiten anzeigen",
"available": "Verfügbar",
"sold": "Verkauft",
"contactForm": {
"title": "Gerne beraten wir Sie persönlich",
"salutation": "Anrede",
"salutationMr": "Herr",
"salutationMs": "Frau",
"firstName": "Vorname",
"lastName": "Nachname",
"email": "E-Mail",
"company": "Firma",
"phone": "Telefon",
"body": "Nachricht",
"send": "Abschicken",
"success": {
"title": "Vielen Dank",
"desc": "Wir freuen uns über Ihr Interesse.\nIhr Anliegen werden wir so schnell wie möglich bearbeiten.",
"back": "Zurück"
}
}
}
}

Wenn man nun z.B. im Template den Titel des Projektes anzeigen möchte, gibt man folgendes an: {{ project.title }}

Ein Beispiel HTML-Template findest du hier: