It is currently Thu 29 Sep 2016 - 17:13 - créer un forum

[Tutoriel] Popup persistante pour les invités

Skip to content

Post new topic Reply to topic Goto page: 1, 2, 3, 4, 5  >

[Tutoriel] Popup persistante pour les invités
Author Message
Kyosuke
Contributeurs


Offline
Contributeurs

Joined: 30 Mar 2009
Posts: 436
Niveau:
Point(s): 532
Moyenne: 1.22
Windows 8 ou 10 Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin

PostPosted: Wed 2 Apr 2014 - 19:26    Post subject: [Tutoriel] Popup persistante pour les invités Reply with quote

PublicitéSupprimer les publicités ?
> Informations sur le tutoriel
NomPopup persistante pour les invités
AuteurKyosuke (MP)
Version1.0
DescriptionAffiche une notification aux invités leur permettant de s'inscrire ou de se connecter à votre forum, accompagné d'un message personnalisé.
Langage utiliséJavascript
Temps d'installationde 5 à 10 minutes
DifficultéFacile
CompatibilitéGoogle Chrome, Mozilla Firefox, Internet Explorer, Opera, Safari. (avec un navigateur à jour, c'est mieux ! Smile)




Avant de débuter ce tutoriel, sachez qu'une vidéo est disponible pour vous aider à mettre en place le système de popup.
N'hésitez surtout pas à vous en servir pour vous repérer tout au long de ce tutoriel.






Etape 1 : Installer et paramétrer le script

Le script va ajouter une popup persistante pour les invités, leur permettant de s'inscrire ou de se connecter sur votre forum accompagnée d'un message que vous aurez rédigé à leur intention.
Il est donc important de l'installer et de le paramétrer correctement.

Avant toute modification sur vos templates, pensez à faire des sauvegardes afin de ne pas perdre votre travail en cas d'erreur de manipulation.
Vous pouvez par exemple copier-coller le contenu de vos templates dans le bloc-notes de Windows.

Le template que nous allons modifier se nomme overall_footer.tpl, ce template contient le pied de page de votre forum.
C'est ici que nous allons inclure le script.

Allez donc dans votre panneau d'administration, section thème, puis sélectionnez le lien modifier les templates.
Sur cette page, vous allez voir la liste de tous les templates de votre forum, cherchez donc le template overall_footer.tpl et cliquez sur le bouton modifier situé à droite du nom du template.

Vous êtes maintenant sur la page d'édition du template overall_footer.tpl, ajoutez ceci au début du template :

Code: Sélectionner - Agrandir
<!------------------------------------------------------------------------------
    XOOIT POPUP
    [DEBUT]
---->
<script type="text/javascript" src="http://pokemon.power.free.fr/xooit/xooitPopup.js"></script>
<script type="text/javascript">
  xooitPopup.init({
  userLevel: '{S_USER_LEVEL}',
  title: 'Bienvenue invité :',
  content: '<p><b>Bienvenue sur le forum !</b></p><p>Si c\'est votre première visite, n\'hésitez pas a vous <b>inscrire</b>, vous pouvez également vous <b>connecter</b> si vous avez un compte.</p><p>Utilisez les boutons situés ci-dessous pour faire votre choix.</p>',
  effect: 'bumpIn',
  style: 'light',
  registerBtn: 'Inscription',
  loginBtn: 'Connexion',
  mode: 'discret'
});
</script>
<!----
    XOOIT POPUP
    [FIN]
------------------------------------------------------------------------------->


Bien, vous venez d'inclure le script par défaut, il vous faut maintenant le modifier afin qu'il corresponde à ce que vous souhaitez en faire.
Voici quelques explications à son sujet :

userLevel :

- userLevel contient le groupe auquel appartient l'utilisateur qui va naviguer sur votre forum, ce qui va nous permettre d'afficher ou non la popup. Ne touchez pas à cette option, elle est importante et sans elle, le script ne fonctionnerait pas correctement (une alerte s'affichera à l'écran pour vous prévenir dans le cas où cette option serait absente, que vous soyez un invité ou non).

title:

- title contient le titre de la popup, tout comme pour le titre des sujets de votre forum, c'est une phrase d'accroche. Vous pouvez modifier cette option à votre guise. Cette option n'est pas obligatoire. Le HTML est autorisé dans cette option, mais déconseillé. Si vous devez utilisez des apostrophes dans cette option, ajoutez un slash avant l'apostrophe (par exemple : l\'aventure) de manière a échapper les caractères, autrement, le script ne fonctionnera pas.
si vous n'ajoutez pas cette option, la valeur par défaut sera : "Bienvenue Invité :"

content :

- content contient le contenu du message de la popup, vous pouvez modifier cette option à votre guise. Sachez que le HTML est autorisé dans cette option, ce qui signifie que vous avez une totale libertée sur ce que vous souhaitez inclure (image, vidéo, texte, etc) et que cette option n'est pas obligatoire. Si vous devez utilisez des apostrophes dans cette option, ajoutez un slash avant l'apostrophe (par exemple : l\'aventure) de manière a échapper les caractères, autrement, le script ne fonctionnera pas.
si vous n'ajoutez pas cette option, la valeur par défaut sera la suivante :

Code: Sélectionner - Agrandir
<p><b>Bienvenue sur le forum !</b></p><p>Si c'est votre première visite, n'hésitez pas à vous <b>inscrire</b>, vous pouvez également vous <b>connecter</b> si vous avez un compte.</p><p>Utilisez les boutons situés ci-dessous pour faire votre choix.</p>


effect :

- effect contient l'animation d'apparition et de disparition de la popup (lors de l'ouverture et de la fermeture). 9 effets sont disponibles : "slideBottom", "slideLeft", "slideTop", "SlideRight", "fade", "bumpIn", "bumpOut", "rotateTop" et "rotateLeft". Choissisez celle qui vous plait le plus ! Smile Cette option n'est pas obligatoire et ne peut pas contenir de HTML, vous pouvez faire un seul choix parmi les 9 effets. Cette option n'est pas obligatoire.
si vous n'ajoutez pas cette option, la valeur par défaut sera : "bumpIn"

Voir la vidéo de démonstration des différents effets :



mode :

- mode contient le mode d'affichage de la popup. trois modes sont disponibles :
  • discret : le mode discret affiche la popup sur toutes les pages du forum jusqu'à ce que l'utilisateur ferme la popup. Suite à cela, la popup ne sera plus affichée pendant un mois pour ne pas gêner le visiteur.
  • normal : le mode normal affiche la popup sur toutes les pages du forum jusqu'à ce que l'utilisateur ferme la popup. Suite à cela, la popup ne sera plus affichée, mais elle se réactivera lors de sa prochaine visite.
  • continu : le mode continu affiche la popup sur toutes les pages du forum.

si vous n'ajoutez pas cette option, la valeur par défaut sera : "discret"

style :

- style contient le thème visuel de la popup, vous pouvez choisir entre "light" qui est un thème clair et "dark" qui est un thème sombre (voir les images de présentation situées un peu plus haut pour voir la différence entre les deux thèmes). cette option n'est pas obligatoire.
si vous n'ajoutez pas cette option, la valeur par défaut sera : "light"

registerBtn :

- registerBtn contient le texte du bouton d'inscription. Vous pouvez donc changer le texte comme vous le souhaitez. Cette option n'est pas obligatoire.
si vous n'ajoutez pas cette option, la valeur par défaut sera : "Inscription:"

loginBtn :

- loginBtn contient le texte du bouton de connexion. Vous pouvez donc changer le texte comme vous le souhaitez. Cette option n'est pas obligatoire.
si vous n'ajoutez pas cette option, la valeur par défaut sera : "Connexion:"

Une fois que vous avez paramétré le script, sauvegardez le template.

Félicitations, vous avez installé une popup persistante moderne pour les invités ! Very Happy




A savoir :

- La popup ne s'affichera que pour les invités (les membres non connectés ainsi que les visiteurs n'ayant pas encore de compte).

- Si le visiteur ferme la popup, celle-ci ne s'affichera plus pendant un mois entier (grâce à un cookie enregistré dans son navigateur), de manière a éviter que celle-ci gêne sa navigation sur votre forum. Passé ce mois, la popup réapparaitra.

- Même si la popup contient deux thèmes prédéfinis, sachez que vous pouvez modifier le CSS de celle-ci comme bon vous semble à partir du moment où vous connaissez un minimum ce langage.




Foire aux questions (F.A.Q) :

Comment puis-je centrer les boutons de la popup ?
> Lire ce message pour y trouver votre réponse.

Comment puis-je ajouter une image dans la popup ?
> Lire ce message pour y trouver votre réponse.




C'est tout ce qu'il y a à savoir, si vous avez des suggestions ou des questions, n'hésitez pas !
Le script étant hébergé sur mon serveur perso, il évoluera sans que vous n’ayez besoin de faire la moindre modification.

N'hésitez pas à visiter ce sujet de temps en temps pour consulter les dernières nouveautés !

Fin du tutoriel.


_______________________
Following members like this message:
RotorMan (02/04/14), Khow (20/07/14), Dariel (17/07/15)


Last edited by Kyosuke on Fri 11 Jul 2014 - 07:13; edited 16 times in total
Forum
Author Message
kieffer
Membre


Offline
Membre

Joined: 12 Nov 2009
Posts: 411
Niveau:
Point(s): 396
Moyenne: 0.96
Mac Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Gémeaux (21mai-20juin)

PostPosted: Wed 2 Apr 2014 - 19:35    Post subject: [Tutoriel] Popup persistante pour les invités Reply with quote

ok je teste ce soir
_______________________
Membre fondateur de Graphcode
Forum d'entraide gratuit graphisme et code multi-plateformes
Ressources photoshop et gimp gratuites



Forum
Author Message
RotorMan
Contributeurs


Offline
Contributeurs

Joined: 21 Dec 2006
Posts: 382
Niveau:
Point(s): 363
Moyenne: 0.95
Windows 8 ou 10 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Bélier (21mar-19avr) 龍 Dragon

PostPosted: Wed 2 Apr 2014 - 20:03    Post subject: [Tutoriel] Popup persistante pour les invités Reply with quote

Bonsoir,

Avant tout, merci pour ce script.

Testé sous Firefox : ok
Testé sous Chrome : ok
Testé sous IE 10 : le PopUp ne se ferme pas. Il faut rafraichir la page pour que le PopUp puisse se fermer après avoir cliquer sur fermer.

De plus sous Firefox et Chrome, le PopUp s'affiche bien au centre de la page, sous IE 10 il est décalé vers le bas côté droit.



Aperçu avec Chromium (identique sous Firefox) :



Bonne soirée Smile
_______________________
Je ne répond plus aux demandes d'aide par MP. Le forum d'entraide est fait pour cela.
La lecture du règlement est obligatoire
50 balais mais 30 dans ma tête.


Forum
Author Message
Kyosuke
Contributeurs


Offline
Contributeurs

Joined: 30 Mar 2009
Posts: 436
Niveau:
Point(s): 532
Moyenne: 1.22
Windows 8 ou 10 Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin

PostPosted: Wed 2 Apr 2014 - 20:10    Post subject: [Tutoriel] Popup persistante pour les invités Reply with quote

Salut RotorMan !

Tout d'abord merci pour ton retour !

Pour ma part je n'ai testé que sur Internet Explorer 11, je vais tester sur Internet explorer 10 et j'éditerai mon post en fonction. Smile
_______________________


Last edited by Kyosuke on Wed 2 Apr 2014 - 20:27; edited 5 times in total
Forum
Author Message
RotorMan
Contributeurs


Offline
Contributeurs

Joined: 21 Dec 2006
Posts: 382
Niveau:
Point(s): 363
Moyenne: 0.95
Windows 8 ou 10 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Bélier (21mar-19avr) 龍 Dragon

PostPosted: Wed 2 Apr 2014 - 20:17    Post subject: [Tutoriel] Popup persistante pour les invités Reply with quote

Re,

Voilà une autre capture d'écran sous IE 10. Smile



Bonne soirée Smile

Edit : Le PopUp se ferme très bien si on ouvre la console (F12) de IE 10. oO Petit conflit quelque part... Very Happy
_______________________
Je ne répond plus aux demandes d'aide par MP. Le forum d'entraide est fait pour cela.
La lecture du règlement est obligatoire
50 balais mais 30 dans ma tête.


Forum
Author Message
Kyosuke
Contributeurs


Offline
Contributeurs

Joined: 30 Mar 2009
Posts: 436
Niveau:
Point(s): 532
Moyenne: 1.22
Windows 8 ou 10 Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin

PostPosted: Wed 2 Apr 2014 - 20:28    Post subject: [Tutoriel] Popup persistante pour les invités Reply with quote

Après avoir fait quelques tests, je n'arrive pas a reproduire le problème sur IE10.
Si une autre personne pouvait me confirmer le problème, ce serait génial. Smile

J'utilise la propriété CSS3 translate pour centrer la popup.
Cette propriété est prise en charge par IE10 et devrait fonctionner correctement.

J'ai fait quelques modifs sur le script peu de temps après avoir posté ce sujet, il y a peut-être un souci de mise en cache, mais vu que tu fais CTRL+F5 (ce qui vide le cache du navigateur tout en rafraichissant la page), ça me parait peu probable.


_______________________


Last edited by Kyosuke on Wed 2 Apr 2014 - 20:33; edited 1 time in total
Forum
Author Message
RotorMan
Contributeurs


Offline
Contributeurs

Joined: 21 Dec 2006
Posts: 382
Niveau:
Point(s): 363
Moyenne: 0.95
Windows 8 ou 10 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Bélier (21mar-19avr) 龍 Dragon

PostPosted: Wed 2 Apr 2014 - 20:32    Post subject: [Tutoriel] Popup persistante pour les invités Reply with quote

Re,

Ctrl + F5 ne ferme pas la PoUp, excuses moi. Juste relancer la page pour le fermer.
Mon IE 10 est à jour et vide de tout bloqueur et de toute restriction (je m'en sert pour tester mon forum).
Et mon forum utilise aussi du css3, donc cela ne pose pas de problème.

Étrangement, lorsque j'ouvre la console de IE 10 (F12), le clic sur la fermeture de la PopUp devient actif. oO

Autre bug :

Sous Firefox et sous Chrome, lorsque l'on clique sur "Connexion" ou sur "Inscription", la PopUp mène bien au formulaire. Mais la PopUp se relance, il faut cliquer sur fermer pour s'en débarrasser.

Voilà, je crois que le principal a été testé. Smile

Bonne soirée et encore merci pour ton travail.

Edit : corrigé une belle faute d'orthographe.... oO
_______________________
Je ne répond plus aux demandes d'aide par MP. Le forum d'entraide est fait pour cela.
La lecture du règlement est obligatoire
50 balais mais 30 dans ma tête.


Last edited by RotorMan on Wed 2 Apr 2014 - 20:45; edited 1 time in total
Forum
Author Message
Kyosuke
Contributeurs


Offline
Contributeurs

Joined: 30 Mar 2009
Posts: 436
Niveau:
Point(s): 532
Moyenne: 1.22
Windows 8 ou 10 Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin

PostPosted: Wed 2 Apr 2014 - 20:37    Post subject: [Tutoriel] Popup persistante pour les invités Reply with quote

Nous n'avons pas le même rendu sur le même navigateur (le mien aussi ne possède aucun plugin), étrange.
Par curiosité, quelle est la résolution de ton écran ?

RotorMan wrote:
Sous Firefox et Chrome, lorsque l'on clique sur "Connexion" ou sur "Inscription", la PopUp mène bien au formulaire. Mais la PopUp se relance, il faut cliquer sur fermer pour s'en débarrasser.

Voilà, je crois que le principal a été testé. Smile


Exact, la popup réapparaissait lorsqu’on accédait à ces pages.
Je viens de faire la correction, merci à toi. Smile
_______________________


Forum
Author Message
RotorMan
Contributeurs


Offline
Contributeurs

Joined: 21 Dec 2006
Posts: 382
Niveau:
Point(s): 363
Moyenne: 0.95
Windows 8 ou 10 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Bélier (21mar-19avr) 龍 Dragon

PostPosted: Wed 2 Apr 2014 - 20:41    Post subject: [Tutoriel] Popup persistante pour les invités Reply with quote

Re,

Oui Problème corrigé. Le script fonctionne bien sous Firefox et sous Chrome. Smile

Quote:
 
Nous n'avons pas le même rendu sur le même navigateur (le mien aussi ne possède aucun plugin), étrange.
Par curiosité, quelle est la résolution de ton écran ?


Je n'ai pas de plugin sur IE pour rappel.
Ma résolution actuelle est 1600 x 900
_______________________
Je ne répond plus aux demandes d'aide par MP. Le forum d'entraide est fait pour cela.
La lecture du règlement est obligatoire
50 balais mais 30 dans ma tête.


Forum
Author Message
RotorMan
Contributeurs


Offline
Contributeurs

Joined: 21 Dec 2006
Posts: 382
Niveau:
Point(s): 363
Moyenne: 0.95
Windows 8 ou 10 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Bélier (21mar-19avr) 龍 Dragon

PostPosted: Wed 2 Apr 2014 - 20:49    Post subject: [Tutoriel] Popup persistante pour les invités Reply with quote

Re,

Voilà une capture d'écran de la page complète sous IE 10

Je ne comprend pas non plus pourquoi on n'a pas le même rendu. oO
Quoi que, nos versions IE sont légèrement différentes... Une mise à jour chez moi qui mettrait le bazar ? M'étonnerait pas avec Cr@$@ft.



Edit : Encore des fautes à faire honte. oO
_______________________
Je ne répond plus aux demandes d'aide par MP. Le forum d'entraide est fait pour cela.
La lecture du règlement est obligatoire
50 balais mais 30 dans ma tête.


Last edited by RotorMan on Wed 2 Apr 2014 - 20:52; edited 2 times in total
Forum
Author Message
kieffer
Membre


Offline
Membre

Joined: 12 Nov 2009
Posts: 411
Niveau:
Point(s): 396
Moyenne: 0.96
Mac Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Gémeaux (21mai-20juin)

PostPosted: Wed 2 Apr 2014 - 20:49    Post subject: [Tutoriel] Popup persistante pour les invités Reply with quote

bonsoir vite fait
sous chrome et safari elle apparait bien la premiere fois puis si on clique sur fermer elle ne réapparaît plus meme si on quitte le forum et qu'on revient dessus

voila tres rapide
_______________________
Membre fondateur de Graphcode
Forum d'entraide gratuit graphisme et code multi-plateformes
Ressources photoshop et gimp gratuites



Forum
Author Message
Kyosuke
Contributeurs


Offline
Contributeurs

Joined: 30 Mar 2009
Posts: 436
Niveau:
Point(s): 532
Moyenne: 1.22
Windows 8 ou 10 Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin

PostPosted: Wed 2 Apr 2014 - 20:53    Post subject: [Tutoriel] Popup persistante pour les invités Reply with quote

Ah, j'arrive enfin a reproduire le problème, mais uniquement sur ton forum, pas sur mon forum de test.

Quand tu es sur Internet explorer 10, appuie sur F12.

Les outils pour développeurs vont s'afficher dans une sorte de barre en bas du navigateur.
Rafraichis ensuite la page de ton forum.

Que vois-tu à l'emplacement surligné en jaune fluo sur cette image :



Quote:
sous chrome et safari elle apparait bien la premiere fois puis si on clique sur fermer elle ne réapparaît plus meme si on quitte le forum et qu'on revient dessus


C'est tout à fait normal Kieffer, lorsque le visiteur ferme la popup, un cookie est enregistré dans son navigateur pour sauvegarder son choix, de manière a ce que la popup ne s'affiche pas à chaque changement de page, ce qui énerverait sûrement le visiteur et l'empêcherait d'apprécier pleinement sa navigation sur ton forum.

En gros, lorsque le visiteur ferme la popup, celle-ci ne s'affichera plus pendant un mois.
_______________________


Last edited by Kyosuke on Wed 2 Apr 2014 - 20:58; edited 1 time in total
Forum
Author Message
RotorMan
Contributeurs


Offline
Contributeurs

Joined: 21 Dec 2006
Posts: 382
Niveau:
Point(s): 363
Moyenne: 0.95
Windows 8 ou 10 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Bélier (21mar-19avr) 龍 Dragon

PostPosted: Wed 2 Apr 2014 - 20:56    Post subject: [Tutoriel] Popup persistante pour les invités Reply with quote

Re,

Norme IE9 oO cela m'avait échappé lorsque j'ouvrais la console. je pense savoir d'où cela vient. je reviens te dire .
_______________________
Je ne répond plus aux demandes d'aide par MP. Le forum d'entraide est fait pour cela.
La lecture du règlement est obligatoire
50 balais mais 30 dans ma tête.


Forum
Author Message
kieffer
Membre


Offline
Membre

Joined: 12 Nov 2009
Posts: 411
Niveau:
Point(s): 396
Moyenne: 0.96
Mac Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Gémeaux (21mai-20juin)

PostPosted: Wed 2 Apr 2014 - 20:58    Post subject: [Tutoriel] Popup persistante pour les invités Reply with quote

pour les test oups
_______________________
Membre fondateur de Graphcode
Forum d'entraide gratuit graphisme et code multi-plateformes
Ressources photoshop et gimp gratuites



Forum
Author Message
RotorMan
Contributeurs


Offline
Contributeurs

Joined: 21 Dec 2006
Posts: 382
Niveau:
Point(s): 363
Moyenne: 0.95
Windows 8 ou 10 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Bélier (21mar-19avr) 龍 Dragon

PostPosted: Wed 2 Apr 2014 - 21:00    Post subject: [Tutoriel] Popup persistante pour les invités Reply with quote

Re,

Kyosuke wrote:
Ah, j'arrive enfin a reproduire le problème, mais uniquement sur ton forum, pas sur mon forum de test.

Quand tu es sur Internet explorer 10, appuie sur F12.

Que vois-tu à l'emplacement surligné en jaune fluo sur cette image :




RotorMan wrote:
Re,

Norme IE9 oO cela m'avait échappé lorsque j'ouvrais la console. je pense savoir d'où cela vient. je reviens te dire .


Kyosuke, bien vu ! C'était
Code: Sélectionner - Agrandir
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9" />
qui posait problème, je l'ai neutralisé. Fonctionne impeccablement bien sous IE 10. PopUp centrée et fermeture fonctionnelle.

Tout est donc OK.
_______________________
Je ne répond plus aux demandes d'aide par MP. Le forum d'entraide est fait pour cela.
La lecture du règlement est obligatoire
50 balais mais 30 dans ma tête.
Following members like this message:
Kyosuke (02/04/14)


Forum
Author Message
Contenu Sponsorisé





PostPosted: Today at 17:13    Post subject: [Tutoriel] Popup persistante pour les invités

Display posts from previous:   
Reply to topic Page 1 of 5 Goto page: 1, 2, 3, 4, 5  >




Portal | Index | Administration Panel | Create a forum | Free support forum | Free forums directory | Report a violation | Conditions générales d'utilisation
Propulsé par p h p B B © 2016 p h p B B Group |
 
© 2003-2013 Xooit.com - Contact - Mentions légales - CGU - Charte - CNIL : 1381401