[Résolu]Modules News : Affichage details articles sur plusieurs zones

Note de ce sujet :
  • Moyenne : 0 (0 vote(s))
  • 1
  • 2
  • 3
  • 4
  • 5
#1
Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: 1.11.13
#~ Url du site : localhost
#~ Hébergeur / Soft : wampserver
#~ Informations Système :
#~ ----------------------------------------------
#~ Cms Version: 1.11.13
#~ Installed Modules:
#~ CMSMailer: 5.2.2
#~ CMSPrinting: 1.0.5
#~ FileManager: 1.4.5
#~ MenuManager: 1.8.6
#~ MicroTiny: 1.2.8
#~ ModuleManager: 1.5.8
#~ News: 2.14.4
#~ Search: 1.7.11
#~ ThemeManager: 1.1.8
#~ FormBuilder: 0.8.1.1
#~ CGExtensions: 1.45
#~ CGSmartImage: 1.16.2
#~ CGSimpleSmarty: 1.7.4
#~ CGCalendar: 1.14.6
#~ ListIt2: 1.4.1
#~ ListIt2UpComingEvents: 1.4.1
#~ CGJobMgr: 1.3.4
#~ CGContentUtils: 1.4.3
#~ Gallery: 1.6
#~ JQueryTools: 1.3.4
#~ ListIt2organigramme: 1.4.1
#~ MleCMS: 1.11.4
#~ NMS: 2.7.4
#~ Showtime: 3.4
#~ Config Information:
#~ php_memory_limit:
#~ process_whole_template:
#~ max_upload_size: 64000000
#~ url_rewriting: none
#~ page_extension:
#~ query_var: page
#~ image_manipulation_prog: GD
#~ auto_alias_content: true
#~ locale:
#~ default_encoding: utf-8
#~ admin_encoding: utf-8
#~ set_names: true
#~ Php Information:
#~ phpversion: 5.5.12
#~ md5_function: On (Vrai)
#~ gd_version: 2
#~ tempnam_function: On (Vrai)
#~ magic_quotes_runtime: Off (Faux)
#~ E_STRICT: 0
#~ E_DEPRECATED: 0
#~ memory_limit: 128M
#~ max_execution_time: 120
#~ output_buffering: 4096
#~ safe_mode: Off (Faux)
#~ file_uploads: On (Vrai)
#~ post_max_size: 10M
#~ upload_max_filesize: 64M
#~ session_save_path: c:/wamp/tmp (0777)
#~ session_use_cookies: On (Vrai)
#~ xml_function: On (Vrai)
#~ xmlreader_class: On (Vrai)
#~ Server Information:
#~ Server Api: apache2handler
#~ Server Db Type: MySQL (mysqli)
#~ Server Db Version: 5.6.17
#~ Server Db Grants: Trouvé un privilège "GRANT ALL" qui semble être adapté
#~ Server Time Diff: Aucune différence de date du système de fichiers trouvées
#~ ----------------------------------------------
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~


Bonsoir cher membres de la communauté,

Je viens vers vous pour solliciter une orientation. J'ai une page qui m'affiche les articles d'une categorie et, sur le côté une zone pour afficher quelques details de l'article sur lequel nous venons de cliquer. (Voir capture ecran)

[Image: 10.png]

Je reconnais que suis pas fameux en Smarty, et alors je veux savoir quelle est la bonne approche pour concretiser cette idée.

