Preparing your website

In this section, you can find out how to incorporate selected products from the swisstopo onlineshop into your website manually, in four easy steps.

1. Integrating the JavaScript

A JavaScript file must be integrated into each page on which you would like the swisstopo products to be displayed. You can do this by copying the following “snippet” and pasting it into the header (<head>) of the website: 

<script language="javascript" 
   src="http://www.toposhop.admin.ch/static/javascripts/products/productList.js" 
   type="text/javascript">
</script>
   
New code from January 1st 2017
<script language="javascript" 
   src="http://www.swisstopoproducts.ch/javascript/productList.js" 
   type="text/javascript">
</script>
2. Defining a format template

To insert the data into an existing layout in the most flexible way possible, a layout will need to be created with the necessary placeholders. This layout will be used and displayed for each product. The placeholders are indicated by square brackets []. You can find out which attributes can be used here in the section «Available attributes». 

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. Calling up the JavaScript function

To load the data from swisstopo, you will need to call up the JavaScript method getProducts(). This loads the required product data in the background without preventing the page from loading (Ajax). For the function to be called up while the page is loading, it must be integrated into a Windows load listener. This can be done using the following command: window.onload=getProducts(...).
The function requires four parameters:

  1. Version: float This is for versioning the interface
  2. Template: string. This presents the defined string (in our example, this is the “formatTemplate” string). In JavaScript, this block is rendered n times in the outputContainer.
  3. Product group(s): string[ ]
  4. Product(s): string[ ]

window.onload=getProducts(1.0, formatTemplate, [],[]);
4. Defining the container

The final step involves creating what is known as a “container”. The content of this container will ultimately be the list of products. A typical container is an HTML <div> element, although in the example below it can also be a <tbody> element. The element must be assigned the following identification: id=”productOutputContainer”. This ID enables the container to be referenced from the JavaScript code. 

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