SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

290 Plugins, 198 contribs sur SPIP-Zone, 69 visiteurs en ce moment

Accueil > Navigation > Grappes > Prise en charge d’un objet par le plugin Grappes

Prise en charge d’un objet par le plugin Grappes

29 janvier 2015 – par Mist. GraphX

4 votes

Un petit tutoriel ou résumé expliquant comment ajouter la prise en charge d’un objet au plugin Grappes.

Le plugin Grappe propose de créer des groupes d’objets, il peut être utilisé aussi bien pour créer des Carousels, des widgets de liste de documents ou articles, des sélections d’articles a mettre a la une, etc, remplaçant avantageusement ET de manière élégante le système des mot-clefs techniques. Le rédacteur ou webmestre y gagnant en terme de simplicité d’utilisation et de gestion :

  • Plus de mots techniques numérotés (carousel1, carousel2 ...)
  • Des classements crayonables (en attendant un plugin dédié a cette fonction)
  • l’association directement depuis la vue de l’objet ou depuis la grappe

L’exemple qui suit est basé sur un plugin : vitrines, déclarant un objet VITRINE.

En bref, pour pouvoir associer notre objet vitrine nous devons :

  • En premier lieu : ajouter notre objet aux possibilités de liaisons du plugin Grappe.
  • Créer un squelette d’affichage/vue des objets associés à la grappe
  • Créer un sélecteur générique, qui permettra grâce a jqueryUi autocomplete, de chercher et trouver nos objets d’une manière efficace, rapide et agréable.

Ajouter l’objet aux liaisons du plugin Grappe

En premier lieu, on ajoute au paquet.xml :

<necessite nom="grappes" />

Plus d’infos sur la rédaction du paquet.xml

Depuis SPIP3 on peut, de manière générique en utilisant l’API objet, ajouter des liaisons entre objets. Il faut pour cela déclarer la table liaison puis utiliser la saisie choisir_objets dans son formulaire de configuration.
Cf API - editer_liens

Le plugin Grappe, bien qu’utilisant l’API objet, propose un pipeline spécifique pour que les plugins puissent y ajouter leurs liaisons. Ceci a l’avantage que dès l’activation de notre plugin la liaison sera effective, sans aucune autre configuration.

Si vous ne savez pas ce qu’est un pipeline, voyez : Programmmez avec Spip 3 : Les pipelines

-  Ajouter au paquet xml du plugin (ex : vitrines), en utilisant la pipeline grappes_objet_lies

  1. <pipeline nom="grappes_objets_lies" inclure="vitrines_pipelines.php" />

Ici rien de bien compliqué, on nomme le point d’entrée/pipeline que l’on souhaite utiliser, et dans quel fichier on a placé notre fonction.

-  Dans le fichier vitrines_pipelines, ajouter l’association

Le commentaire du développeur du plugin est suffisamment explicite et on l’en remercie au passage :

  1. /**
  2.  * Insertion dans le pipeline grappes_objets_lies (Plugin Grappes)
  3.  * Définis le tableau des objets pouvant être liés aux grappes, la clé est le type d'objet (au pluriel),
  4.  * la valeur, le label affiché dans le formulaire d'édition de grappe
  5.  * @param array $array
  6.  *      Le tableau du pipeline
  7.  * @return array $array
  8.  *      Le tableau complété
  9.  */
  10. function vitrines_grappes_objets_lies($array){
  11.         $array['vitrines'] = _T('vitrines:vitrines');
  12.         return $array;
  13. }

Télécharger

A noter : Pour fonctionner, l’ajout à la pipeline doit toujours être préfixé par le prefix de votre plugin (juste pour ceux qui copient-collent sauvagement ...).

On pourrait aussi, par exemple, y déclarer plus d’une association d’objet, sans toucher aux plugins qui sont concernés. Par exemple, ajouter un objet GIS, servant a faire des grappes de points géo-localisés (au hasard ...).

Lister les objets associés a la Grappe

Comme l’explique la documentation de l’API editer_liens dans la section Interface d’édition, il faut encore un squelette de vue permettant de lister nos liaisons et le squelette d’association, qui dans le plugin Grappes est gérée par le plugin Sélecteur générique.

