var Phenix = function () {
Troll du Web depuis 1996

Web dev

Truc, astuces et tuto sur le CMS SPIP ou sur le développement web en général.

Utiliser Google Map pour suggérer des adresses

Lorsqu’on nous demande « d’autocompleter » un champ adresse, il vient immédiatement la question : avec quelle base de donnée ?

Eh bien, avec celle de Google ?

Une petite astuce que j’ai découvert il y a peu, on peut utiliser l’API de Google map pour créer facilement une autocomplétion d’adresse.

Un peu de JavaScript qui va bien :

  1. // Inclure l'API de Google map, il y a un paramètre de pour spécifier qu'on veut la librairie des places.
  2. <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
  3. <script type="text/javascript">
  4. $(function () {
  5. var input = (document.getElementById('test'));
  6. var autocomplete = new google.maps.places.Autocomplete(input);
  7. });

Et le html qui va avec :

  1. <input name="Test" type="text" value="" id="test"/>

Et voilà, pas besoin de se casser plus la tête.

Pour ceux qui veulent tester :

https://gist.github.com/phenix-factory/f4d82164f8aee13fb6ec#file-gmap_adresse_autocomplete-html


Ajouter l’icône des blocs AJAX dans l’espace publics d’un site #SPIP

Parce que c’est mieux !

Petite astuce que j’ai trouvée il y a peu.

Lorsque l’ont AJAX des blocs SPIP, le comportement par défaut est de passer le bloc en opacité 50%.
Ce n’est pas forcément le plus explicite pour les visiteurs, plus habitués à avoir un signe de « pseudo-progression ».

Ce n’est le comportement de la partie admin, qui affiche une icône « Loading » dans le coin supérieur droit.

On peut facilement reproduire ce comportement dans l’espace publique avec une petite ligne de css :

  1. .loading {
  2. background: url(../../prive/themes/spip/images/searching.gif) no-repeat top right;
  3. }

Ici je suppose que le fichier css se trouve dans un sous-dossier du dossier squelettes de SPIP. Si ce n’est pas le cas, il faut adapter le chemin.

Bien entendu on peut mettre ce que l’on veut sur la class loading, ici je n’ai fais que reproduire le comportement de SPIP.


Actualiser le cache de #SPIP

Je n’ai trouvé de documentation sur cela nulle part, comme souvent avec SPIP malheureusement.

Le cache de SPIP est très puissant, mais souvent, quand on fait des modifications, on voudrait actualiser rafraichir ce cache.
Pour une raison ou pour une autre, dans mon cas c’était un formulaire de modification d’objet, mais il peut y avoir plein d’autres raisons de rafraichir le cache.

Au lieu de vider ou de recalculer, on peut simplement demander à SPIP d’invalider le cache :

  1. // On invalide les caches
  2. include_spip('inc/invalideur');
  3. suivre_invalideur("id='$objet/$id_objet'");

$objet c’est le type d’objet : article, rubrique, brève, ou même un objet créer via un plugin.
$id_objet, je pense que je ne dois pas expliquer quand même !

Je pense que cette fonction est bien plus puissante que cela, mais dans mon cas ça me suffit, si vous voulez compléter, lâchez-vous !


Modifier la carte d’identité d’un site #SPIP

Voici le premier tutoriel sur SPIP, et certainement pas le dernier vu comment, ce CMS est absolument magique.

Intro

Tous les sites SPIP sont livrés, par défaut, avec une carte d’identité : le titre du site, le slogan, l’email du webmaster, etc.
En gros par défaut, cela ressemble à cela :

Dans la plupart des cas, cela suffit largement au site. Toute fois dans certains cas, on voudrait étendre les possibilités de cette carte d’identité.

Éditer le formulaire

La première chose que l’on va faire, c’est éditer le formulaire pour ajouter les champs dont on à besoin. Le fichier se trouve dans prive/formulaires.

On copie donc configurer_identite.html et configurer_identite.php dans un dossier squelettes/formulaires. Cela a pour effet de les surcharger (voir la notion de chemin dans SPIP).

Ouvrez le fichier configurer_identite.html, vous y trouverez toute une série de li contenant des champs de formulaire.

Ajoutez-y votre champ, ici je vais ajouter un champ « téléphone de la billetterie » :

  1. #SET{name,billetterie_telephone}#SET{erreurs,#ENV**{erreurs}|table_valeur{#GET{name}}}#SET{obli,''}
  2. <li class="editer editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
  3. <label for="#GET{name}">Téléphone billeterie</label>
  4. [<span class='erreur_message'>(#GET{erreurs})</span>]
  5. <input type='text' class='text' name='#GET{name}' id='#GET{name}' value="#ENV{#GET{name}}" />
  6. </li>

Si vous retournez sur votre page, vous constaterez qu’un nouveau champ est disponible. En revanche, il ne fonctionne pas.

En effet, SPIP n’est pas au courant qu’il doit créer ce champ dans la base de données, il faut lui dire. Pour cela, ouvrez le fichier configurer_identite.php

Dans ce fichier vous trouverez 2 foreach de ce type (ligne 21 et 49) :

  1. foreach(array('nom_site', 'adresse_site', 'slogan_site', 'descriptif_site', 'email_webmaster') as $k)

Ajoutez dans le tableau votre nouveau champ :

  1. foreach(array('nom_site', 'adresse_site', 'slogan_site', 'descriptif_site', 'email_webmaster', 'billetterie_telephone') as $k)

Rien de plus à faire, votre champ est maintenant fonctionnel !

Créer la balise

Maintenant, on va créer la balise qui va avec ce champ, dans un fichier mes_fonctions.php (a mettre à la racine de votre dossier squelettes) :

  1. /*
  2. * Balise #BILLETERIE_TELEPHONE
  3. */
  4. function balise_BILLETTERIE_TELEPHONE_dist($p) {
  5. $p->code = "\$GLOBALS['meta']['billetterie_telephone']";
  6. return $p;
  7. }

Voilà, il ne reste plus qu’à utiliser #BILLETERIE_TELEPHONE où bon vous semble dans vos squelettes SPIP. Bien sûr tous les filtres fonctionneront également !