Formulaire de commentaire dans un popup de type facebox

StéphaneStéphane Member, Former PluXml Project Manager
dans Modifications
Suite à la demande faite sur ce post http://forum.pluxml.org/viewtopic.php?pid=9441#p9441 ,
je détaille ici la procédure complète pour avoir le formulaire de commentaire dans un popup de type facebox.

Tout d'abord Facebox qu'est-ce que c'est ? Voilà le site pour avoir les infos et quelques demos: http://famspam.com/facebox

Commençons par récuperer les fichiers nécessaires

1/ il nous faut le script Facebox:

http://famspam.com/facebox/releases/facebox-1.2.tar.gz

2/ il nous faut la dernière version jQuery à récuperer ici:

http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js

3/ à la racine de votre site créer un répertoire /plugins/facebox

4/ dans ce dossier décompresser le fichier de l'archive facebox-1.2.tar.gz et copier dedans le fichier jquery-1.3.2.min.js

5/ Éditer le fichier facebox.css et remplacer tous les liens de type /facebox/image.png par image.png (5 remplacements à faire normalement)

Exemple:

remplacer 
#facebox .b {
  background:url(/facebox/b.png);
}
par
#facebox .b {
  background:url(b.png);
}
6/ Editer le fichier header.php de votre theme et en dessous de:
<link rel="alternate" type="application/rss+xml" title="Rss commentaires" href="./feed.php?rss/commentaires" />
ajouter les lignes suivantes:
<script src="plugins/facebox/jquery-1.3.2.min.js" type="text/javascript"></script>
<link href="plugins/facebox/facebox.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="plugins/facebox/facebox.js" type="text/javascript"></script> 
<script language="javaScript" type="text/javascript">
jQuery(document).ready(function($) {
  $('a[rel*=facebox]').facebox()
}) 
</script>
7/ Éditer le fichier article.php de votre thème. nous allons supprimer de ce fichier le formulaire de saisie des commentaires

supprimer les lignes suivantes:
                <?php # Si on autorise les commentaires ?>
		<?php if($plxShow->plxMotor->plxRecord_arts->f('allow_com') AND $plxShow->plxMotor->aConf['allow_com']): ?>
			<div id="form">
				<h2>Ecrire un commentaire</h2>
				<p class="message_com"><?php $plxShow->comMessage(); ?></p>
				<form action="./?<?php $plxShow->get(); ?>#form" method="post">
					<fieldset>
						<label>Nom :</label>
						<input name="name" type="text" size="30" value="<?php $plxShow->comGet('name',''); ?>" maxlength="30" /><br />
						<label>Site (facultatif) :</label>
						<input name="site" type="text" size="30" value="<?php $plxShow->comGet('site','http://'); ?>" /><br />
						<label>E-mail (facultatif) :</label>
						<input name="mail" type="text" size="30" value="<?php $plxShow->comGet('mail',''); ?>" /><br />
						<label>Commentaire :</label>
						<textarea name="content" cols="35" rows="8"><?php $plxShow->comGet('content',''); ?></textarea>
						<?php # Affichage du capcha anti-spam
						if($plxShow->plxMotor->aConf['capcha']): ?>
							<label><strong>Vérification anti-spam</strong> :</label>
							<p><?php $plxShow->capchaQ(); ?> : <input name="rep" type="text" size="10" /></p>
							<input name="rep2" type="hidden" value="<?php $plxShow->capchaR(); ?>" />
						<?php endif; # Fin du if sur le capcha anti-spam ?>
						<p><input type="submit" value="Envoyer" /> <input type="reset" value="Effacer" /></p>
					</fieldset>
				</form>
			</div>
		<?php endif; # Fin du if sur l'autorisation des commentaires ?>
8/ Nous rajoutons un lien pour ouvrir notre fenetre facebox.

En dessous de: 
<h2>Commentaires</h2>
Ajouter les lignes suivantes 
<?php if($plxShow->plxMotor->plxRecord_arts->f('allow_com') AND $plxShow->plxMotor->aConf['allow_com']): ?>
				<h3><a href="<?php $plxShow->template(); ?>/commentaires.php?<?php $plxShow->get(); ?>" rel="facebox">Ecrire un commentaire</a></h3>
				<?php endif; ?>
