Personnalisation d'objets côté visiteur

**bernard26000** · 30/11/2014, 18h58

Bonjour à tous et à toutes,

Je ne suis pas vraiment sûr d'être dans la bonne rubrique.....

Je fais de la sérigraphie, j'ai un site de présentation de mes produits, site que j'ai réalisé tout seul, juste pour dire que j'ai quelques notions de programmation, mais mon niveau est loin d'être d'un niveau pro....

Mon projet :

Je souhaite qu'un visiteur puisse personnaliser un objet, un tee-shirt.... en ligne du style spreadshirt ou autre....

L'idée générale est que le visiteur puisse mettre sur un objet du texte avec choix de la police, une image....

Qu'il valide sa création.

Que je récupère dans un bon de commande l'image de sa création avec les variables.

Je voudrai éviter le flash que je ne connais pas et qui ne fonctionne pas partout principalement sur les Smartphones.

J'imagine bien qu'il soit nécessaire d'utiliser le PHP mais je pense qu'il est aussi nécessaire de travailler avec du JS JQuery.... (?)

J'ai un début de code, mais je ne suis pas sûr d'avoir bien démarré, je vous laisse le découvrir...

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE HTML>
 <html>
 <head>
 <meta charset="utf-8">
 <title>Document sans titre</title>
 <link rel="stylesheet" href="01.css" title="01" type="text/css">
 <link rel="stylesheet" href="02.css" title="02" type="text/css">
 <link rel="stylesheet" href="03.css" title="03" type="text/css">
 
 <script language="javascript"> 
 
 function change_cellule(texte)
 {
 document.getElementById('zone').innerHTML = texte;
 }
 </script>
 
 <script language="JavaScript" type="text/javascript" src="police.js">
 </script>
 
 <style>
 #zone {
 position:absolute;
 text-align:center;
 width:150px;
 height:100px;
 border:dotted #FF0000 2px;
 left: 195px;
 top: 161px;
 z-index:100;
 }
 </style>
 <script language="javascript">
 
 function ChangeImage(url) {
 document.getElementById("img").src = url;
 }
 
 </script> 
 
 
 </head>
 
 <body>
 <div style=" width:750px; position:relative; float:left">
 <div style="position:relative; float:right">
 <textarea onkeyup="change_cellule(this.value)"> </textarea><br><br>
 <a href="#" onclick="regleStyle('01'); return false">police1</a>
 <a href="#" onclick="regleStyle('02'); return false">police2</a>
 <a href="#" onclick="regleStyle('03'); return false">police3</a><br><br>
 
 <br>
 </div>
 
 
 <div>
 <div style="position:relative; float:left" >
 <img src="images/01.jpg" width="540" height="600" id="img">
 </div>
 <div class="police" id="zone">
 
 </div> 
 </div>
 <div style="clear:both"></div>
 <div>
 
 
 <img src="images/01.jpg" height="110" onClick="ChangeImage(this.src);">&nbsp;&nbsp;
 <img src="images/02.jpg" height="110" onClick="ChangeImage(this.src);">&nbsp;&nbsp;
 <img src="images/03.jpg" height="110" onClick="ChangeImage(this.src);">
 
 </div>
 
 
 </body>
 </html>

Ca fonctionne pour le changement de T-shirt, pour la police d'écriture aussi, mais déjà là je coince pour la taille, la couleur de la police et surtout je ne suis pas certain d'avoir la bonne option....

Merci à vous d'avoir lu ce topic et si vous avez la patience de m'accompagner dans le développement de ce projet vous serez les bienvenus

**sipatsymasaka** · 01/12/2014, 10h16

pour changer taille, couleur et autres styles de ton texte, tu peux faire des recherches google à partir de ce mot clé : "changer dynamiquement le style css" de ton texte.

**bernard26000** · 02/12/2014, 06h54

Merci sipatsymasaka, je jette un coup d'œil et je me retrousse les manches

**SylvainPV** · 02/12/2014, 09h43

Je reposte mon message puisqu'il semble avoir été supprimé du topic initial.

Tu es sûr de ne pas vouloir faire appel à un professionnel pour ça ? C'est très ambitieux pour quelqu'un qui n'a aucune connaissance en JavaScript, je crains que tu y passes des mois pour un résultat qui ne soit pas à la hauteur de tes espérances. Je recommanderai de soit faire appel à un freelance, soit trouver un configurateur pré-existant et vendu par un prestataire avec support technique.

