Dynamic Header & footer

You can add a dynamic header/footer via an external javascript script that we call in
our page.

Example on CodePen : https://codepen.io/warck/pen/Kbdzww

How does it work ?

You must provide an HTML tag for each of the sections you want to implement (e. g.
a <header> and a <footer>), remembering to load the necessary libraries before the
tags to be filled, and to call the js embedding your content after the latter. Below is a
functional example.

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

Below, you will find an example of js code allowing the population of the abovementioned
tags, using jQuery in dependence. Our solution embedding its own
version of jQuery, you don't have to add it.

(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">CONTENT HEADER</header>'
    );

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

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

    if($("#footer-dynamic")) $("#footer-dynamic").append( $footermenu );
    
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "A_SCRIPT_JS_JS_IF_NEEDED.js";
    document.body.appendChild(script);
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.text = "function testScript{};";
    document.body.appendChild(script);
})();

Warning: The style you can inject in this way could potentially impact our own style,
so it is essential that you be careful about the overwrites you set up, and
encapsulate them properly. For this reason, you must comply with the following:

It is MANDATORY to :

• encapsulate the entire style in the highest DOM tag of your content

It is PROHIBITED to :

• override the style of the tags (html, body, div, etc)
• use

  !important

• use selectors that are too vague and ambiguous (use BEM syntax if possible)
• use SEO-oriented tags (no heading (H1, H2, H3,...)).

In addition, we pay particular attention to SEO optimization and Accessibility in our
store locator, so we invite you to do the same in the content you provide us, in order
to guarantee continuity in the quality of your product.

Quality and performance

We cannot under any circumstances be held responsible for the semantic and
technical content that you inject into your store locator using this solution.