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

Personnalisation d'objets côté visiteur

JavaScript

Vue hybride

Discussions similaires

Partager

Partager