Bien sûr on peut essayer de t'aider pas à pas mais honnêtement, je ne sais pas par où commencer...

**bernard26000** · 02/12/2014, 14h27

Salut Sylvain

J'ai conscience du "chantier" auquel je m'attaque...
Je ne sais pas encore si je vais arriver à réaliser mon projet, mais j'ai envie d'essayer.

Peut être que la solution est de passer par un tiers, mais pour l'instant je crains de ne pas avoir les moyens, les temps sont durs....

http://vmfloc.com/atelier/
Ca c'est l'url de ma page en construction, ça ne va pas loin, mais au moins c'est un début.

Là je vais me concentré sur l'écriture, que le visiteur puisse choisir sa police, la taille de la police etc....

@ bientôt

**SylvainPV** · 02/12/2014, 15h30

Ok dans ce cas voici comment changer le style de ta zone au clic sur un lien :

en déclarant une fonction setZoneCSS comme ceci:

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
function setZoneCSS(propriete, valeur){
   var zone = document.getElementById("zone");
   if(zone){
       zone.style[propriete] = valeur;
   }
}

lien pour changer la police

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#" onclick="setZoneCSS('fontFamily','Verdana'); return false">Verdana</a>

lien pour changer la taille du texte

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#" onclick="setZoneCSS('fontSize','28px'); return false">Taille 28</a>

lien pour changer la couleur du texte

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#" onclick="setZoneCSS('color','red'); return false">Texte en rouge</a>

lien pour mettre le texte en italique

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#" onclick="setZoneCSS('fontStyle','italic'); return false">Italique</a>

lien pour mettre le texte en gras

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#" onclick="setZoneCSS('fontWeight','bold'); return false">Gras</a>

en espérant que ça t'aide

**SpaceFrog** · 02/12/2014, 15h39

Perso je passerai plutôt par canvas qui offre plus de possibilités

**SylvainPV** · 02/12/2014, 16h50

Je suis d'accord, mais c'est déjà un niveau au-dessus

Et ça risque de compliquer le code s'il veut que le texte soit éditable au clic.

D'ailleurs j'en profite pour dire comment on fait en DOM classique :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="police" id="zone" contenteditable>Votre texte</div>

https://developer.mozilla.org/fr/doc...ntenu_editable

**bernard26000** · 06/12/2014, 09h15

Bonjour à tous et toutes,

J'ai avancé un petit peu sur mon projet grâce à Sylvain

Pour l'instant j'en suis là http://www.vmfloc.com/atelier/index.php pas de panique, c'est relativement moche, mais je me consacrerai au CSS plus tard.

Là j'en suis "au chantier" passage de variable avec récupération en PHP.
J'ai du lire a peut près 3 millions de forums

mais je tombe sur des cas particuliers et vraiment personnels aux posteurs.

Je crois avoir compris que je doive determiner ma variable

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var variable= document.getElementById("zone");

Mais avec ça je pense que je n'aurai rien ne faut-il pas que je donne un ID à chacune de mes variables, par exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a class="fenetre" href="#" onclick="setZoneCSS('fontStyle','italic'); return false" id="font_style">Italique</a><br>

