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/Kbdzww

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.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

<script src="https://www.orange.cm/2/mjs/particulier-fr.js"></script>

Ci-dessous, vous trouverez un exemple de code js permettant la population des balises sus-mentionnées, utilisant jQuery en dépendance. Notre solution embarquant sa propre version de jQuery, vous n’avez pas à la rajouter.

(function() {

    var $headermenu = $(
        '<link href="URL_TO_CSS_1.css" rel="stylesheet" type="text/css">' +
        '<link href="URL_TO_CSS_2.css" rel="stylesheet" type="text/css">' +
        '<header id="etn-header">CONTENU HEADER</header>'
    );

    var $footermenu = $(
        '<footer id="footer-dynamic">CONTENU FOOTER</footer>'
    );

    $("#header-dynamic").append( $headermenu );

    if($("#footer-dynamic")) $("#footer-dynamic").append( $footermenu );

    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "UN_SCRIPT_JS_SI_BESOIN.js";
    document.body.appendChild(script);
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.text = "function testScript{};";
    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 :

• encapsuler l’intégralité du style dans la plus haute balise du DOM de votre contenu

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.