webleads-tracker

[catalogue] Passer la référence d'un produit à un formulaire

Jérémie [Medialibs]
Bonjour,

Je vais vous expliquer ici comment passer automatiquement la référence d'un produit à un formulaire personnalisé. Voici le principe du fonctionnement :

L'internaute affiche une fiche produit dans laquelle un lien du type "Demander plus d'informations" est affiché. Au clic, sur le lien, un formulaire s'affiche avec un champ "Référence du produit" pré-rempli.

Alors il existe principalement 2 méthodes :
  • Passer la référence dans le sujet de l'e-mail
  • Pré-remplir un champ du formulaire


Pour la première méthode, c'est très simple. Il suffit de modifier le champ "Objet de l'e-mail" et d'y ajouter l'expression suivante "{product_reference}". Vous pourrez ainsi avoir un sujet du style :

Un contact pour le produit {product_reference}

Le moteur d'e-majine remplacera automatiquement l'expression par la référence du dernier produit consulté. Vous pouvez avec cette même méthode utiliser l'expression "{product_label}" afin de remonter la désignation du produit.

La seconde méthode est un petit peu plus technique. Elle est basée sur le fait qu'on puisse communiquer avec le formulaire personnalisé en passant des éléments dans l'URL. Vous pouvez ainsi redéfinir les valeurs par défaut de tous les champs ainsi que les différents messages (entêtes, pied de formulaire et remerciement) et le sujet de l'e-mail.
Pour pré-remplir un champ, il faut au préalable connaître son identifiant (numérique). Pour notre exemple, nous allons utiliser un champ "Référence" avec un identifiant 12 et un champ "Type de produit" possédant l'identifiant 30.

Pour communiquer avec le formulaire, il faut utiliser l'URL où il est publié et y ajouter l'action "fillform" suivi de l'identifiant du formulaire personnalisé. Par exemple, pour le formulaire d'identifiant 7 :

/contactez-nous/fillform-7

Vous allez ensuite pouvoir définir les valeurs par défaut de vos champs, en utilisant la syntaxe suivante :

/contactez-nous/fillform-7-field{identifiant du champ 1}-{valeur du champ 1}-field{identifiant du champ 1}-{valeur du champ 2}-[...]

Dans notre exemple, nous obtiendrons donc :

/contactez-nous/fillform-7-field12-Ma référence-field30-Marque du produit

Vous pouvez si vous le souhaitez redéfinir les différents messages et le sujet du mail, en utilisant le même principe mais en remplaçant la syntaxe "field{identifiant}" par l'une des valeurs suivante :
  • header : Définition du message d'entête
  • footer : Définition du message de pied de formulaire
  • postmsg : Définition du message de remerciement
  • subject : Définition du sujet de l'e-mail


Vous pourrez ainsi obtenir :

/contactez-nous/fillform-7-field12-Ma référence-field30-Marque du produit-header-Mon nouveau message

L'utilisation de cette seconde méthode afin de récupérer la référence d'un produit nécessitera toutefois des connaissances en javascript et DOM afin de créer dynamiquement ce lien.

Attention : Si l'une des valeurs utilise le caractère "-", il faudra le remplacer par l'expression "~minus~". Vous devrez donc par exemple modifier votre référence "Ref-001" en "Ref~minus~001".
Directeur du Labo R&D
Medialibs

Etienne BRACKERS
Petite lecture très instructive en effet :)

Cependant, question bête : J'ai pas saisi comment on récupérait les identifiants numériques des formulaires et des champs ?

Merci !

Thomas Hesse
Bonjour,

En règle générale, il y a deux méthodes qui permettent de retrouver les identifiants : avec FireBug et sans.

Avec Firebug, il suffit d'aller sur le manage et d'ouvrir FireBug en mode console. Ce mode vous permet de voir les appels Ajax envoyés par votre navigateur à nos serveurs. En éditant le formulaire/produit/fiche, puis les champs le composant, vous verrez apparaître des URL qui contiendront les identifiants : "/index.php? ch=entries & id=19 & action=display&category=2" ou encore "/index.php? structElID=9 & structElAction=edit & structElType=chec & ch=manage & id=1 & action=edit_bloc".

