site JoomlaDay > javascript 'onclick' pour ajouter/retirer des paramètres à l'url

[woluweb]

Bonjour à tous,

Je suis en train de faire des essais de filtres sur le site du JoomlaDay (je sais, je suis dans les temps pour #jd20fr )

Pour être concret, voyez

https://www.joomladay.fr/articlesanywhere

On peut filtrer les articles sur base des Custom Fields (même avec plusieurs custom fields et même avec plusieurs valeurs pour un custom field). Exemple :
https://www.joomladay.fr/articlesany...-am-3&room=200

Là j'ai fait des boutons simples avec des hyperliens codés "en dur".
L'étape ultime consiste maintenant à ajouter un peu de javascript pour que les liens soient "dynamiques".

Exemple : si on clique sur "session 1", ça devrait
- ajouter ?session=slot-am-1 à l'url s'il n'y a pas encore de ?session=
- ajouter slot-am-1 à ?session= s'il y a déjà d'autres sessions
- retirer ?session=slot-am-1 de l'url s'il y est déjà et que c'est la seule session
- retirer slot-am-1 de l'url s'il y a d'autres sessions

(idéalement, pas de jquery mais juste du vanilla javascript pour être universel et ne pas avoir de dépendance. Et le plus simple / léger possible )

[woluweb]

Sans doute un début de piste : https://usefulangle.com/post/81/java...url-parameters

Mais j'ai besoin de votre aide pour mettre tout ça en musique pour le cas concret

[ghazal]

hey,
Un tout petit coup de pouce:

Get URL Parameters with JavaScript

https://codepen.io/SitePoint/pen/rQGWpP

[woluweb]

En fait, je réexprime le besoin : je l'avais formulé de manière "technique", mais en fait le vrai besoin correspond à ceci :

- quand on clique sur un bouton, ça ajoute un paramètre à l'url pour filtrer les articles
- du coup, quand on clique sur un autre bouton, filtre sur autre chose. Autrement dit, on réinitialise le filtre

Bref, l'idée serait de pouvoir dire que si on clique sur plusieurs boutons, l'url "cumule" les paramètres plutôt que de les effacer à chaque fois...

Du coup, on pourrait cliquer p.ex. cliquer les boutons "salle A" et "salle B" pour voir les conférences dans les deux salles...

[ghazal]

Tu n'as pas un exemple à montrer, même approximatif ?

[woluweb]

Salut ghazal
Ben oui, l'exemple est sur https://www.joomladay.fr/articlesanywhere
Tu peux tout combiner dans l'url.
L'exemple le plus simple est celui mis dans le bouton "session 1 & 3", qui déclenche (hardcodé ici) https://www.joomladay.fr/articlesany...am-1,slot-am-3

[ghazal]

Tu reprends cette demo, non ?

http://demo.webularlab.nl/index.php/agenda

[woluweb]

Oui, la page sur joomladay.fr est une version améliorée de demo.webularlab.nl, que je mentionne en bas
(améliorée pcq je généralise à différents champs... et que il y a du php pour ajouter la classe en fonction de la présence ou non des paramètres dans l'url)

[woluweb]

Pour être précis, voici même le code qui permet d'ajouter la classe si le paramètre est dans l'url :

{source}
<?php $session = explode(',', JFactory::getApplication()->input->getString('session'));
// echo (in_array('slot-am-1', $session) ? 'yes' : 'no');
// print_r ($session);
echo '<a class="btn btn-default" href="/articlesanywhere">Tous</a> ';
echo '<a class="btn btn-default' . (in_array('slot-am-1', $session) ? ' btn-primary' : '') . '" href="/articlesanywhere?session=slot-am-1">Session 1</a> ';
echo '<a class="btn btn-default' . (in_array('slot-am-2', $session) ? ' btn-primary' : '') . '" href="/articlesanywhere?session=slot-am-2">Session 2</a> ';
echo '<a class="btn btn-default' . (in_array('slot-am-3', $session) ? ' btn-primary' : '') . '" href="/articlesanywhere?session=slot-am-3">Session 3</a> ';

echo '<a class="btn btn-default' . '" href="/articlesanywhere?session=slot-am-1,slot-am-3">Sessions 1 & 3</a> ';

echo '<hr />'; $room= explode(',', JFactory::getApplication()->input->getString('room')); // print_r ($room);
echo '<h4>Filter by Custom Field of type Articles Field (Room)</h4>';
echo '<a class="btn btn-default" href="/articlesanywhere">Toutes</a> ';
echo '<a class="btn btn-default' . (in_array(35, $room) ? ' btn-primary' : '') . '" href="/articlesanywhere?room=35">Amphithéatre PlanetHoster</a> ';

echo '<a class="btn btn-default' . (in_array(199, $room) ? ' btn-primary' : '') . '" href="/articlesanywhere?room=199">Salle Infomaniak</a> ';

echo '<a class="btn btn-default' . (in_array(200, $room) ? ' btn-primary' : '') . '" href="/articlesanywhere?room=200">Salle atelier</a> ';

echo '<hr />'; $jour= explode(',', JFactory::getApplication()->input->getString('jour'));
// print_r ($jour);

echo '<h4>Filter by Tag</h4>';
echo '<a class="btn btn-default" href="/articlesanywhere">Tous</a> ';
echo '<a class="btn btn-default' . (in_array('vendredi', $jour) ? ' btn-primary' : '') . '" href="/articlesanywhere?jour=vendredi">Vendredi</a> ';

echo '<a class="btn btn-default' . (in_array('samedi', $jour) ? ' btn-primary' : '') . '" href="/articlesanywhere?jour=samedi">Samedi</a> ';

echo '<a class="btn btn-default' . (in_array('test', $jour) ? ' btn-primary' : '') . '" href="/articlesanywhere?jour=test">Test</a> ';
echo '<hr />'; $date= explode(',', JFactory::getApplication()->input->getString('date'));
echo '<h4>Filter by Creation Date (possible to filter on yyyy-mm-dd or yyyy-mm or yyyy for example. But using >= in the filter is not foreseen</h4>';
echo '<a class="btn btn-default" href="/articlesanywhere">Tous</a> ';
echo '<a class="btn btn-default' . (in_array('2019-02-04', $date) ? ' btn-primary' : '') . '" href="/articlesanywhere?date=2019-02-04">2019-02-04</a> ';

echo '<a class="btn btn-default' . (in_array('2019-02', $date) ? ' btn-primary' : '') . '" href="/articlesanywhere?date=2019-02">2019-02</a> ';

echo '<hr />'; $page= explode(',', JFactory::getApplication()->input->getString('page')); // print_r ($page);
echo '<h4>Example of text based on Pagination</h4>';
echo '<p>' . 'Is this page 2 or not : ' . (in_array('2', $page) ? 'yes' : 'no') . '</p>'; ?>
{/source}

---

{articles category="30" slot="input:session:*" salle="input:room:*" tag="input:jour:*" created="input:date:*" order="slot,salle" per_page="10"}

[link][title][/link]
[slot]
[salle]

{/articles}

[ghazal]

Je me suis permis de faire du rangement, lol.

[roland_d_alsace]

Hello Marc.

Je pense que ce serait plus facile avec 3 champs "select list" à choix multiple : rooms, sessions et tags (et du coup tu t'affranchirais d'un js perso) :

https://docs.joomla.org/J3.x:Adding_.../List_Field/fr

Et au niveau ergonomie, moi j'aime bien ce champ, plutôt que de multiplier les boutons.

De plus je rajouterai aussi un bouton "valider" pour éviter de recharger la page à chaque choix tant que l'on a pas fini la sélection de l'ensemble des filtres.

Rajout :
Oups, à la réflexion, c'est un peu + compliqué à mettre en œuvre c'est sûr.
Il faut créer un layout de filtres, et l'appeler dans le code.
Si la piste te semble intéressante, je veux bien regarder à l'occasion.

[roland_d_alsace]

Sinon pour rester dans le fil de ton idée des boutons colorées :

il faudrait au clic d'un bouton appeler une fonction js qui attribue la classe qui colorie le bouton, puis qui scrute tous les boutons ayant cette classe de couleur pour calculer l'URL, puis seulement appel de l'url ainsi calculée.

En JQuery cela semble pas trop compliqué...mais tu semble être dans le mouvement anti-JQuery actuel

[woluweb]

Merci ghazal pour l'ajout des balises "code" (si c'est bien ça que tu as changé)

Salut roland_d_alsace
Oh, si c'est en jquery je prends aussi hein ! j'suis pas difficile

Mais le but est d'avoir la possibilité de sélections multiples : exemple :
salle1+salle2 (dans pareil cas, un dropdown ne me paraît pas adéquat)
vendredi+salle1

D'où l'idée a priori de garder des boutons (par ailleurs ça fait aussi moins de clics que d'aller dans un dropdown pour choisir une valeur. Ca dépend du cas de figure bien sûr : s'il y avait 100 valeurs parmi lesquelles choisir SANS sélection multiple, alors bien sûr un dropdown serait mieux)

[roland_d_alsace]

Juste une Petite question ?
C.est une volonté d.utiliser articles anywhere ?

Pourquoi ne pas utiliser un module de filtres sur des custom fields ?

[woluweb]

Juste une Petite question ?
C.est une volonté d.utiliser articles anywhere ?

Pourquoi ne pas utiliser un module de filtres sur des custom fields ?

euh, quel "module de filtres" ?
(et le but est de pouvoir faire des sélections multiples, pas de réinitialiser chaque filtre quand on clique sur un autre)