Merci.
#1
Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: 1.11.13
#~ Url du site : localhost
#~ Hébergeur / Soft : wampserver
#~ Informations Système :
#~ ----------------------------------------------
#~ Cms Version: 1.11.13
#~ Installed Modules:
#~ CMSMailer: 5.2.2
#~ CMSPrinting: 1.0.5
#~ FileManager: 1.4.5
#~ MenuManager: 1.8.6
#~ MicroTiny: 1.2.8
#~ ModuleManager: 1.5.8
#~ News: 2.14.4
#~ Search: 1.7.11
#~ ThemeManager: 1.1.8
#~ FormBuilder: 0.8.1.1
#~ CGExtensions: 1.45
#~ CGSmartImage: 1.16.2
#~ CGSimpleSmarty: 1.7.4
#~ CGCalendar: 1.14.6
#~ ListIt2: 1.4.1
#~ ListIt2UpComingEvents: 1.4.1
#~ CGJobMgr: 1.3.4
#~ CGContentUtils: 1.4.3
#~ Gallery: 1.6
#~ JQueryTools: 1.3.4
#~ ListIt2organigramme: 1.4.1
#~ MleCMS: 1.11.4
#~ NMS: 2.7.4
#~ Showtime: 3.4
#~ Config Information:
#~ php_memory_limit:
#~ process_whole_template:
#~ max_upload_size: 64000000
#~ url_rewriting: none
#~ page_extension:
#~ query_var: page
#~ image_manipulation_prog: GD
#~ auto_alias_content: true
#~ locale:
#~ default_encoding: utf-8
#~ admin_encoding: utf-8
#~ set_names: true
#~ Php Information:
#~ phpversion: 5.5.12
#~ md5_function: On (Vrai)
#~ gd_version: 2
#~ tempnam_function: On (Vrai)
#~ magic_quotes_runtime: Off (Faux)
#~ E_STRICT: 0
#~ E_DEPRECATED: 0
#~ memory_limit: 128M
#~ max_execution_time: 120
#~ output_buffering: 4096
#~ safe_mode: Off (Faux)
#~ file_uploads: On (Vrai)
#~ post_max_size: 10M
#~ upload_max_filesize: 64M
#~ session_save_path: c:/wamp/tmp (0777)
#~ session_use_cookies: On (Vrai)
#~ xml_function: On (Vrai)
#~ xmlreader_class: On (Vrai)
#~ Server Information:
#~ Server Api: apache2handler
#~ Server Db Type: MySQL (mysqli)
#~ Server Db Version: 5.6.17
#~ Server Db Grants: Trouvé un privilège "GRANT ALL" qui semble être adapté
#~ Server Time Diff: Aucune différence de date du système de fichiers trouvées
#~ ----------------------------------------------
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~


Bonsoir cher membres de la communauté,

Je viens vers vous pour solliciter une orientation. J'ai une page qui m'affiche les articles d'une categorie et, sur le côté une zone pour afficher quelques details de l'article sur lequel nous venons de cliquer. (Voir capture ecran)

[Image: 10.png]

Je reconnais que suis pas fameux en Smarty, et alors je veux savoir quelle est la bonne approche pour concretiser cette idée.

Merci.
#2
Avec onclick() en JS, ça devrait passer tout seul

Ex. : Colonne de droite
<div id="id1" style="display:none;">{ta balise news détails}</div>


A gauche, ajoute dans ton gabarit catégories
<button type="button"
onclick="document.getElementById('id1').style.display = 'block'">
<img image du bouton></button>
#2
Avec onclick() en JS, ça devrait passer tout seul

Ex. : Colonne de droite
<div id="id1" style="display:none;">{ta balise news détails}</div>


A gauche, ajoute dans ton gabarit catégories
<button type="button"
onclick="document.getElementById('id1').style.display = 'block'">
<img image du bouton></button>
#3
Après réflexion, il nous manque quelques détails pour peaufiner ton besoin.
Le texte de droite fait-il partie de la news ? Est-ce le sommaire, le contenu ou un champ perso ?

Tu as besoin d'avoir le contenu à placer dans la col de droite à ta disposition lors de l'affichage de la page pour pouvoir l'afficher lors du clic. Il doit donc être disponible dans ton gabarit de news.

Prenons l'exemple que tu souhaites afficher le sommaire de la news dans la <div id="sommaire">ici viendra le sommaire de la news ajouté dynamiquement</div> de droite :
Gabarit de news appelé à gauche
Code :
...
{foreach from=$items item='entry'}
...
<button type="button" class="bouton{$entry@index}">bouton {$entry@index}</button>
{literal}<script>
$(function() {
  $( ".bouton{/literal}{$entry@index}{literal}" ).click(function() {
  $( "#sommaire" ).html( "{/literal}{$items[$entry@index]->summary|escape:'javascript'}{literal}" );
  });
});
</script>{/literal}
...
{/foreach}
J'ai pris un button, mais tu peux utiliser une image ou tout autre élément du moment que tu ajoutes class="bouton{$entry@index}".
Si c'est le contenu et pas le sommaire que tu souhaites afficher, tu utiliseras {$items[$entry@index]->content|escape:'javascript'}

Ne pas oublier d'appeler la libraire JQuery avant d'appeler la fonction (et pas de doublon).
#3
Après réflexion, il nous manque quelques détails pour peaufiner ton besoin.
Le texte de droite fait-il partie de la news ? Est-ce le sommaire, le contenu ou un champ perso ?

