Intégrer un Widget Itinéraires sous REACT
Ce tutoriel technique vous permettra d’intégrer votre Widget Itinéraires dans un environnement « React Habitat » (https://github.com/DeloitteDigitalAPAC/react-habitat).
Récupérez le code d’insertion PHP depuis votre interface de gestion de widgets, il devrait ressembler à ça :
<?php
$code_html = file_get_contents("https://www.modulesbox.com/fr/api/module/XXX?mb_key=XXX&".$_SERVER["QUERY_STRING"]);
echo $code_html;
?>
Rien de plus à faire.
- Récupérez le code d’insertion JavaScript depuis votre interface de gestion de widgets.
- Commençons par créer le composant React qui va être inséré dans la page :
Cirkwi.jsx (où XXX est l’identifiant du widget)
import React from 'react';
class Cirkwi extends React.Component {
render() {
mbLoadModule({ id: XXX, locale: "fr" });
return (
<div>
<div id="mb-module-XXX"></div>
</div>
);
}
}
export default Cirkwi;
- Votre composant est maintenant créé, il faut alors le déclarer dans le containerBuilder.
containerBuilder.registerAsync(() => System.import('./components/Cirkwi')).as('RCirkwi');
- Dans votre code PHP, juste avant de charger votre composant, insérez la balise Javascript contenant le script nécessaire au bon fonctionnement du widget.
<script type="text/javascript" src="https://www.modulesbox.com/js/module-loader.js" id="mb-module-loader"></script> [...] <div data-component="RCirkwi"></div> [...]
N’oubliez pas de « build » votre projet ! Une fois ceci fait, le composant est correctement installé.
