mg-forms
v0.1.0
Published
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
Downloads
1
Readme
This project was bootstrapped with Create React App.
MG-Forms
Application web et plugin Javascript permettant la création de pop-ups de devis / qualification / leadgen sur mesure.
Les données de structure des formulaires et méta-données sont persistées sur l'API de Contentful : https://app.contentful.com/spaces/n3fqi1ufw4d2
L'application Web utilise l'API contentful-management
qui permet de manipuler les ressources : https://contentful.github.io/contentful-management.js/contentful-management/5.11.0/
Le script JS, quant à lui, utilise le SDK contentful content delivery
: https://contentful.github.io/contentful.js/contentful/7.10.0/
Pré-requis
- Node.JS
- Yarn
Dépendances majeures
- React (Create-React-App)
- Bootstrap (Reactstrap)
- PropTypes
Available Scripts
yarn start
Lance l'admin en mode développement (auto-reload, non-minifié, etc.). Par défaut, utilise le port 3000. Par défaut lancé en HTTPS (requis pour le SSO Contentful).
yarn build
L'action build
va lancer en parallèle les actions build:app
et build:sdk
. Les deux vont écrire dans le répertoire
/build
.
Testing
Une page /tester.html
permet de tester le fonctionnement du SDK.
SDK API
Le SDK déclare une classe MGFormLoader
sur l'objet window
. Cette classe est instanciée avec les paramètres suivant :
const loader = new MGFormLoader({
contentfulParams: {
space: "n3fqi1ufw4d2",
accessToken: "byDuC5n8v18DCyMknlbwDS6nDuRO3Hrl-LF1lsySwos"
},
userId: "ft1xqb2345",
onReady: function() {}
});
Attention pour Contenful, l'accessToken correspond à une API key pour l'API content-delivery (Settings / API Keys)
Cette classe est responsable de la récupération des configurations de formulaires sur Contentful et détermine, en fonction de la pondération des différents formulaires, quel formulaire afficher.
Une fois le FormLoader instancié, celui-ci expose une méthode createForm
qui prend les paramètres suivants :
loader.createForm({
type: 'express',
onStepEvent: function(event) {
console.info("Step Event", event);
},
onComplete: function(value) {
console.info("Form Complete", value);
},
onChange: function(value) {
console.info("Form value Change", value);
},
onMount: function() {
console.info("Form mounted");
},
value: {
product_id: 1234
},
container: document.getElementById("mount")
});