Autre possibilité, vous pouvez vous rendre sur les onglets "editeur de template" de ces ressources/types de fiches. L'identifiant de la ressource est généralement accolée au nom du template. Pour les champs, les identifiants sont directement les ID renseignés dans le template (mx bloc et mx text).

Voilà tout ! :)
--
Thomas - Chargé de support et d'assistance

Tonio
Bonjour,
j'ai utilisé la première méthode (ci-dessous) pour afficher un formulaire pré-rempli, cela fonctionne bien, j'ai dans mon titre de mail que je reçois "formulaire de renseignement sur le produit 320". Mais ce que j'aimerais c'est que qu'on puisse rajouter plusieurs champs à la suite (nom du produit et référence) pour obtenir un titre genre : "formulaire de renseignement sur le produit Maisons bleue réf. 320"

Merci

Je vais vous expliquer ici comment passer automatiquement la référence d'un produit à un formulaire personnalisé. Voici le principe du fonctionnement :

L'internaute affiche une fiche produit dans laquelle un lien du type "Demander plus d'informations" est affiché. Au clic, sur le lien, un formulaire s'affiche avec un champ "Référence du produit" pré-rempli.

Alors il existe principalement 2 méthodes :

* Passer la référence dans le sujet de l'e-mail
* Pré-remplir un champ du formulaire



Pour la première méthode, c'est très simple. Il suffit de modifier le champ "Objet de l'e-mail" et d'y ajouter l'expression suivante "{product_reference}". Vous pourrez ainsi avoir un sujet du style :

Un contact pour le produit {product_reference}

Le moteur d'e-majine remplacera automatiquement l'expression par la référence du dernier produit consulté. Vous pouvez avec cette même méthode utiliser l'expression "{product_label}" afin de remonter la désignation du produit.

Julien Lafillé [37e Parallèle Multimédia]
Au risque d'enfoncer une porte ouverte, as-tu essayé :
formulaire de renseignement sur le produit {product_label} réf. {product_reference}

?

Tonio
Bonjour,

J'ai essayé dans le formulaire de renseignement sur le produit {product_label}et réf. {product_reference} mais seul {product_reference} s'affiche, et si je remplace {product_reference} par {product_label} ça ne fonctionne plus.

Y a t'il un solution ?

Merci

Thomas Hesse
Bonjour,

Le problème de Tonio a été vu en direct par le support. Pour rappel, le principe est bien de préremplir automatiquement un champ du formulaire. Il faut donc qu'il y ait un ou plusieurs champs prévus pour recevoir les infos. Une fois cela bien assimilé, voici un exemple complet pour récupérer le nom du produit et sa référence, et remplir deux champs du formulaire avec :

 
<span id="th_prod_name"><mx:text id="product_name" /></span>
<span id="th_prod_ref"><mx:text id="reference" /></span>
 
<!-- Voici le lien qui permet d'atteindre le formulaire en le remplissant convenablement.
Un problème peut survenir si les valeurs qui sont passés contiennent le caractère '-'.
Pour remédier à ce problème, j'ai ajouté un peu de javascript ci-dessous qui se chargera
de faire les modifications adéquates, au cas où, et à condition que JavaScript soit disponible.
 -->
<a id="th_form_link" href="/demande-de-renseignements/fillform-2-field23-<mx:text id="product_name" />-field24-<mx:text id="reference" />">formulaire</a>
 
<script type="text/javascript">
var th_lien = document.getElementById('th_form_link'); // on récupère la balise lien
var th_ref = document.getElementById('th_prod_ref'); // on récupère la balise référence
var th_nom = document.getElementById('th_prod_name'); // on récupère la balise nom
if(th_lien && th_ref && th_nom) // on vérifie que toutes les balises existent bel et bien
{
  th_ref = new String(th_ref.innerHTML); // on récupère le contenu de la balise référence
  th_nom = new String(th_nom.innerHTML); // on récupère le contenu de la balise nom
  
  // on ré-écrit le HREF de la balise lien à partir des éléments récupérés, en remplaçant les '-' par des '~minus~'
  th_lien.href = '/demande-de-renseignements/fillform-2-field23-'+th_ref.replace('-','~minus~')+'-field24-'+th_nom.replace('-','~minus~');
}
</script>
 


