Pluie étoilée du curseur

[sangothias]

Bonjour,

 

Je suis nouveau sur le forum et en train de réaliser en local mon premier site sous prestashop.

Voila ma question: J'ai un code source pour attribuer une pluie étoilée au curseur. Je l'ai déjà fait sur plusieurs sites, mais sous prestashop, la chose semble plus compliquée...J'ai tenté de l'intégrer sur montheme/header.tpl mais ca ne fonctionne pas. Je suis à court d'idées.

Merci d'avance

[Sbizz]

Bonjour.

 

Il serait intéressant de nous présenter ce code, car là comme ça, je vois pas comment t'aider.

[sangothias]

Ok, voici le code. c'est du js donc c'est a mettre dans la balise head...

 

<script type="text/javascript">

var colour="#000000";

var sparkles=50;

var x=ox=400;

var y=oy=300;

var swide=800;

var shigh=600;

var sleft=sdown=0;

var tiny=new Array();

var star=new Array();

var starv=new Array();

var starx=new Array();

var stary=new Array();

var tinyx=new Array();

var tinyy=new Array();

var tinyv=new Array();

window.onload=function() { if (document.getElementById) {

var i, rats, rlef, rdow;

for (var i=0; i<sparkles; i++) {

var rats=createDiv(3, 3);

rats.style.visibility="hidden";

document.body.appendChild(tiny=rats);

starv=0;

tinyv=0;

var rats=createDiv(5, 5);

rats.style.backgroundColor="transparent";

rats.style.visibility="hidden";

var rlef=createDiv(1, 5);

var rdow=createDiv(5, 1);

rats.appendChild(rlef);

rats.appendChild(rdow);

rlef.style.top="2px";

rlef.style.left="0px";

rdow.style.top="0px";

rdow.style.left="2px";

document.body.appendChild(star=rats);

}

set_width();

sparkle();

[spam-filter]

function sparkle() {

var c;

if (x!=ox || y!=oy) {

ox=x;

oy=y;

for (c=0; c<sparkles; c++) if (!starv[c]) {

star[c].style.left=(starx[c]=x)+"px";

star[c].style.top=(stary[c]=y)+"px";

star[c].style.clip="rect(0px, 5px, 5px, 0px)";

star[c].style.visibility="visible";

starv[c]=50;

break;

}

}

for (c=0; c<sparkles; c++) {

if (starv[c]) update_star©;

if (tinyv[c]) update_tiny©;

}

setTimeout("sparkle()", 40);

}

function update_star(i) {

if (--starv==25) star.style.clip="rect(1px, 4px, 4px, 1px)";

if (starv) {

stary+=1+Math.random()*3;

if (stary<shigh+sdown) {

star.style.top=stary+"px";

starx+=(i%5-2)/5;

star.style.left=starx+"px";

}

else {

star.style.visibility="hidden";

starv=0;

return;

}

}

else {

tinyv=50;

tiny.style.top=(tinyy=stary)+"px";

tiny.style.left=(tinyx=starx)+"px";

tiny.style.width="2px";

tiny.style.height="2px";

star.style.visibility="hidden";

tiny.style.visibility="visible"

}

}

function update_tiny(i) {

if (--tinyv==25) {

tiny.style.width="1px";

tiny.style.height="1px";

}

if (tinyv) {

tinyy+=1+Math.random()*3;

if (tinyy<shigh+sdown) {

tiny.style.top=tinyy+"px";

tinyx+=(i%5-2)/5;

tiny.style.left=tinyx+"px";

}

else {

tiny.style.visibility="hidden";

tinyv=0;

return;

}

}

else tiny.style.visibility="hidden";

}

document.onmousemove=mouse;

function mouse(e) {

set_scroll();

y=(e)?e.pageY:event.y+sdown;

x=(e)?e.pageX:event.x+sleft;

}

function set_scroll() {

if (typeof(self.pageYOffset)=="number") {

sdown=self.pageYOffset;

sleft=self.pageXOffset;

}

else if (document.body.scrollTop || document.body.scrollLeft) {

sdown=document.body.scrollTop;

sleft=document.body.scrollLeft;

}

else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {

sleft=document.documentElement.scrollLeft;

sdown=document.documentElement.scrollTop;

}

else {

sdown=0;

sleft=0;

}

}

window.onresize=set_width;

function set_width() {

if (typeof(self.innerWidth)=="number") {

swide=self.innerWidth;

shigh=self.innerHeight;

}

else if (document.documentElement && document.documentElement.clientWidth) {

swide=document.documentElement.clientWidth;

shigh=document.documentElement.clientHeight;

}

else if (document.body.clientWidth) {

swide=document.body.clientWidth;

shigh=document.body.clientHeight;

}

}

function createDiv(height, width) {

var div=document.createElement("div");

div.style.position="absolute";

div.style.height=height+"px";

div.style.width=width+"px";

div.style.overflow="hidden";

div.style.backgroundColor=colour;

return (div);

}

// ]]>

</script>

[Broceliande]

A défaut d'apprendre à développer un module , ta première idée était la bonne :

Tu trouveras les balises <head></head> dans header.tpl à la racine du dossier de ton thème.

 

Mais voici deux astuces pour que ça fonctionne :

 

1) Ton script contien des braces ( { ) qui sont parsées par smarty comme du code smarty , sauf si ... tu places ton script entre deux balises smarty literal :

 

{literal}<script type="text/javascript">...........<script type="text/javascript"></script>{/literal}

 

2) penses à vider le cache smarty après ta modif en supprimant tout ce qui se trouve dans /tools/smarty/compile, à l'exception de index.php

[sangothias]

Merci, je n'avait pas pensé à smarty...

 

Toujours est il qu'après modif, ca ne fonctionne toujours pas. Je vais tenter de réfléchir un peu de mon cöté avant de poster le code modifié. merci, je te tiens informé

[sangothias]

Tiens, d'ailleurs c'est quoi ces // ]]> avant la balise de fermeture du head??

[sangothias]

Es tu sur de cette fermeture? <script type="text/javascript"></script>{/literal}

est ce que </script>{/literal} n'est pas suffisant?

[Broceliande]

Es tu sur de cette fermeture? <script type="text/javascript"></script>{/literal}

est ce que </script>{/literal} n'est pas suffisant?

 

Oui tout à fait c'est un malheureux copeir coller ... je donnais la clé , je ne voulais pas recoller tout le code , histoire de bien faire comprendre ce qui permet d'insérer du code js sainement dans smarty ...

 

Je la refais en encore plus simple :

 

le code javascript doit être inséré entre les balises {litéral} et {/literal} .. that's all folks .

 

le tag de fermeture

// ]]>

est la fermeture d'une section CDATA , utilisée pour que le js ne soit par exemple pas parsé par les moteurs ou les validateurs ... il était déja dans ton code , mais il n'y a pas le code d'ouverture... donc ton code est incomplet ...

[sangothias]

Un grand merci, cela fonctionne parfaitement maintenant! J'ai du completer le code source, mais tout va bien maintenant! Le site sera bientôt en ligne à l'adresse www.gaia-lee.com

 

 

MMMEEEEERRRRRRCCCCIIIIII!!!!!

[luci1]

Un petit [RESOLU] du coup ?

[sangothias]

Oui j'aimerai bien, je suppose qu'il faut éditer le titre du topic, mais je ne trouve pas...Je n'ai pas trop l'habitude des forums, désolé...

[poesiedesperles]

Bonjour Sangothias, est-il possible de partager le code ?

Cela pourrait servir à d'autres boutiques Prestashop...

[sangothias]

Oui, du coup, ca donne:

 

{literal}<script type="text/javascript">

// <![CDATA[

var colour="#FFFFFF";

var sparkles=50;

/****************************

* Tinkerbell Magic Sparkle *

* © 2005 mf2fm web-design *

* http://www.mf2fm.co.uk/rv *

* DON'T EDIT BELOW THIS BOX *

* topcode adapté *

****************************/

var x=ox=400;

var y=oy=300;

var swide=800;

var shigh=600;

var sleft=sdown=0;

var tiny=new Array();

var star=new Array();

var starv=new Array();

var starx=new Array();

var stary=new Array();

var tinyx=new Array();

var tinyy=new Array();

var tinyv=new Array();

window.onload=function() { if (document.getElementById) {

var i, rats, rlef, rdow;

for (var i=0; i<sparkles; i++) {

var rats=createDiv(3, 3);

rats.style.visibility="hidden";

document.body.appendChild(tiny=rats);

starv=0;

tinyv=0;

var rats=createDiv(5, 5);

rats.style.backgroundColor="transparent";

rats.style.visibility="hidden";

var rlef=createDiv(1, 5);

var rdow=createDiv(5, 1);

rats.appendChild(rlef);

rats.appendChild(rdow);

rlef.style.top="2px";

rlef.style.left="0px";

rdow.style.top="0px";

rdow.style.left="2px";

document.body.appendChild(star=rats);

}

set_width();

sparkle();

[spam-filter]

function sparkle() {

var c;

if (x!=ox || y!=oy) {

ox=x;

oy=y;

for (c=0; c<sparkles; c++) if (!starv[c]) {

star[c].style.left=(starx[c]=x)+"px";

star[c].style.top=(stary[c]=y)+"px";

star[c].style.clip="rect(0px, 5px, 5px, 0px)";

star[c].style.visibility="visible";

starv[c]=50;

break;

}

}

for (c=0; c<sparkles; c++) {

if (starv[c]) update_star©;

if (tinyv[c]) update_tiny©;

}

setTimeout("sparkle()", 40);

}

function update_star(i) {

if (--starv==25) star.style.clip="rect(1px, 4px, 4px, 1px)";

if (starv) {

stary+=1+Math.random()*3;

if (stary<shigh+sdown) {

star.style.top=stary+"px";

starx+=(i%5-2)/5;

star.style.left=starx+"px";

}

else {

star.style.visibility="hidden";

starv=0;

return;

}

}

else {

tinyv=50;

tiny.style.top=(tinyy=stary)+"px";

tiny.style.left=(tinyx=starx)+"px";

tiny.style.width="2px";

tiny.style.height="2px";

star.style.visibility="hidden";

tiny.style.visibility="visible"

}

}

function update_tiny(i) {

if (--tinyv==25) {

tiny.style.width="1px";

tiny.style.height="1px";

}

if (tinyv) {

tinyy+=1+Math.random()*3;

if (tinyy<shigh+sdown) {

tiny.style.top=tinyy+"px";

tinyx+=(i%5-2)/5;

tiny.style.left=tinyx+"px";

}

else {

tiny.style.visibility="hidden";

tinyv=0;

return;

}

}

else tiny.style.visibility="hidden";

}

document.onmousemove=mouse;

function mouse(e) {

set_scroll();

y=(e)?e.pageY:event.y+sdown;

x=(e)?e.pageX:event.x+sleft;

}

function set_scroll() {

if (typeof(self.pageYOffset)=="number") {

sdown=self.pageYOffset;

sleft=self.pageXOffset;

}

else if (document.body.scrollTop || document.body.scrollLeft) {

sdown=document.body.scrollTop;

sleft=document.body.scrollLeft;

}

else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {

sleft=document.documentElement.scrollLeft;

sdown=document.documentElement.scrollTop;

}

else {

sdown=0;

sleft=0;

}

}

window.onresize=set_width;

function set_width() {

if (typeof(self.innerWidth)=="number") {

swide=self.innerWidth;

shigh=self.innerHeight;

}

else if (document.documentElement && document.documentElement.clientWidth) {

swide=document.documentElement.clientWidth;

shigh=document.documentElement.clientHeight;

}

else if (document.body.clientWidth) {

swide=document.body.clientWidth;

shigh=document.body.clientHeight;

}

}

function createDiv(height, width) {

var div=document.createElement("div");

div.style.position="absolute";

div.style.height=height+"px";

div.style.width=width+"px";

div.style.overflow="hidden";

div.style.backgroundColor=colour;

return (div);

}

// ]]>

</script>{/literal}

 

Il est possible de modifier la couleur, l'abondance ou encore la taille des étincelles en éditant dce js.

[wdfmagicshop]

Bonjour je suis tout nouveau sur prestashop comment connaitre quel fichier php contient le code source de ma page d'acceuil? merci !