Fiches techniques sur WP

1. Introduction

Ce document décrit la configuration finale d’une fiche technique :

une fiche technique HTML générée par l’application Lambique (ex. 562_WEB.html),
un loader unique (initFicheTechnique.js) pour charger jQuery, DataTables et ses extensions,
deux scripts métiers : table_highlight.js et table_responsive.js.

L’objectif est de présenter l’architecture, le rôle de chaque fichier et le flux de chargement garantissant l’ordre correct des dépendances.

2. Génération et déploiement de la fiche HTML

Source : l’application Lambique génère un fichier [IDFiche]_WEB.html pour chaque fiche produit.

Chemin de déploiement (WordPress) :

uploads/fiche_technique/[IDFiche]/[IDFiche]_WEB.html

Nettoyage du HTML : suppression des <link> et <script> vers jQuery/DataTables dans le <head> généré par Lambique.
Injection du loader : ajout de
```
<script src="../initFicheTechnique.js"></script>
```
dans le <head> de la fiche, pour amorcer le chargement des dépendances.

Inclusion des scripts métiers : en fin de <body>, avant </body> :


<script src="../table_highlight.js"></script>
<script src="../table_responsive.js"></script>

3. CDN DataTables

Nous utilisons le CDN officiel de DataTables pour charger rapidement les scripts et styles nécessaires. Pour plus de détails et versions disponibles, consultez le site : https://cdn.datatables.net


<link rel="stylesheet" href="https://cdn.datatables.net/2.2.2/css/dataTables.dataTables.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/3.0.0/css/responsive.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://cdn.datatables.net/2.2.2/js/dataTables.js"></script>
<script src="https://cdn.datatables.net/responsive/3.0.0/js/dataTables.responsive.min.js"></script>

4. Structure détaillée des fichiers

4.1. 562_WEB.html


<!DOCTYPE html>
<html lang="fr">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Fiche Technique [IDFiche]</title>

  <!-- styles Lambique (global, impression, layout, jetons, tableaux ...) -->
  <style> /* ... */ </style>

  <!-- loader unique pour jQuery/DataTables -->
  <script src="../initFicheTechnique.js"></script>
</head>
<body>
  <!-- Contenu généré : titres, listes .jeton, tableaux bruts avec data-pk -->
  ...
  
  <!-- scripts métiers -->
  <script src="../table_highlight.js"></script>
  <script src="../table_responsive.js"></script>
</body>
</html>

4.2. initFicheTechnique.js


// initFicheTechnique.js

function loadScript(src) {
  return new Promise((resolve, reject) => {
    const s = document.createElement('script');
    s.src = src;
    s.async = false;
    s.onload = resolve;
    s.onerror = reject;
    document.head.appendChild(s);
  });
}

function loadCSS(href) {
  const l = document.createElement('link');
  l.rel = 'stylesheet';
  l.href = href;
  document.head.appendChild(l);
}

(async function bootstrapFicheTech() {
  try {
    // 1) CSS DataTables
    loadCSS('https://cdn.datatables.net/2.2.2/css/dataTables.dataTables.css');
    loadCSS('https://cdn.datatables.net/responsive/3.0.0/css/responsive.dataTables.min.css');

    // 2) JS : jQuery → DataTables → Responsive
    await loadScript('https://code.jquery.com/jquery-3.7.1.js');
    await loadScript('https://cdn.datatables.net/2.2.2/js/dataTables.js');
    await loadScript('https://cdn.datatables.net/responsive/3.0.0/js/dataTables.responsive.min.js');

    // 3) notifier que tout est chargé
    window.dispatchEvent(new Event('DepsLoaded'));
  } catch (err) {
    console.error('Erreur chargement dépendances :', err);
  }
})();

4.3. table_highlight.js


// table_highlight.js

(function(){
  function initHighlight() {
    const params = new URLSearchParams(window.location.search);
    const raw    = params.get('idLigne') || params.get('pk');
    if (!raw) return;

    const pks = raw.split(',').map(s => s.trim()).filter(Boolean);
    pks.forEach(pk => {
      const row = document.querySelector(`tr[data-pk="${pk}"]`);
      if (row) {
        row.style.backgroundColor = '#ffff99';
        row.scrollIntoView({ behavior: 'smooth', block: 'center' });
      }
    });
  }

  window.addEventListener('DepsLoaded', () => {
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', initHighlight);
    } else {
      initHighlight();
    }
  });
})();

4.4. table_responsive.js


// table_responsive.js

(function(){
  function initResponsiveTables() {
    // 1) Injection CSS flex pour dtr-details
    const css = `
      ul.dtr-details {
        width: 100%;
        display: flex;
      }
      ul.dtr-details li {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 10%;
      }
      ul.dtr-details li > span:first-child {
        text-align: left;
        flex: 1;
      }
      ul.dtr-details li > span:last-child {
        text-align: right;
        flex: 1;
      }
      @media screen and (max-width: 767px) {
        .not-mobile { display: none !important; }
      }
    `;
    const style = document.createElement('style');
    style.type = 'text/css';
    style.appendChild(document.createTextNode(css));
    document.head.appendChild(style);

    // 2) Initialisation DataTables sur chaque table
    document.querySelectorAll('table:not(.as-datatable)').forEach(tbl => {
      if (tbl._responsiveInit) return;
      tbl._responsiveInit = true;

      new DataTable(tbl, {
        responsive: true,
        paging: false,
        autoWidth: true,
        columnDefs: [
          { className: 'all', targets: 0 },
          { className: 'not-mobile', targets: '_all' }
        ],
        layout: { topStart: null, topEnd: null, bottomStart: null, bottomEnd: null },
        language: { url: 'https://cdn.datatables.net/plug-ins/2.0.0/i18n/fr-FR.json' }
      });
    });
  }

  window.addEventListener('DepsLoaded', () => {
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', initResponsiveTables);
    } else {
      initResponsiveTables();
    }
  });
})();

5. Suggestions d’améliorations

Compactage : combiner table_highlight.js et table_responsive.js dans un seul bundle via Rollup/Webpack.
Cache : versionner/livrer en CDN interne pour réduire la latence.
Accessibilité : ajouter aria-live pour signaler le surlignage aux lecteurs d’écran.
Tests : unitaires pour les fonctions d’initialisation et d’injection de styles.

5. Prochaines étapes

Valider cette documentation auprès de l’équipe.
Mettre en place un dépôt Git (avec CI/CD pour build et déploiement automatique).
Envisager un build-step pour minification et fingerprinting des scripts.
Documenter le workflow de mise à jour des dépendances externes.