Attention, cette page indique comment utiliser le configurateur. Pour voir comment il marche (quels fichiers font quoi, c'est sur cette page –> TODO)

Le configurateur est compilé via rollup. Tout comme des sites brunchés, à chaque fois que l'on veut modifier le configurateur il faut le compiler.

Toutes les modfis sont à faire dans le dossier src du configurateur. Tout les js et css (présent dans les dossier css et js) seront compilé. Tout les élément dans le dossier copy seront juste copier.

Pour compiler le configurateur il faut se placer à la racine de celui ci (où il y a les fichier package.json et rollup.config.js) et faire, en fonction du besoin, ces commandes :

npm run build : Qui va juste compiler le projet

npm run watch : Qui va compiler le projet à chaque fois qu'un fichier est modifié (jusqua ce que l'on coupe la commande)

npm run serve: Qui va juste lancer un serveur local pour tester le configurateur

npm run start ou npm start : Qui va juste lancer en simultané un npm run serve pour avoir un serveur local et faire un npm run watch pour compiler automatiquement le projet.

Pour ajouter des canapés dans des vues et tout et tout il faut modifier le fichier du configurateur src/js/instacesVues.js.

Les canapés chargés dans les vues sont décrite par leur configuration qui ressemble à ceci :

config = {
        camera: 'Face',
        cameraNav: true,
        modules: ['canape-2p'],
        base: 'haute',
        assiseModel:'Ass1',
        assiseTaille:'800',
        accoudoirModel:'5',
        accoudoirType:'bas',
        'dossier-structure': 'haut',
        dossier: '3',
        revetement: 'tissu_03',
        revetementPieds: 'pieds_01',
        pied: 'pied1',
        fonctionLit: false
      };

Attributs :

• camera : Où la caméra sera placé. valeur possibles : Valeur présente dans le fichier src/js/camera.js
• cameraNav : Permet de gérer si l'utilisateur peut bouger et zoomer la caméra. valeur possibles : True, la navigation et zoom sont possibles. False, rien n'est possible
• modules: Tableau avec les différents modules constituant le canapé. valeur possibles : Tableau de 1 ou plus d'élement présent dans le fichier src/js/catalog-dev.js, dans le tableau module. Attention, l'ordre du tableau est important, il reflète le placement des modules de gauche à droite (le premier sera le plus à gauche tandis que le dernier du tableau sera la plus à droite)
• base : Si la base (le support des assises) est haute ou pleine. valeur possibles : haute ou pleine
• assiseModel: Modèle des assises. valeur possibles : Valeur présente dans le fichier src/js/catalog-dev.js, dans le tableau assise
• assiseTaille: Largeur d'une assise. valeur possibles : Valeur présente dans le fichier src/js/catalog-dev.js, dans le tableau assise, dans les différents types d'assises
• accoudoirModel : Modèle des accoudoirs. valeur possibles : Valeur présente dans le fichier src/js/catalog-dev.js, dans le tableau accoudoir
• accoudoirType : Si les accoudoirs sont haut ou bas. valeur possibles : haut ou bas
• dossier-structure: Si le dossier est haut ou bas. valeur possibles : haut ou bas
• dossier: Modèle des coussins de dossier. valeur possibles : Valeur présente dans le fichier src/js/catalog-dev.js, dans le tableau dossier-coussin
• revetement: Texture du canapé. valeur possibles : Valeur présente dans le fichier src/js/catalog-dev.js, dans le tableau material
• revetementPieds: Texture des pieds du canapé. valeur possibles : Valeur présente dans le fichier src/js/catalog-dev.js, dans le tableau material qui ont un attribut typeMateriauPied présent
• pied: Modèle des pieds. valeur possibles : Valeur présente dans le fichier src/js/catalog-dev.js, dans le tableau pied
• fonctionLit : Si le client à cocher la case 'Fonction Lit' ou non, n'a aucun incident sur le rendu. valeur possibles : True ou false

Il y a deux moyens de charger un canapé dans une vue :

Pour cela il suffit de :

1 - tester si on est sur la bonne page (en essayant de récupérer un élément présent que sur la page voulu par exemple)

2- Récupérer l'élément où sera la vue

3- Créer une vue lié à l'élément

4- Créer une config