Peut être la bonne pratique pour récuperer mon ID

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var variable=document.getElementById("font_style);

Bon week end à tous

**sekaijin** · 06/12/2014, 13h21

si tu était plus précis on pourrait peut être t'orienter

Là j'en suis "au chantier" passage de variable avec récupération en PHP.
J'ai du lire a peut près 3 millions de forums mais je tombe sur des cas particuliers et vraiment personnels aux posteurs.

ça veut dire quoi "passage de variable avec récupération en PHP" ?

de plus parler de variables et de php c'est déjà avoir envisagé une solution. donc si elle pêche. comment on peut t'aider si tu ne dit rien ?

si le besoin fonctionnel était exprimé on pourrait t'orienter vers diverses solutions mais là encore on ne sait pas ce que tu veux faire.

pour passer de php à JS dans une page
il faut dans php mettre les données dans un tableau avec la structure de son choix

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$scriptData = Array(
  'resultCode' => 200,
  'message' => "Jusqu'ici tout va bien !",
  'user' => get_object_vars($mySqlQueryResult)
);

Inclure dans l'entête de la page

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<script type="text/javascript">
  scriptData = <?php echo json_encode($scriptData ); ?>;
</script>

les données sont alors disponible dans tout JS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
alert(scriptData.message);
  document.getElementById('btn').onclick = function () {
    if (200 == scriptData.resultCode) {
      alert('user name : ' + scriptData.user.name)
    } else {
      alert('invalid Query !')
    }
  }

par contre si ton besoin c'est dynamiquement demander à php des données
il te fut passer par AJAX le plus simple est de faire une url php de service qui comme dans l'exemple ci dessus place les données dans un tableau. et ajouter

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
header('Content-type: application/json');
echo json_encode($scriptData );

Attention à l'encodage qui doit être en UTF-8

côté js tu fais un appel ajax à cette url et dans la callback tu fais un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var data= JSON.parse(response.text);

dans un cas comme dans l'autre en faisant ainsi tu as côté php une HasMap qui contient une structure de donnée de ton choix
et tu obtiens un objet javascript qui a exactement la même structure.

A+JYT

**SylvainPV** · 06/12/2014, 14h37

Si je comprends bien, tes "variables" sont le style associés au t-shirt. Là tu récupères les éléments HTML des boutons d'action, ce n'est pas ça qui t'intéresse. Ces boutons d'action modifient le style CSS de #zone, donc ce qui t'intéresse c'est le style de la zone: document.getElementById("zone").style;Pour envoyer les données au serveur, soit tu soumets un formulaire avec les données dans des champs cachés (old school), soit tu passes par AJAX. Un exemple avec AJAX et jQuery:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
function envoyerDonneesServeur(){
   var zone = document.getElementById("zone");
   $.post("saveObject.php", {
       fontSize: zone.style.fontSize,
       fontColor: zone.style.color,
       text: zone.textContent
      // , etc... avec toutes les autres données qui t'intéressent
  }, function(){ alert("Données enregistrées !"); );

**bernard26000** · 06/12/2014, 14h47

Bonjour et merci pour vos réponses,

Désolé pour le manque de précision de mon intervention

Il s'agit bien de récupérer toutes les variables modèle de tee shirt, police, taille de la police, couleur..... de transformer ces variables en variables PHP que je pourrais exploiter pour création d'un bon de commande par exemple.

J'ai effectivement lu que la méthode la plus efficace passait par l'AJAX

Conclusion, je vais me pencher sur vos 2 réponses, ça va m'occuper pendant un petit moment je crois

Encore merci

**sekaijin** · 06/12/2014, 17h08

j'avais compris que tu voulais passer les variable de php à javascript

pour le contraire post d'un form
ou envois d'un JSON via Ajax sont les deux méthodes les plus simples

A+JYT

**bernard26000** · 12/12/2014, 05h24

Bonjour à tous et toutes

Suite de la saga....

Finalement j'ai opté pour le passage de mes variables JavaScript pour utilisation en PHP dans l'input hidden d'un form, peut être plus raisonnable vu mon niveau en JavaScript...

J'ai crée une fonction "remplirInput" que voilà :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function remplirInput() {
    var zone = document.getElementById("zone");
	var texte = zone.texte ;
	document.getElementById('text').setAttribute('value', texte);
	var fontSize = zone.style.fontSize;
        document.getElementById('fontSize').setAttribute('value', fontSize);
    var fontColor = zone.style.color;
    	document.getElementById('fontColor').setAttribute('value', fontColor);
	var fontFamily = zone.style.fontFamily;
    	document.getElementById('fontFamily').setAttribute('value', fontFamily);
	var fontStyle = zone.style.fontStyle;
    	document.getElementById('fontStyle').setAttribute('value', fontStyle);
	var fontWeight = zone.style.fontWeight;
    	document.getElementById('fontWeight').setAttribute('value', fontWeight);
}

Pour les propriétés CSS j'appelle la fonction comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
function setZoneCSS(propriete, valeur) {
    var zone = document.getElementById("zone");
    if (zone) {
        zone.style[propriete] = valeur;
        remplirInput();
    }
}

Je mets ça dans des Input hidden d'un formulaire et je récupère sur une autre page avec un "echo" (pour l'instant et pour vérifier que ça fonctionne) et tout se passe bien pour les propriétés CSS.
par contre pour appeler la variable "texte" j'ai fais un appel similaire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
function change_cellule(texte){
	var zone = document.getElementById('zone').innerHTML = texte; 
	if (zone) {
		zone.texte[text] = valeur;
		remplirInput();
	}
}

Ca par contre ça ne fonctionne pas, j'ai essayé de changer "innerHTML = texte" par "value" mais... pas mieux de plus je pense que j'aurai la même difficulté pour faire passer la variable concernant mon image de fond :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function ChangeImage(url) {
	document.getElementById("img").src = url;
}

Merci à vous

**SpaceFrog** · 12/12/2014, 08h26

mets un input hidden par variable ...

**sipatsymasaka** · 12/12/2014, 09h12

Envoyé par bernard26000

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function ChangeImage(url) {
	document.getElementById("img").src = url;
}

Tu as pourtant la bonne syntaxe, mais reste à vérifier si tu as vraiment un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 <img id="img" ...>

parce tu utilise getElementById
et vérifie également que url est une chaine de caractère montrant le bon chemin.

Bonne continuation

**NoSmoking** · 12/12/2014, 14h12

Bonjour,
@sipatsymasaka:

...mais reste à vérifier si tu as vraiment un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 <img id="img" ...>

parce tu utilise getElementById...

on trouve bien dans son code(voir post #1]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="images/01.jpg" width="540" height="600" id="img">

@bernard26000:
Dans ton code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
	var zone = document.getElementById('zone').innerHTML = texte; 
	if (zone) {
		zone.texte[text] = valeur;
		remplirInput();
	}

zone est une chaine de caractère donc zone.texte ne veux rien dire.

**bernard26000** · 13/12/2014, 20h14

Bonsoir

J'ai profité un peu du samedi pour bosser surtout apres vos différentes remarques et apres avoir potassé plusieurs forums et tutoriel j'ai pondu un script pour intégrer mon texte dans mon input que voici :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<script language="javascript"> 
 
 function change_cellule(texte)
 {
var zone = document.getElementById('zone').value;
     if (zone) {
        var text = zone.value;
  		remplirInput();
 }
}
 
 </script>

j'ai surement amélioré mon script mais ca ne marche pas, j'ai toujours une page blanche à l'autre bout, mais ce qui m'inquiète c'est que je n'ai pas le "undefined" d'une variable qui n'est pas définie, je ne sais pas si ca vous parle... ?

Merci

**NoSmoking** · 14/12/2014, 08h27

Tu ne tires pas enseignement des réponses qui te sont faites

Envoyé par SylvainPV

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
function setZoneCSS(propriete, valeur){
   var zone = document.getElementById("zone");
   if(zone){
       zone.style[propriete] = valeur;
   }
}

ainsi que...

Envoyé par NoSmoking

zone est une chaine de caractère donc zone.texte ne veux rien dire.

et tu continues d'écrire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
function change_cellule(texte) {
    var zone = document.getElementById('zone').value;
    if (zone) {
        var text = zone.value;
        remplirInput();
    }
}

au passage <script language="javascript"> est obsolète, <script> suffit voire encore <script type="text/javascript">.

**bernard26000** · 14/12/2014, 09h45

Bonjour,

C'est sûr que je ne vais pas tarder à devenir fou...
Problème avec la "zone" qui est à mon niveau de compréhension, une "boite" qui renferme un texte et ses valeurs CSS
Pour le CSS je n'ai aucun problème avec le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript"> 
 
   function setZoneCSS(propriete, valeur) {
    var zone = document.getElementById("zone");
    if (zone) {
        zone.style[propriete] = valeur;
        remplirInput();
    }
}
 
 </script>

Je reçois parfaitement toutes les valeurs CSS sur ma page traitement...

Quand je fais une fonction "alert"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 <script type="text/javascript">
function change_cellule(texte)
 {
 texte = document.getElementById('zone').innerHTML; {
		 alert(texte);
}
 }
</script>

Ca fonctionne aussi, j'ai bien le texte écrit dans la fenêtre qui va bien, ca me trouve bien la valeur du "texte" qui se trouve dans "zone"....

Et quand je fais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript"> 
 
 function change_cellule(texte)
 {
	text = document.getElementById("zone").innerHTML;
      {
        var text = zone.value;
  		remplirInput();
 }
}
 
 </script>

Est ce que je ne donne pas la valeur de ce qui se trouve dans "zone" avec "var text = zone.value" ????
A moins que ça soit ici que ca plante

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 function remplirInput() {
               var zone = document.getElementById("zone");{
	var texte = zone.texte ;
	document.getElementById('text').setAttribute('value', texte);
}

Faut pas m'en vouloir

Mais le JavaScript je découvre

Personnalisation d'objets côté visiteur

JavaScript

Discussions similaires

Partager

Partager