SPIP-Contrib

SPIP-Contrib

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

289 Plugins, 197 contribs sur SPIP-Zone, 122 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 ?

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

  • Pub Banner : gestionnaire de bannières publicitaires

    28 juin 2011 – 131 commentaires

    Le plugin « PUB BANNER » est un gestionnaire complet de bannières publicitaires pour des squelettes SPIP. Il prend en charge tous les types de bannières et permet de leur attribuer des publicités (locales ou distantes, images ou Flash). Chaque (...)

  • GIS 4

    11 août 2012 – 1439 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 (...)

  • Leadescent (Squelette)

    28 avril 2012 – 73 commentaires

    Présentation : Ce squelette permet de modifier la page d’index du thème Leadescent (adapté du thème Wordpress du même nom réalisé par Padd Solutions). Voir une démo du thème et du squelette Leadescent. Il est recommandé d’installer le thème associé à (...)

  • Mailsubscribers

    16 janvier 2013 – 372 commentaires

    Ce plugin permet de gérer les inscriptions (ou abonnements) à la diffusion de contenu par email. Mailsubscribers permet de gérer les inscriptions par Opt-in simple ou double et la désinscription par URL. Ce plugin gère également plusieurs listes de (...)

  • Leadescent (Thème)

    28 avril 2012 – 21 commentaires

    Présentation : Leadescent est un thème blanc, deux colonnes, adapté du thème Wordpress du même nom réalisé par Padd Solutions. Voir une démo du thème Leadescent. Il est recommandé d’installer le squelette associé à ce thème. Captures : (...)