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": "[e-mail]",
      "phone": "030 123 456 89",
      "avatarUrl": "https://images.propstack.de/..."
    },
    "title": "",
    "courtage": "3,57% inkl. Mwst.",
    "courtageNote": "Die Courtage beträgt für beide Parteien (Eigentümer und Käufer) jeweils die gleiche Höhe auf den beurkundeten Kaufpreis inkl. der gesetzlichen Umsatzsteuer",
    "subHeadline": "...",
    "tagline": "...",
    "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...",
    "longDescriptionNote": "",
    "longFurnishingNote": "",
    "longLocationNote": "",
    "constructionYear": 2018,
    "showUnitsOnLandingPage": true,
    "enableLinkingToUnitsLp": true,
    "properties": [
      {
        "objectType": "LIVING",
        "rsType": "APARTMENT",
        "unitId": "WE 01",
        "categoryLabel": "Etagenwohnung",
        "floor": "1",
        "floorLabel": "1. OG",
        "numberOfFloors": 5,
        "numberOfRooms": 3.0,
        "numberOfParkingSpaces": 1,
        "numberOfBedRooms": 2,
        "livingSpace": 104.98,
        "propertySpaceValue": 104.98,
        "usableFloorSpace": null,
        "minDivisible": null,
        "plotArea": null,
        "rentSubsidy": 320,
        "rented": false,
        "baseRent": null,
        "price": 549000.0,
        "pricePerSqm": 5229.57,
        "titleImageUrl": "https://...",
        "floorplans": [
          {
            "url": "...",
            "title": "Grundriss.pdf"
          }
        ],
        "propertyStatus": {
          "name": "Verkauft",
          "nonpublic": true
        },
        "lp_url": "https://crm.propstack.de/..."
      }
    ],
    "images": [
      {
        "photoUrl": "https://images.propstack.de/...",
        "title": "Visualisierung Projekt"
      },
      {
        "photoUrl": "https://images.propstack.de/...",
        "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"
    }
  },
  "broker": {
    "id": "4010",
    "name": "Lars Heckmann",
    "email": "[e-mail]",
    "phone": "030 123 456 89",
    "avatarUrl": "https://images.propstack.de/..."
  },
  "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 }}

Ansprechpartner: Für den Absender der E-Mail nutzt man {{ broker.* }} und für den Projekt-Betreuer {{ project.broker.* }}.

Ein Beispiel HTML-Template findest du hier:

20KB

project.html