SPIP-Contrib

SPIP-Contrib

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

286 Plugins, 197 contribs sur SPIP-Zone, 278 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

3 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 19 mars 2015

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

  • Plugin Logo SVG : pouvoir utiliser des logos SVG

    17 octobre – commentaires

    Le SVG est un format vectoriel donc très léger et redimensionnable sans pertes, mais SPIP ne l’acceptait pas sur les logos. Ce plugin comble ce manque. Comment ça fonctionne ? Vous installez ce plugin, vous l’activez, et c’est tout. Crédits Une (...)

  • Utilisez le framework Foundation dans vos squelettes !

    13 août 2013 – 58 commentaires

    Foundation est un framework CSS et Javascript très complet pour réaliser des sites sur une grille propre et homogène. Mais surtout, il permet de rendre un site responsive très facilement ! Ce plugin ajoute le framework Foundation sur l’espace (...)

  • LinkCheck : vérificateur de liens

    13 février 2015 – 65 commentaires

    Ce plugin permet de chercher et tester l’ensemble des liens présents dans les objets. Vous pourrez donc en quelques clics connaître les liens brisés ou défectueux qui se sont immiscés dans le contenu de votre site SPIP. La vérification s’effectue en (...)

  • GIS 4

    11 août 2012 – 1288 commentaires

    Présentation et nouveautés La version 4 de GIS abandonne la libraire Mapstraction au profit de Leaflet. Cette librairie permet de s’affranchir des librairies propriétaires tout en gardant les mêmes fonctionnalités, elle propose même de nouvelles (...)

  • Metas +

    3 décembre – commentaires

    Améliorez l’indexation de vos articles dans les moteurs et leur affichage sur les réseaux sociaux grâce aux métadonnées Dublin Core, Open Graph et Twitter Card. Installation Activer le plugin dans le menu dédié. Dans le panel de configuration, (...)