Intégration d'un header & footer dynamique

Vous pouvez ajouter un header/footer dynamique via un script javascript externe que nous appelons sur le store locator.

Exemple de CodePen : https://codepen.io/warck/pen/rNaPvgX

Comment tester le fonctionnement sur CodePen ?

Il faut prévoir une balise HTML pour chacune des sections que vous souhaitez implémenter (ex: une <header> et une <footer>), en pensant bien à charger les librairies nécessaires avant les balises à remplir, et à appeler le js embarquant votre contenu après ces dernières. Vous trouverez, ci-dessous, un exemple fonctionnel.

<header id="dynamic-header"></header>
<footer id="dynamic-footer"></footer>

<script src="//path/to/client/script.js"></script>

Ci-dessous, vous trouverez un exemple de code js permettant la population des balises sus-mentionnées.

(function() {
 var header = 'HEADER CONTENT';
 var footer = 'FOOTER CONTENT';

 var headerContainer = document.querySelector('#dynamic-header');
 if (headerContainer && header) {
     headerContainer.innerHTML = header;
 }

 var footerContainer = document.querySelector('#dynamic-footer');
 if (footerContainer && footer) {
     footerContainer.innerHTML = footer;
 }

 // If you need external stylesheets
 var link = document.createElement('link');
 link.rel = 'stylesheet';
 link.href = '//path/to/external/stylesheet.css';
 document.head.appendChild(link);

 // If you need external scripts
 var script = document.createElement('script');
 script.src = '//path/to/external/script.js';
 document.body.appendChild(script);
})();

Attention : le style que vous pouvez injecter de cette manière pourra potentiellement
impacter notre propre style, il est donc fondamental que vous soyez prudents sur les
overwrites que vous mettrez en place, et les encapsuliez proprement. C’est
pourquoi vous devez vous conformer à ce qui suit :

Il est OBLIGATOIRE de :

• L’ensemble de votre css doit étre préfixé avec les deux ID :

#dynamic-header

#dynamic-footer

Exemple :

#dynamic-header .myHeaderClass {...}
#dynamic-footer .myFooterClass {...}

Il est INTERDIT de :

• surcharger le style des balises (html, body, div, etc...)
• utiliser des

  !important

• utiliser des sélecteurs trop vagues et ambigus (utiliser la syntaxe BEM si possible)
• utiliser des balises orientées SEO (aucun heading (H1, H2, H3,…)).

De plus, nous apportons un soin tout particulier à l’optimisation SEO et Accessibilité
dans nos store locator, nous vous invitons donc à faire de même dans les contenus
que vous nous fournissez, afin de garantir une continuité dans la qualité de votre
produit.

Qualité et performances

Nous ne pourrons en aucun cas être tenu responsables des contenus sémantiques
et techniques que vous injecterez dans votre store locator en utilisant cette solution.

La performance et notamment le temps de réponse du Store locator sera fortement impacté, nous vous conseillons de choisir la performance de notre Header footer Optimum :

• Un large choix d'options à afficher
• Performance web garantie ( vitesse de chargement )
• Optimisation SEO
• Responsive ( mobile friendly )
• Conforme aux niveaux A et AA de la norme internationale WCAG 2.1 en matière d’accessibilité numérique.
• Mise à jour incluse durant toute la vie du store locator ( liens menus, zones d'affichages...)