Nous créons donc la liste d’affichage des Vitrines associées à la Grappe dans prive/objets/liste/grappes-vitrines_lies.html

  1. #SET{selection,#ENV{objet}|objet_type|lister_objets_lies{grappe,#ID_GRAPPE,grappe}}
  2. <B_liste>
  3. #ANCRE_PAGINATION
  4. <div class="liste-objets liste-objets-lies vitrines">
  5. <table class='spip liste'>
  6.         [<caption><strong class="caption">(#ENV*{titre,#GRAND_TOTAL|singulier_ou_pluriel{info_1_article,info_nb_articles}})</strong></caption>]
  7.         <tbody>
  8.         <BOUCLE_liste(VITRINES){id_vitrine IN #GET{selection}}{pagination 10}{recherche ?}{statut?}{tout}>
  9.                 <tr class="[(#COMPTEUR_BOUCLE|alterner{row_odd,row_even})]">
  10.                         <td class='statut'>[(#STATUT|puce_statut{article,#ID_ARTICLE,#ID_RUBRIQUE})]</td>
  11. [(#REM) Prise en charge du RANG Crayonable]
  12. <td class="rang">
  13.                             <BOUCLE_affRang(spip_grappes_liens){id_objet=#ID_VITRINE}>
  14.                                        <span class="#EDIT{rang}">#RANG</span>
  15.                             </BOUCLE_affRang>
  16.                         </td>
  17.                         <td class='titre principale'>#TITRE</td>
  18.                         <td class='id'><a href="[(#ID_ARTICLE|generer_url_entite{article})]"><:grappes:voir:></a></td>
  19.                         [(#ENV{editable})
  20.                         <td class='action'>[(#BOUTON_ACTION{<:grappes:delier:> [(#CHEMIN_IMAGE{supprimer-12.png}|balise_img{'X'})],#URL_ACTION_AUTEUR{lier_objets,delier/grappe/#ID_GRAPPE/vitrine/#ID_VITRINE,#SELF},ajax})]</td>
  21.                 ]</tr>
  22.         </BOUCLE_liste>
  23.         </tbody>
  24. </table>
  25. [<p class="pagination">(#PAGINATION{prive})</p>]
  26. </div>
  27. </B_liste>
  28. <div class="liste-objets liste-objets-lies vitrines caption-wrap"><strong class="caption"><:info_aucune_vitrine:></strong></div>
  29. <//B_liste>

Télécharger

A noter :

  • Ce squelette est juste une adaptation de la vue qui liste les articles, disponible dans le plugin Grappes Cf Grappes/prive/objets/listes.
  • À la différence, ce squelette ajoute le #RANG, et vous permettra d’éditer le classement de nos VITRINES, si vous activez les crayons dans l’espace privé.

Prise en charge du sélecteur générique

Comme mentionné précédemment, c’est le plugin Sélecteur générique qui va s’occuper de gérer notre vue d’association.
Voir la documentation du plugin Sélecteur générique. Cette documentation explique brièvement comment créer un Selecteur générique.

Les sélecteurs utilisant Jquery.ui.autocomplete, les données doivent être retournées au format JSON, qui est le format de description utilisé par javascript pour les données de type objet, array ou listes.
Chaque fois que l’internaute effectuera une saisie dans le champ input de recherche, on enverra une requête qui sera retournée en JSON et affichée.

Créer un dossier selecteurs/ à la racine de votre squelette et dedans le fichier grappes_vitrines.html

Comme pour tous les squelettes renvoyant des données dans un format autre que html , on commence donc par déclarer un #HEADER.
De plus on désactivee le CACHE...

  1. #HTTP_HEADER{Content-Type: text/plain; charset=#CHARSET}
  2. #CACHE{0}
  3. #SET{resultats, #LISTE}
  4. <BOUCLE_s(VITRINES){titre LIKE %(#ENV{q})%}{0,20}{par multi titre}>
  5. [(#SET{resultats, [(#GET{resultats}|push{[(#ARRAY{label,[(#TITRE|textebrut)],value,[(#TITRE|textebrut)],id,#ID_VITRINE})]})]})]
  6. </BOUCLE_s>
  7. [(#GET{resultats}|json_encode)]
  8. #FILTRE{trim}

Télécharger

A noter :

  • Pour fonctionner sélecteur générique utilise les url réécrites pour l’accès a l’API, vous devez donc avoir mis en place un .htaccess à la racine de votre site, ou à la racine de votre mutualisation. Comme expliqué dans la doc du plugin :

    Important : Le .htaccess du site doit être activé, car l’appel des données se fait via le url réécrite en /selecteur.api.

    En résumé : si votre serveur de développement n’est pas correctement configuré : commencez par là.

  • Pour tester le fonctionnement et débuguer, l’utilisation de Firebug sera appréciée : l’onglet console permet de voir si une requête est bien envoyée (GET) à chaque saisie, et un clic sur la requête permet de voir l’objet JSON retourné et ce qu’il contient (404 par exemple, si le .htaccess est inopérant).
  • Le format JSON, comme le YAML, est très sensible aux espaces qui trainent, d’où le #FILTRE{trim} dans le code exemple. En cas de mauvais fonctionnement, vérifiez bien les données retournées.

Dernière modification de cette page le 6 novembre 2017

Retour en haut de la page

Répondre à cet article

Qui êtes-vous ?
  • [Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • SPIP 3.2, Agenda et FullCalendar

    6 juin – 20 commentaires

    Nous avions publié un article sur la manière d’utiliser FullCalendar avec SPIP 3.0 afin d’afficher des évènements sous forme d’Agenda. La version de FullCalendar a changé avec SPIP 3.2. Le présent article est donc un tutoriel adapté à SPIP 3.2. Pour (...)

  • Grappes 1.0

    23 novembre 2012 – 36 commentaires

    Présentation et nouveautés Cette version 1.0 du plugin Grappes est un portage pour SPIP 3.x. Le plugin permet de grouper des objets de SPIP dans des grappes. Les objets du core (articles, rubriques, auteurs, etc.) sont pris en charge, ainsi que (...)

  • Passer un site SPIP sous https://

    23 février 2017 – 41 commentaires

    Comment migrer simplement votre site SPIP de http:// vers https:// Le protocole https:// devient de plus en plus courant : C’est mieux pour la vie privée de tous La plupart des grands sites l’a déjà adopté Certains navigateurs commencent à afficher (...)

  • PHANTOM (HTML5UP)

    18 juillet – commentaires

    Squelette SPIP pour intégrer le modèle Phantom de HTML5UP. https://html5up.net/phantom Installation A l’activation, le plugin installe aussi les plugins suivants : crayons, favicon, metasplus+, Couleur d’objet, champs extras, SPIP reset centre (...)

  • Cycle2

    7 août 2014 – 119 commentaires

    La seconde version de la librairie Javascript « jQuery Cycle », qui permet de produire des diaporamas, se nomme « Cycle2 » : http://jquery.malsup.com/cycle2/. Voici cette nouvelle librairie mise en plugin pour SPIP. Si vous utilisez déjà « jQuery (...)