====== Gérer les informations dynamiques du configurateur ======

Les informations dynamiques du configurateur sont toutes celles qui changent en fonction des éléments du canapés. Cela peut être le nom fu format, le prix du canapé, ou bien les images associés à certaines parties à afficher dans les slider.

Toutes ces informations sont gérable via le wordpress dans le contenu personnalisé "Infos Canaps Configurateur".

Tout les ACF associés à ces contenus sont enregistrés dans un JSON qui est ensuite lu par le configurateur pour les infos voulues.

Ce tuto va expliquer les trois différentes parties :

  * Comment gérer les ACF et les contenus sur wordpress
  * Comment transformer les ACF en JSON potable
  * Comment utiliser ces données pour :
      * Le configurateur
      * Le module Woocommerce

===== Comment gérer les ACF et les contenus wordpress =====

Tout ce passe dans le bloc ACF "Champs Informations Canapé configurateur", qui peut être divisé en deux parties :

==== 1. ====

Le premier champ **Clé parente**. **Très important**, vraiment, c'est ce champ qui va définir les différentes clés parentes du json ainsi que les différentes configurations possibles. <font inherit/inherit;;#FF0000;;inherit>Ces clés parentes sont celles utilisés dans le code donc il ne faut surtout pas les modifier !</font> \\
Pour ajouter une nouvelle clé (un nouveau type d'information dynamique) il faut ajouter une nouvelle valeur possible dans le champs ACF (Bloc Choix), de type

**valeur_de_la_cle**  : Texte affiché dans l'admin

/ ! \ Les ':' sont très important, et valeur_de_la_cle ne doit pas contenir d'espace ou de caractères spéciaux

==== 2. ====

Les différents blocs pour les différents champs dynamiques.

Sous le slider avec les valeur de clé se situent plusieurs champs de type blocs, chacun de ces champs à un affichage conditionel et ne s'affiche que si une certaine clé est choisie (Groupe Prix quand la clé prix est choisie par exemple)

Ces groupe de champ contiennent des sous-champs qui seront ceux utilisés pour créer le JSON.

**Example : **Le prix d'un canapé dépend du format ainsi que si c'est un canapé en cuir ou non, le groupe concernant la clé "Prix" à donc plusieurs champs :
  * Le prix par défaut d'un canapé
  * Le prix par défaut d'un canapé en cuir
  * Et ensuite un répéteur qui permet d'ajouter des couples de :
      * **clé du format du canapé**  : Ces clés seront celles définie dans le catalogue de dev en js et seront trouvable dans un fichier pas encore créer
      * **Un prix pour le format sans cuir et avec cuir**
Ces champs permettent de rentrer toutes les infos donc le configurateur à besoin.

Pour créer un nouveau bloc de champs il faut donc surtout penser à ajouter une logique conditionnelle de type "Monter ce champs si clé parente es égale à **clé voulue**"

Ce fonctionnement permet de créer autant d'informations dynamiques que l'on veut !

===== Comment transformer tout les ACF en JSON =====

Toute la magie se passe dans le fichier wp-content/themes/cmantika/functions-configurateur.php, dans la fonction **acf_create_and_update_JSON_info_config( $post_id).**

Cette fonction s'active dès qu'un post est mise a jour sur wordpress et vérifie si le contenu est de type "Infos Canaps Configurateur" (''if (get_post_type($post_id) == 'infos_canap_config') { ''), il met ensuite ç jour le JSON appellé automatic_infos_canape.json.

Ensuite tout se fait en fonction de la clé parente (**On vous a dit qu'elle éétait importante**), un switch va faire des actions spéciales en fonction de la clé. Ces actions vont récupérer les champs ACF en fonction de la clé et créer un tableau en fonction, ce tableau sera ensuite ajouter au JSON.

**Example :** Quand le contenu avec la clé parente "prix" est mise a jour, le switch va déclencher le code correspondant. Il va récupérer en premier les deux cahmps prix par défault et les ajouter dans un tableau result['default'] :
<code>
$result['default']['default'] = get_sub_field('prix_par_defaut');
$result['default']['cuir'] = get_sub_field('prix_par_defaut_cuir');
</code>

Puis, pour tout les prix de canapés renseigner, on va créer un index avec la clé du format (fauteuil, canape-1p, [canape-2p,canape-2p], …) avec les prix correspondant :

<code>
if( have_rows('prixs_canapes') ){ while ( have_rows('prixs_canapes') ) { the_row();

    $result[get_sub_field('cle')]['default'] = get_sub_field('prix');
    $result[get_sub_field('cle')]['cuir'] = get_sub_field('prix_cuir');

}}
</code>

Pour ajouter un nouveau type de contenu dynamique il suffit donc de rajouter un cas dans le switch :

<code>
case 'nouvelle_clé':

    //faire tout les trucs qu'on veut dans $result

    //et Ajouter le contenu au JSON
    $json_content['nom_canape'] = $result;

break;
</code>

Pour information : au début de la fonction, le JSON //automatic_infos_canape.json((Le fichier automatic_infos_canape.json nécessite le droit d'écriture par le serveur web (chmod 664))  //est lu et tout son contenu est mis dans la variable $json_content. C'est elle qu'on modifie puis qu'on remet dans le fichier (on écrase tout et on remet la variable $json_content)


===== Comment utiliser le JSON dans le code =====

==== Utiliser le JSON dans le wordpress ====

Certaines fonctions dans wordpress ont besoin d'accéder au JSON pour les infos (Les infors affichés par wocommerce, le prix à enregistrer etc...), pour récupérer le JSON il suffit d'utiliser la fonction get_JSON_infos(), qui renvoie le json du fichier

<code>
function get_JSON_infos(){
  $json = file_get_contents(get_template_directory().'/automatic_infos_canape.json');
  return json_decode($json,true);
}
</code>

Il suffit ensuite de récupérer les infos voulues

==== Utiliser le JSON dans le configurateur et ajouter des champs qui seront mis à jour par la vue ====

Tout se gère dans le fichier COnfigurateurLibrary/src/js/core/ConfigFormGenerator.

Avant la définition de la classe, une constante est mis en place avec le lien du JSON (**à changer en prod, dev, ...**).

Ce JSON est chargé lors de la constructiond e l'instance de la classe et est enregistré dans **this.infosCanapesJSON.**

Cette variable peut ensuite être accédée où l'on veut dans la classe ou encore  en dehors de la classe.

**Info:**  Pour plus de facilité à utiliser cet attribut une méthode à été mise en place.

En php lorsque l'on accède à un array avec plusieurs niveau (example JSON['prix'['module-1p']['default']), si l'un des niveau n'est pas définit, php renvoie null. On peut donc tester des trucs comme :'' isset($json['prix']['module-2p']['default'])''

En JS si l'un des niveau avant le dernier n'est pas défini alors le code va lancer une exception et la méthode va s'arrêter à la place de renvoyer null.

La fonction  **getNested(obj, ...args)**  à donc été mise en place. En lui donnant un objet et une liste d'attribut que l'on veut : ''this.getNested(this.infosCanapesJSON, 'prix', 'module-2p', 'default') ''la fonction nous enverra la bonne valeur **ou**  undefined si un des niveau n'est pas bon.

Pour ajouter des champs qui seront mis à jour par la vue, [[:clients:casatotem:configurateur#ajouter_des_champs_qui_seront_mis_a_jour_par_la_vue_exprix_dimensions|il faut regarder sur cette page]]