Manuel [Medialibs]
Avatar
Comment remonter une propriété additionnelle de type sélection dans l'affichage du panier ?

Prenons un exemple simple : Nous avons un catalogue produits de bols à prénom. Chaque bols contient une liste déroulante (propriété additionnelle) de tous les prénoms possibles. L'internaute peut donc choisir le prénom voulu. L'objectif est de récupérer le prénom choisi dans l'affichage du panier à côté de la désignation du produit.

Comment procéder :

Alors pour gérer cela c'est pas bien compliquer : à l'aide de la propriété additionnelle "champ personnalisable" et d'un petit morceau de javascript.

MANAGE :
> Création d'une propriété additionnelle "zone de sélection" avec les valeurs de votre choix
>Création d'une propriété additionnelle "Texte personnalisé" que j'ai appelé "Prénom"

SCRIPT jQuery : permet de récupérer la valeur sélectionnée d'une zone déroulante et de l'injecter dans une div de son choix (en l'occurrence dans le <textarea> de la propriété additionnelle "Prénom")
> Code récupérer sur http://api.jquery.com/selected-selector/ & a ajouter dans le mainPage.html

<!-- Gestion du bloc prenom -->
<script>
$(".product_detail select").change(function () {
var str = "";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
$(".product_detail div.blocPrenom textarea").text(str);
})
.trigger('change');
</script>
 


TEMPLATE product_fiche_produit.html : Ajout du bloc propriété additionnelle "prénom" :

<!-- Bloc prenom / text personnalise -->
<mx:bloc id="prenom">
<div class="blocPrenom">
<mx:text id="prenom_label" />
<mx:text id="prenom_textarea" />
</div>
</mx:bloc id="prenom">


CSS
> A ajouter dans la feuille de style de votre choix

.product_detail .blocPrenom {
display:none;
}
 


De cette façon la valeur sélectionné dans la liste déroulante est copié dans la propriété additionnelle puis remontée dans l'affichage du panier. Il ne reste plus qu'à ajuster les identifiants et classes suivants votre besoin.
Formateur web [Medialibs]