Die Webseite vorbereiten

Sie erfahren hier wie sie in vier einfachen Schritten ausgewählte Produkte aus dem swisstopo Onlineshop manuell in Ihre Webseite integrieren können.

1. Einbinden des JavaScripts

Auf jeder Seite, in welcher die Produkte von swisstopo dargestellt werden, muss eine Javascript Datei eingebunden werden. Dies wird durch Kopieren des folgenden "Schnipsels" in den Kopfbereich (<head>) der Webseite erreicht: 

<script language="javascript" 
   src="http://www.toposhop.admin.ch/static/javascripts/products/productList.js" 
   type="text/javascript">
</script>
   
Neuer Code ab dem 1. Januar 2017
<script language="javascript" 
   src="https://cms.geo.admin.ch/www.swisstopo.admin.ch/shop/swisstopoproducts/js/ShopProductList.js" 
   type="text/javascript">
</script>
2. Definition einer Format-Template

Um die Daten in einem bestehenden Layout möglichst flexibel einzubinden, wird ein Layout mit den gewünschten Platzhaltern erstellt. Dieses Layout wird pro Produkt angewendet und ausgegeben. Die Platzhalter sind durch eckige Klammern [ ] gekennzeichnet. Welche Attribute verwendet werden können finden Sie im Abschnitt «Verfügbare Attribute». 

var formatTemplate =
   '<tr>' +
      '<td>[product.titleDe]</td>' +
      '<td>[product.descriptionDe]</td>' +
      '<td>[product.price]</td>' +
      '<td>[product.releaseDate]</td>' +
      '<td><a href="#">Bestellen</a></td>' +
   '</tr>';
3. Aufruf der JavaScript Funktion

Um die Daten von swisstopo zu laden wird die JavaScript-Methode getProducts() aufgerufen. Diese lädt die gewünschten Produktedaten im Hintergrund ohne den Seitenaufbau zu blockieren (Ajax). Damit die Funktion beim Seitenaufbau aufgerufen wird, muss diese beim load-listener von window registriert werden. Dies geschieht über die Anweisung window.onload=getProducts(...).
Die Funktion erwartet vier Parameter:

  1. Version : Float Dient der Versionierung der Schnittstelle
  2. Template : String Hier wird der definierte String (in unserem Beispiel der String «formatTemplate» übergeben. In JavaScript wird dieser Block n-mal in den outputContainer gerendert.
  3. Produktegruppe(n) : String[ ]
  4. Produkt(e) : String[ ]

window.onload=getProducts(1.0, formatTemplate, [],[]);

Neuer Code ab dem 1. Januar 2017
window.onload=getProducts(2.0, formatTemplate, [],[]);
4. Definition des Containers

Als letzer Schritt muss noch ein sogenannter Container erstellt werden. Der Inhalt dieses Containers wird schliesslich die Auflistung der Produkte sein. Typischerweise ist ein Container ein HTML <div> Element, kann wie in untenstehendem Beispiel auch ein <tbody> Element sein. Voraussetzung ist, dass dem Element die id=”productOutputContainer” vergeben wird. Anhand dieser id wird der Container aus dem JavaScript Code referenziert. 

<div id="productOutputContainer"></div>
<tbody id="productOutputContainer"></tbody>