Issue 5692 - Create Browser Selector with Browser Detection Component for help.eyeo.com

templates/article.tmpl

 {% extends "templates/default" %}
 
 {% set product = products[product_id] %}
 
 {% block body %}
 [Breadcrumbs]
 
 <main id="main" class="container clearfix">
   <article class="article card {{ product_id }}-card section column two-thirds">
       <h1 class="article-heading">
         <img class="heading-icon" src="/img/png/logo-{{ product_id }}.png" srcset="/img/svg/logo-{{ product_id }}.svg 2x" alt="{{ product.full_name+" Logo" | translate( product_id+"-logo-alt", "Image alt text") }}">
 
         {{ title | translate( get_page_name(page) + "-title", "Article title") }}
       </h1>
       
       {% if hide_browser_selector is not defined %}
-      <div class="article-browser-selector">
-        [Browser selector]
+      <div class="article-browser-selector clearfix">

[juliandoucette, 2017/10/24 12:12:30]

NIT: Why not @extend .clearfix?

[ire, 2017/10/27 10:22:59]

Done.

+        <? include browser-select ?>
       </div>
       {% endif %}
 
       <div class="article-body content">
           {{ body | safe }}
       </div>
   </article>
   <aside class="section column one-third">
     <? include product-topics-accordion ?>
   </aside>
 </main>
 
 <script id="no-content-for-platform-message" type="text/template">
   <p>{{ "Unfortunately, there is no content specific for your current browser. Please use the dropdown menu above to choose a different browser." | translate("no-content-for-platform-message", "paragraph") }}</p>
 </script>
+
+<script src="/js/vendor/bowser.js"></script>
 {% endblock %}