Préparer votre site web

Ici, vous apprendrez comment intégrer manuellement les produits sélectionnés du shop en ligne swisstopo dans votre site en quatre étapes simples.

1. Lier JavaScript

Un fichier Javascript doit être intégré dans chaque page présentant des produits de swisstopo. Ceci se fait en copiant le «talon» suivant dans l'en-tête (<head>) du site web: 

<script language="javascript" 
   src="http://www.toposhop.admin.ch/static/javascripts/products/productList.js" 
   type="text/javascript">
</script>
   
Nouveau code dès le 1er janvier 2017
<script language="javascript" 
   src="https://cms.geo.admin.ch/www.swisstopo.admin.ch/shop/swisstopoproducts/js/ShopProductList.js" 
   type="text/javascript">
</script>
2. Définition d'un modèle de format

Pour intégrer les données dans une maquette existante de la manière la plus flexible possible, on réalise une mise en page comprenant les substituts désirés. Cette maquette est utilisée et éditée pour chaque produit. Les substituts sont délimités au moyen de crochets []. Au chapitre «Attributs de produit», vous trouverez quels sont les attributs pouvant être utilisés. 

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. Appeler la fonction JavaScript

Pour charger les données de swisstopo, il faut appeler la fonction JavaScript-Methode getProducts() .Celle-ci charge les données du produit en arrière-plan sans bloquer la superstructure latérale (Ajax). Pour permettre d'appeler la fonction au niveau de la superstructure latérale, celle-ci doit être enregistrée dans le listeur de chargement (loadlistener). Ceci se fait via l'instruction window.onload=getProducts(...).
La fonction exige quatre paramètres:

  1. Version : Float sert à réaliser la version de l'interface
  2. Modèle: chaîne de caractères, ici se transmet la chaîne de caractères définie (dans notre exemple la chaîne «modèle format». Dans JavaScript, ce bloc est x fois attribué en arrière-plan dans le conteneur de sortie.
  3. Groupe(s) de produits: chaîne de caractères[]
  4. Produit(s): chaîne de caractères[]

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

Nouveau code dès le 1er janvier 2017
window.onload=getProducts(2.0, formatTemplate, [],[]);
4. Définition du conteneur

La dernière étape consiste à réaliser ce que l'on appelle un «conteneur». Le contenu de ce conteneur sera finalement la liste de produits. Un conteneur typique est un élément <div> HTML mais ça peut également être un élément <tbody> comme dans l'exemple ci-dessous. La condition est qu'il faut attribuer à l'élément la même id=”productOutputContainer”. Cette ID permet de référencer le conteneur à partir du code JavaScript. 

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