5- Charger la config dans la vue

6- Ajouter la vue à la boucle globale pour qu'elle se charge bien et tout

Exemple :

// 1
if (document.querySelector('.configurateur') != null) {

        // 2
        var element = document.querySelector('.view-1')

        // 3
        var view = new View(element, false)

        // 4
        var config = {
            camera: 'Face',
            cameraNav: true,
            modules: ['canape-2p'],
            base: 'haute',
            assiseModel:'Ass1',
            assiseTaille:'800',
            accoudoirModel:'5',
            accoudoirType:'bas',
           'dossier-structure': 'haut',
            dossier: '3',
            revetement: 'tissu_03',
            revetementPieds: 'pieds_01',
            pied: 'pied1',
            fonctionLit: false
        };

        // 5
        view.loadConfig(config)

        // 6
        loop.add(view.onUpdate)
        loop.start()

} // Fin 1

PS : Le false à l'étape 3 correspond à l'attribut debug de la vue. Si il est mit à true beaucoup d'infos seront affichés sur la vue

Pour cela il suffit de faire comme à celui au dessus avec 2 étapes en plus :

1 - tester si on est sur la bonne page (en essayant de récupérer un élément présent que sur la page voulu par exemple)

2- Récupérer l'élément où sera la vue

3- Créer une vue lié à l'élément

4- optionnel : Créer une config, sinon celle de base sera chargée (celle de base est celle qui a été utilisé en exemple dans le début du et celle utilisé dans l'exemple au dessus)

5- Récupérer l'élément qui contient tout les liens pour modifier le canapé

6- Créer une instance de configFormClass en lui indiquant la vue, l'élément qui contient tout les liens et la config

7- Charger le canapé pour la première fois

8- Ajouter la vue à la boucle globale pour qu'elle se charge bien et tout

Exemple :

// 1
if (document.querySelector('.configurateur') != null) {

        // 2
        var element = document.querySelector('.view-1')

        // 3
        var view = new View(element, false)

        // 4
        var config = null

        // 5
        var formConfig = document.querySelector('.form-config')

        // 6
        var configFormVar = new configFormClass(view, formConfig, config);

        // 7
        configFormVar.loadConfig();

        // 8
        loop.add(view.onUpdate)
        loop.start()

} // Fin 1

Si une instance de configFormClass à été créer avec la vue alors il y a plusieurs moyens d'ajouter des liens et élement de formulaires pour dynamiser la vue qui se base tous sur la même logique :

Toutes les modifications se font lors du click sur un élement HTML. Pour que cet élement HTML soit valide et ne fasse pas planter le configurateur il doit avoir 2 attributs personnalisés :

formConfigInput : Correspond à l'élément à modifier dans la config, la valeur doit être exactement la même que dans la config

data-config-input-value : Valeur à donner à l'attribut voulu lors du click sur cet élément.

Par exemple avec le code : <button formConfigInput=“base” data-config-input-value=“pleine”>Base pleine</button> le click sur le bouton changera l'attribut base à pleine

Tout les éléments HTML avec ces deux attributs peuvent être lié à la vue ! Il faut ensuite lier cet élement à l'instance de configFormClass. Pour cela il y à deux manières différentes :

Lors de l'instanciation de configFormClass, il est possible de donner au constructeur en deuxième attribut un élement du DOM.

Si ce dernier est indiqué, le constructeur va utiliser sa méthode interne analyseFormContainer et récupérer tout les sous éléments contenu dans l'élément donné qui ont un attribut formConfigInput non null.

Lorsqu'un élement est valide (que l'attribut formConfigInput existe et qu'il peut avoir comme valeur data-config-input-value ), alors un évenement est ajouté au click qui met à jour la vue et tout ce qui va avec (vérification, update des infos,…)

Hors de l'instanciation de configFormClass :

Si configFormClass est déjà instancier il est possible d'utiliser la méthode analyseFormContainer sans passer par le container. il suffit d'appeller le configFormClass.analyseFormContainer() avec comme attribut :

• En premier l'élément HTML contenant les inputs voulus
• En deuxième un booléen true ou false nommé surcharger. Si celui ci est a false et qu'un ancien bouton à le même comportement qu'un des nouveaux alors le nouveau ne sera pas prit en compte. Si il est a true alors le click sera ajouter même si un ancien bouton fait déjà la même modif.

Valeurs possibles : Les valeurs possibles pour chaque clé est définit dans la classe par la constante configArchitecture

Checkbox : Il est possible d'ajouter un comportement différent sur les checkbox. Pour que l'évenement voulu prenne true ou false en fonction de la checkbox. Pour cela il suffit de mettre data-config-input-value à {inputCheckboxValue}. Ex : <input formConfigInput=“fonctionLit” data-config-input-value=“{inputCheckboxValue}” type=“checkbox” id=“fonctionLit” name=“fonctionLit”>

L'ajout de champs dynamique se fait en deux parties :

• L'ajout du comportement dans le configurateur
• L'ajout du champs dynamique lors de l'instanciation de la vue canapé

Dans la même idée que la génération du JSON dans le wordpress, les comportement dans le configurateur fonctionne via un grand switch qui contient toutes les clés disponibles.

Ce switch est présent dans le fichier configurateurLibrary/src/js/core/ConfigFormGenerator.js, dans la fonciton updateInfo().

Cette fonction, appellé à chaque fois que le canapé est modifié, met à jour tout les champs dynamiques indiqué dans le configurateur. Tout ces champs sont présent dans this.infosToUpdate, mais l'on revienbdra sur cela plus bas.

Pour ajouter un nouveau champs dynamique il faut donc ajouter un nouveau cas dans le switch.

Les variables à disposition sont :

• currentCle : la clé de l'élément courant
• currentElement : L'élément du DOM qu'il faut modifier, il fauit donc, dans le switch case, récupérer le bonne info voulu (via this.infosCanapesJSON par exemple) et l'insérer dans currentElement.

Les champs dynamiques de la vue marchent tous sous forme d'objet de type :

{
    element: elementToUpdate,
    cle: 'clé',
}

Avec donc 2 attributs : element qui est l'élément à modifier (récupéré dans le swicth et appellé currentElement), et la clé qui permet de passer dans le bon case du switch vu au dessus et de modifier l'élément avec l'info adéquate

Dans la classes, toutes les infos dynamiques sont stockés dans un tableau this.infoToUpdate. C'ets ce tableau qui est parcouru lors de la modification du canapé pour changer toutes les infos dynamiques (On change l'élémént en fonction de sa clé)