Tu as besoin d'avoir le contenu à placer dans la col de droite à ta disposition lors de l'affichage de la page pour pouvoir l'afficher lors du clic. Il doit donc être disponible dans ton gabarit de news.

Prenons l'exemple que tu souhaites afficher le sommaire de la news dans la <div id="sommaire">ici viendra le sommaire de la news ajouté dynamiquement</div> de droite :
Gabarit de news appelé à gauche
Code :
...
{foreach from=$items item='entry'}
...
<button type="button" class="bouton{$entry@index}">bouton {$entry@index}</button>
{literal}<script>
$(function() {
  $( ".bouton{/literal}{$entry@index}{literal}" ).click(function() {
  $( "#sommaire" ).html( "{/literal}{$items[$entry@index]->summary|escape:'javascript'}{literal}" );
  });
});
</script>{/literal}
...
{/foreach}
J'ai pris un button, mais tu peux utiliser une image ou tout autre élément du moment que tu ajoutes class="bouton{$entry@index}".
Si c'est le contenu et pas le sommaire que tu souhaites afficher, tu utiliseras {$items[$entry@index]->content|escape:'javascript'}

Ne pas oublier d'appeler la libraire JQuery avant d'appeler la fonction (et pas de doublon).
#4
Merci Jean pour ta réaction si rapide.

Evidement, je n'ai pas été assez explicite par rapport à ceux que je souhaiterai avoir. Le texte s'affichant dans la colonne de droite ferai bien partie de News. Ce que je voudrais afficher ce sont des informations relatives à une activité; en exemple nous pouvons cité :

- la date,
- le lieu,
- etc,

qui pourront être des valeurs de champs qu'il faudra récupérer et afficher.

Cdt.
#4
Merci Jean pour ta réaction si rapide.

Evidement, je n'ai pas été assez explicite par rapport à ceux que je souhaiterai avoir. Le texte s'affichant dans la colonne de droite ferai bien partie de News. Ce que je voudrais afficher ce sont des informations relatives à une activité; en exemple nous pouvons cité :

- la date,
- le lieu,
- etc,

qui pourront être des valeurs de champs qu'il faudra récupérer et afficher.

Cdt.
#5
En te basant sur l'approche que je t'ai mise en exemple, tu ne devrais pas avoir de difficulté pour récupérer d'autres champs que summary.
#5
En te basant sur l'approche que je t'ai mise en exemple, tu ne devrais pas avoir de difficulté pour récupérer d'autres champs que summary.
#6
OK, merci à Sa seigneurie. Je donnerai la suite.
#6
OK, merci à Sa seigneurie. Je donnerai la suite.
#7
Bonjour à sa Seigneurie,

J'ai pu tester ton approche et sa marche parfaitement. Alors, si je veux que ca soit le titre de l'item qui soit le lien sur lequel il faudrait cliquer, comment est que je l'affiche en lieu et place du bouton.

Merci.
#7
Bonjour à sa Seigneurie,

J'ai pu tester ton approche et sa marche parfaitement. Alors, si je veux que ca soit le titre de l'item qui soit le lien sur lequel il faudrait cliquer, comment est que je l'affiche en lieu et place du bouton.