9/ Il ne reste maintenant plus qu'à créer notre formulaire de commentaires dans un nouveau fichier php.
Dans le dossier de votre thème, créer un fichier commentaires.php et coller dedans le code suivant:
<?php

# Configuration avançée #
define('PLX_ROOT', '../../');
define('PLX_CORE', PLX_ROOT.'core/');
define('PLX_CONF', PLX_ROOT.'data/configuration/parametres.xml');

# On verifie que Pluxml est installé
if(!file_exists(PLX_CONF)) {
	header('Location: '.PLX_ROOT.'install.php');
	exit;
}

# On inclut les librairies nécessaires
include_once(PLX_ROOT.'config.php');
include_once(PLX_CORE.'lib/class.plx.utils.php');
include_once(PLX_CORE.'lib/class.plx.capcha.php');
include_once(PLX_CORE.'lib/class.plx.erreur.php');
include_once(PLX_CORE.'lib/class.plx.glob.php');
include_once(PLX_CORE.'lib/class.plx.record.php');
include_once(PLX_CORE.'lib/class.plx.motor.php');
include_once(PLX_CORE.'lib/class.plx.feed.php');
include_once(PLX_CORE.'lib/class.plx.show.php');
include_once(PLX_CORE.'lib/class.plx.encrypt.php');

# Creation de l'objet principal et lancement du traitement
$plxMotor = & new plxMotor(PLX_CONF);
$plxMotor->prechauffage();
$plxMotor->demarrage();

# Creation de l'objet d'affichage
$plxShow = & new plxShow($plxMotor);

# On démarre la bufferisation
ob_start();

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<title><?php $plxShow->pageTitle(); ?></title>
	<meta http-equiv="Content-Type" content="text/html; charset=<?php $plxShow->charset(); ?>" />
	<link rel="stylesheet" type="text/css" href="<?php $plxShow->template(); ?>/style.css" media="screen" />
	
</head>
<body>

		<?php # Si on autorise les commentaires ?>
		<?php if($plxShow->plxMotor->plxRecord_arts->f('allow_com') AND $plxShow->plxMotor->aConf['allow_com']): ?>
			<div id="form">
				<h2>Ecrire un commentaire</h2>
				<p class="message_com"><?php $plxShow->comMessage(); ?></p>
				<form action="<?php $plxShow->racine() ?>index.php?<?php $plxShow->get(); ?>#form" method="post">
					<fieldset>
						<label>Nom :</label>
						<input name="name" type="text" size="30" value="<?php $plxShow->comGet('name',''); ?>" maxlength="30" /><br />
						<label>Site (facultatif) :</label>
						<input name="site" type="text" size="30" value="<?php $plxShow->comGet('site','http://'); ?>" /><br />
						<label>E-mail (facultatif) :</label>
						<input name="mail" type="text" size="30" value="<?php $plxShow->comGet('mail',''); ?>" /><br />
						<label>Commentaire :</label>
						<textarea name="content" cols="35" rows="8"><?php $plxShow->comGet('content',''); ?></textarea>
						<?php # Affichage du capcha anti-spam
						if($plxShow->plxMotor->aConf['capcha']): ?>
							<label><strong>Vérification anti-spam</strong> :</label>
							<p><?php $plxShow->capchaQ(); ?> : <input name="rep" type="text" size="10" /></p>
							<input name="rep2" type="hidden" value="<?php $plxShow->capchaR(); ?>" />
						<?php endif; # Fin du if sur le capcha anti-spam ?>
						<p><input type="submit" value="Envoyer" /> <input type="reset" value="Effacer" /></p>
					</fieldset>
				</form>
			</div>
		<?php endif; # Fin du if sur l'autorisation des commentaires ?>
	
	
</body>
</html>	
<?php
ob_end_flush();
?>
Et voilà. La liste des commentaires et toujours visible en dessous de votre article, et avec le lien "Ecrire un commentaire", la fenetre facebox s'ouvira... !!!

J'espre ne rien avoir oublié dans la procédure, j'ai codé ça à 2h du matin... ^^ N'hésitez pas à faire part de vos idées ou de vos remarques.

Stéphane.

Consultant PluXml

Ancien responsable et développeur de PluXml (2010 à 2018)