Avec cette méthode, même sans JavaScript, il y a des bonnes chances que ça marche bien, à condition qu'il n'y ait pas de '-' dans les valeurs passées dans le lien.

Dans le principe, vous pouvez naturellement concaténer plusieurs valeurs, et ne remplir qu'un seul champ.
--
Thomas - Chargé de support et d'assistance

Romain CRESSON
Bonsoir à tous,

Je souhaiterais savoir s'il est possible d'étendre cette technique pour par exemple créer un formulaire d'inscription à un évènement en particulier...

J'ai d'ores et déja rajouté un lien sur chaque fiche d'évènement (détail) qui pointe vers mon formulaire. Je vois le fonctionnement mais quel serait le mot clé équivalent à {product_reference} ?

Ou bien en utilisant la deuxième méthode, quelle serait la balise mx equivalente pour donc passer par l'url ?

Merci.

Thomas Hesse
Bonjour,

Cette technique est utilisable absolument depuis n'importe où. C'est le lien lui-même qui contient toutes les informations utiles, donc la provenance importe peu.

Attention, cela dit : la technique utilisant le lien pour faire passer les infos ne reconnait pas la syntaxe "{product_reference}". Il faut construire le lien "à la main", en utilisant les mX pour les parties devant être dynamiques.

Voici un exemple statique (avec un formulaire identifiant 7, et un champ à remplir identifiant 34), si vous voulez remplir ce champ avec la valeur "voici un test", voilà ce que donnera le lien :
< a href="/ma_rubrique/fillform-7-field34-voici un test" >


A partir de là, si vous voulez faire passer une info dynamique, il ne reste plus qu'à remplacer le message statique par les balises mX qui génèrent votre contenu dynamique (le contenu en question doit tenir sur une seule ligne et ne pas contenir de caractère - ou ", sinon il faudra d'abord traiter ce contenu en JavaScript pour remplacer ces caractères indésirables) :
< a href="/ma_rubrique/fillform-7-field34-<mX:bloc id="contenu"><mX:text id="contenu" /></mX:bloc id="contenu">" >


Rappel : quand vous déplacez ou dupliquez un mX:text, n'oubliez pas de vérifier qu'il reste dans le même contexte de mX:bloc, quitte à déplacer ou dupliquer les mX:bloc en question.


Voilà pour le cas général. Pour votre besoin spécifique, merci de m'envoyer plutôt une demande d'aide par ticket, avec l'URL d'un événement contenant le lien, et l'info que vous voulez passer au formulaire.
--
Thomas - Chargé de support et d'assistance

Romain CRESSON
Hey Bonjour Thomas,

< a href="http://tbn.com.schuller.atester.fr
/evenements/inscription-evenement/fillform-6-field2-test"> S'inscrire à l'évènement < /a>


Je crois avoir récupéré le bon identifiant du formulaire (dans l'éditeur de template). Par contre, je trouve pas le bon id de champ de formulaire ni dans l'éditeur de template, ni dans la console...

:) !

Thomas Hesse
Bonjour,

Personnellement, voici ma métode pour récupérer l'ID des formulaires et des différents éléments (FireFox + FireBug) :

1/ rendez-vous dans le manage, dans le centre de ressources.
2/ ouvrez FireBug, mettez-le sur l'onglet "console". Cet onglet vous permet de suivre les appels AJAX faits pas le manage.
3/ retrouvez le formulaire et demandez-en l'édition. La console affiche l'URL de l'appel AJAX, c'est dans cette URL que vous pourrez retrouver l'identifiant du formulaire (il suffit de passer la souris au-dessus de l'URL dans la console).
4/ pour les éléments, éditez le contenu du formulaire, puis utilisez l'action "modifier" du champ qui vous intéresse. Là encore, l'URL de l'appel AJAX contient l'identifiant (elementId) de l'élément en question.
--
Thomas - Chargé de support et d'assistance