Merci.
#8
Code :
...
<h2 class="titre{$entry@index}">{$entry->title}</h2>
{literal}<script>
$(function() {
  $( ".titre{/literal}{$entry@index}{literal}" ).click(function() {
...
Un truc dans le genre, il me semble
#8
Code :
...
<h2 class="titre{$entry@index}">{$entry->title}</h2>
{literal}<script>
$(function() {
  $( ".titre{/literal}{$entry@index}{literal}" ).click(function() {
...
Un truc dans le genre, il me semble
#9
OK, je perçois le bout du tunnel. Admettons que je veuille avoir une liste de NEWS de façon normale c'est à dire j'ai ma liste d'ITEMS qui s'affiche et qu'en cliquant sur le l'ITEM :
-On a bel et bien les details de l'article qui s'affichent et par la suite s'affiche quelques champs sur la colonne de droite comme souhaité dès le depart.

Comment vais je recupérer le lien :
Code :
[== Indéfini ==]
<div class="NewsSummaryLink">
<a href="{$entry->moreurl}" title="{$entry->title|cms_escape:htmlall}">{$entry->title|cms_escape}</a>
</div>
et l'integrant dans le code que vous me proposez.

Parce que là ce que je constate c'est qu'en cliquant sur lien, les champs s'affichent bien sur la colonne de droite mais sur la page principale, les liens demeurent figés.

Merci
#9
OK, je perçois le bout du tunnel. Admettons que je veuille avoir une liste de NEWS de façon normale c'est à dire j'ai ma liste d'ITEMS qui s'affiche et qu'en cliquant sur le l'ITEM :
-On a bel et bien les details de l'article qui s'affichent et par la suite s'affiche quelques champs sur la colonne de droite comme souhaité dès le depart.

Comment vais je recupérer le lien :
Code :
[== Indéfini ==]
<div class="NewsSummaryLink">
<a href="{$entry->moreurl}" title="{$entry->title|cms_escape:htmlall}">{$entry->title|cms_escape}</a>
</div>
et l'integrant dans le code que vous me proposez.

Parce que là ce que je constate c'est qu'en cliquant sur lien, les champs s'affichent bien sur la colonne de droite mais sur la page principale, les liens demeurent figés.

Merci
#10
Je n'ai pas bien compris, merci d'être plus explicite, à mon âge on ne pige plus aussi vite Wink.
Le lien moreurl t'envoie sur la page de détail des news (et donc basée sur le gabarit detail, pas sur ce gabarit sommaire contenant le code JQuery).
Tu as également la possibilité de jouer avec la propriété css position:absolute pour déplacer tes blocs d'information.
#10
Je n'ai pas bien compris, merci d'être plus explicite, à mon âge on ne pige plus aussi vite Wink.
Le lien moreurl t'envoie sur la page de détail des news (et donc basée sur le gabarit detail, pas sur ce gabarit sommaire contenant le code JQuery).
Tu as également la possibilité de jouer avec la propriété css position:absolute pour déplacer tes blocs d'information.
#11
Je vais essayer d'être plus explicite.

Toujours en partant sur l'exemple de la capture, on clique soit sur le lien ou soit sur le bouton de la colonne de gauche (gabarit sommaire), on est redirigé sur une page detail avec sur la colonne de gauche le detail de la news et sur la colonne de droite on n'affiche que quelque champs précis.

Alors je viens de me rendre compte que normalement sur la page listant les news (cas de la capture) la colonne de droite ne doit pas être présente, parce que ce n'est qu'après avoir cliqué sur une des news, que s'affiche la page détail avec la colonne de droite et les champs cibles.

Cdt
#11
Je vais essayer d'être plus explicite.

Toujours en partant sur l'exemple de la capture, on clique soit sur le lien ou soit sur le bouton de la colonne de gauche (gabarit sommaire), on est redirigé sur une page detail avec sur la colonne de gauche le detail de la news et sur la colonne de droite on n'affiche que quelque champs précis.

Alors je viens de me rendre compte que normalement sur la page listant les news (cas de la capture) la colonne de droite ne doit pas être présente, parce que ce n'est qu'après avoir cliqué sur une des news, que s'affiche la page détail avec la colonne de droite et les champs cibles.

Cdt
#12
C'est encore plus simple, alors ! Si j'ai bien compris, lors de l'affichage de détail de la news, les champs colonne de droite seront toujours visibles, pas besoin de cliquer.
Tu n'as qu'à assigner les valeurs des champs à une variable ({assign var='foo' value=$entry->membername}) et utiliser cette dernière dans les divs de droite/gauche ou faire ton squelette html de manière à pouvoir faire flotter par css certains des éléments à droite.
#12
C'est encore plus simple, alors ! Si j'ai bien compris, lors de l'affichage de détail de la news, les champs colonne de droite seront toujours visibles, pas besoin de cliquer.
Tu n'as qu'à assigner les valeurs des champs à une variable ({assign var='foo' value=$entry->membername}) et utiliser cette dernière dans les divs de droite/gauche ou faire ton squelette html de manière à pouvoir faire flotter par css certains des éléments à droite.
#13
Je viens de tester avec un grand retard certes, mais super, cela marche bien.

Alors, est ce que cela est valable avec les autres modules comme CGCalendar?

Cdt
#13
Je viens de tester avec un grand retard certes, mais super, cela marche bien.

Alors, est ce que cela est valable avec les autres modules comme CGCalendar?

Cdt
#14
Exactement la même chose Smile
#14
Exactement la même chose Smile


Atteindre :


Utilisateur(s) parcourant ce sujet : 1 visiteur(s)