Pour ajouter des élément à ce tableau, 2 possibilités :

1. Lors de la création de l'instance de ConfigFormGenerator, le 4 ème paramètre permet de donner directement un tableau d'infos dynamique
Example :

//On crée le tableau que l'on va utiliser
var infoToUpdate = []

//On récupère l'élément qui contient le prix qui sera dynamique
let prixToUpdate =  document.querySelector('.prixToUpdate');

//Puis on met dans le tableau un obet avec lélément récupéré et la clé 'prix'
let infoToUpdate.push({
element: prixToUpdate,
        cle: 'prix',
});

//On fait de même avec le nom du module choisi mais cette foi la clé est 'moduleName'
let moduleNameUpdate =  document.querySelector('.memory');
infoToUpdate.push({
        element: moduleNameUpdate,
        cle: 'moduleName',
});

//Finalement on instancie la classe configFormClass avec comme 4ème argument notre tableau !
var configFormVar = new configFormClass(view, formConfig, config, infoToUpdate);

2. Si ConfigFormGenerator est déja instancié, il suffit d'appeler la fonction addInfoToUpdate(element, cle), avec en parametre dans l'ordre : l'élément du DOM, puis sa clé
Example :

//On instancie la classe configFormClass
var configFormVar new configFormClass(view, formConfig);

//On récupère l'élément qui contient le prix qui sera dynamique
let prixToUpdate = document.querySelector('.prixToUpdate');

//On ajoute directement les infos via la fonction addInfoToUpdate(), en lui donnant l'élément du DOM récupéré au dessus, et la clé voulu ('prix' ici)
configFormVar.addInfoToUpdate(prixToUpdate, 'prix')

Tout les éléments présent dans le tableau this.infoToUpdate de la classe configFormGenerator ayant une clé valide (donc une clé ayant un case correspondant dans le switch de la méthode updateInfo() ) seront mis à jour lors de la modificatrion du canapé