Romain CRESSON
C'est ok c'est parfait ! T'es mon sauveur !
Avec le bazar qui s'écrit dans cette console,
on a intérêt de regarder au bon endroit... !!!

Merci merci cher Monsieur !

Maxime RETAILLEAU
Bonjour,

J'ai réussi à faire cette manip.
Mais je voudrais pousser le système un peu plus loin.
Mon but est que lorsque je clique sur le lien qui m'envoie vers le formulaire cela reprenne l'url ou je me trouvais et l'inscrive dans un champs du formulaire.

Donc j'ai presque réussi le seul problème est comme la valeur que l'on va mettre dans le champs du formulaire est repris dans l'url. Il y a conflit comme la valeur est une url.

Exemple je me retrouve avec un lien qui m'envoie vers :
http://www.monsite.fr/contact-acces/devis/fillform-1-field44-http://www.monsite.fr/votre~minus~maison-bois/maison-bois-contemporaine/maison-contemporaine-t4-de-plain-pied-84m/

Connaissez vous un moyen pour éviter ce conflit ?

Voici le code :

var currentLocation =  document.location.href;
      var str=currentLocation;
      document.write("<a href='/contact-acces/devis/fillform-1-field44-");
      document.write(str.replace(/-/, "~minus~"));
      document.write("' title='Demander un devis personnalisé'><span>Demander un devis personnalis&eacute;</span></a>");


A+
Maxime Retailleau
Mediapilote

Thomas Hesse
Bonjour,

Oui, il existe une méthode qu'on nomme "l'URL encoding", généralement disponible dans tous les langages qui ont un lien avec internet.

La doc la plus complète que j'ai trouvée sur internet est en anglais :

http://www.permadi.com/tutorial/urlEncoding/
--
Thomas - Chargé de support et d'assistance

Damien Grimault
Y aurait-il un moyen de récupérer aussi le titre de la page ou l'url avec une balise de type {title_page} qu'on pourrait insérer dans le champ objet ?
Dag

Manuel [Medialibs]
Avatar
Bonjour afin de compléter ce sujet, voici les informations pour pouvoir récupérer les identifiants numériques des formulaires et des champs.

Pour passer la valeur "ValeurApasser" on se retrouverait avec une url du type :

http://www.monsite.fr/contact-acces/devis/fillform-1-field44- ValeurApasser

=> fillform = c'est l'action pour dire "on va pré-remplir les champs
avec ce qui suit"...

=> - 2 : c'est l'identifiant du formulaire (disponible dans le template
du formulaire côté manage)

=> - field5 = correspond à l'identifiant du champ à pré-remplir
dans le formulaire. Cette information est aussi disponible dans
le template du formulaire coté manage

Du coup pour retrouver les infos dans le template du formulaire voici la
procédure à suivre :

Côté manage > On accède au formulaire > Contenu > Lancer firebug en mode console > puis on clique sur le premier champ pour le modifier. C'est la que l'on va retrouver l'url en GET avec :

Prenons l'exemple d'un formulaire avec deux champs : un champ de type texte et une zone de texte. Si je veux passer la valeur dans la zone input "A" : fillform-2-field5-

-Strctured|ID = 5 > "field5"
-Ressource id =2 > "fillform-2"

Pour la zone de texte "B" :

-Strctured|ID = 2 > "field2"
-Ressource id =2 > "fillform-2"

On remarque que le fillform a toujours cet identifiant "2" : cet identifiant correspond à l'id du formulaire. On peut le retrouver notamment en passant par l'éditeur de template :

Fichier à créer
/form/creator_form_2.html Créer le fichier

Bien entendu il n'est pas obligé de créer le fichier.

Bon code @+
Formateur web [Medialibs]