Réponses

  • maramamarama Member
    Ce qui est bien c'est que ça entraîne pas de modifications du coeur Pluxml
    Merci pour cette contribution Stéphane
  • NokinoNokino Member
    Merci beaucoup c'est exactement ce qui fallait =D

    j'ai juste un soucis d'adaptation Pluxml -> MyPluxml avec le fichier commentaires.php
    Lorsque je clique sur le lien la facebox s'ouvre mais s'arrête à la vérification de l'installation de Pluxml...

    Ayant effectuer des modifications pour que la vérification vérifie que MyPluxml(non plus Pluxml) est bien installé j'obtiens dans la lightbox le message suivant : 
    Pluxml n'est pas configur
Executer le fichier install.php pour lancer l'installation
    Malgré de nombreux essais je n'arrive pas à adapté commentaires.php pour MyPluxml...
    Si quelqu'un peux m'aider, je lui en serais reconnaissant.

    Merci =)
  • StéphaneStéphane Member, Former PluXml Project Manager
    Je te conseille de rester avec Pluxml car en vue de évolutions prévues dans pluxml, mypluxml sera largement dépassé et complètement obsolète. Cela serait un mauvais choix de construire ton site sur mypluxml

    Consultant PluXml

    Ancien responsable et développeur de PluXml (2010 à 2018)

  • MobyoneMobyone Member
    Pour ma part, pour que cela fonctionne, j'ai du mettre le lien pour les commentaires à un autre endroit dans articles.php

    le tag "<h2>Commentaires</h2>" se trouve après cette ligne :
    if($plxShow->plxMotor->plxGlob_coms->count)
    De ce fait, si on a pas de commentaire, le lien ne sera pas affiché. Du coup, j'ai mis le code avant.

    Dans la page commentaires.php, j'ai enlevé "$plxShow->racine()" qui générait une erreur.

    En tout cas, merci pour cet addon :)

    Paul.
  • NokinoNokino Member
    Merci pour se conseil Stephane,
    En tout cas j'aime beaucoup l'efficacité et la rapidité avec laquelle vous avez traitez cette demande.
    Je vais donc repartir sur Pluxml ça ne retardera pas trop mon projet.

    Bon Pluxml =)
  • ti_pierreti_pierre Member
    Excellent Steph ;)

    Je viens de découvrir Facebox il y a quelques jours, j'étais surpris et pensais que peu de monde connaissais, perdu :p

    Merci en tout cas pour la mod :)
  • nicolascuenicolascue Member
    mai 2009 modifié
    Pour ma part j'ai du effacer php $plxShow->racine(), seul bémol le bouton close n'apparais pas.
  • StéphaneStéphane Member, Former PluXml Project Manager
    Salut nicolascue

    Pour que le bouton close apparaisse rajoute avant la balise </head> de ton header.php le code suivant
    <script type="text/javascript">
		jQuery(document).ready(function($) {
			$('a[rel*=facebox]').facebox({
				loadingImage : '<?php echo PLX_ROOT ?>plugins/facebox/loading.gif',
				closeImage   : '<?php echo PLX_ROOT ?>plugins/facebox/closelabel.gif'
			})
		}) 
	</script>
    si tu as déjà le code ci-dessous dans ton header tu le supprimes et tu mets à la place celui donné au-dessus
    <script language="javaScript" type="text/javascript">
jQuery(document).ready(function($) {
  $('a[rel*=facebox]').facebox()
}) 
</script>

    Consultant PluXml

    Ancien responsable et développeur de PluXml (2010 à 2018)

  • nicolascuenicolascue Member
    d'accord merci
  • GounsGouns Member
    J'ai un petit problème, quand je clique ça m'ouvre deux fois la page de contact dans la facebox

    Ou faut il chercher le problème ?
  • GounsGouns Member
    août 2009 modifié
    up :'(

    Même problème pour les images
  • StéphaneStéphane Member, Former PluXml Project Manager
    Bonjour Gouns

    As-tu un endroit où on pourrait constater le problème ?

    Consultant PluXml

    Ancien responsable et développeur de PluXml (2010 à 2018)

  • GounsGouns Member
    Stéphane a écrit:
    Bonjour Gouns

    As-tu un endroit où on pourrait constater le problème ?
    Sur JEweb mais le problème est réglé, j'avais déclaré deux fois

    $('a[rel*=facebox]').facebox({

    Le soucis est réglé ;)
Connectez-vous ou Inscrivez-vous pour répondre.