Discussion :

[AlainProust]

Bonjour,

je crée un site de vente de jouets avec wordpress et le thème divi.
Sur ma page de catégories de produits, j'ai des boutons que j'essaye de personnaliser en fonction de l'url de la page.

en gros, lorsque je clique sur un bouton, je veux que ce bouton change d'aspect et le conserve une fois la page chargée.

si url = catégorie 1/ ss-cat 1 alors bouton 1 devient orange, les autres boutons ne changent pas)
si url = catégorie 1/ ss-cat 2 alors bouton 2 devient orange, bouton 1 redevient "normal" etc...

J'ai un module "code" dans ma page où je peux insérer du code Javascript qui s'appliquera à ma page. j'y ai inséré ces conditions mais rien ne se passe.
Je n'y connais pas grand chose en javascript et en programmation. je consulte beaucoup de forums et lis beaucoup de cours mais j'ai mes limites et on ne s'improvise pas développeur...

Pourriez vous regarder ce qui "cloche" ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
 
// récupérer l'url de la page
var url = window.location.protocol + "//" + window.location.host + "/" + window.location.pathname;
 
// conditions si url="page de catégorie peluches", souligner un texte en rouge pour l'exemple
if (url==="https://monsite.fr/index.php/categorie-produit/peluches") {
    .et_pb_text_0 {
     text-decoration: underline red;
    }
 
}

je précise qu'ensuite je dois "minifier " le code pour qu'il fonctionne au sein de mon module code divi et le mettre entre 2 balises <script> </script> pour que ça fonctionne

Merci beaucoup

[Invité]

Bonjour,

...je crée un site de vente de jouets avec wordpress et le thème divi...

Il va falloir être plus précis que ça !
version de WP ? divi ? (avec WooCommerce ??)


à priori, avec WordPress, il suffit généralement de modifier le code CSS via le fichier style.css.
Normalement, quand une rubrique du menu est cliquée, une classe CSS est automatiquement appliqu

Il faudrait voir ton site en ligne.

[AlainProust]

bonjour,

voilà la config
- Version de WordPress : 5.2.3
- Version de PHP/MySQL : 7.0.33 / 5.6.39
- Thème utilisé : Divi Child

- Divi child Version : 3.0.106.1523874206
- Woocommerce Version 3.7.0

Mon site est en construction. voici le lien vers ma page de catégorie faite avec un modèle layout enregistré dans ma bibliothèque https://www.clic-jouet.fr/index.php/...duit/peluches/
Je teste le principe sur ma catégorie peluches. J'ai une barre de menu en haut sous le header qui m'affiche la catégorie sélectionnée (peluches ici) et les sous-catégories correspondantes, toutes sous forme de boutons. (les photos sont bidons)

J'aimerais qu'une fois une sous-catégorie cliquée, le texte du bouton cliqué change de couleur (avec un soulignement éventuellement) afin de savoir où l'on se situe dans les catégories de manière visuelle, et pouvoir en changer de manière rapide sans passer par le menu du header (Jouets/ Peluches/sous-catégorie souhaitée)
Une fois un autre bouton cliqué, le bouton sélectionné précédemment retrouve sa couleur d'origine et le nouveau prend sa nouvelle couleur et soulignement.

Chaque élément de la page est modifiable par des réglages de style ou via le css. Je peux donc modifier le visuel d'un bouton mais il garde toujours ses caractéristiques après.
J'aimerais qu'il garde des modifications une fois cliqué et les perde au clic d'un autre bouton.

[AlainProust]

Avec Divi, j'utilise le module "code" qui permet d'insérer du javascript.

J'y ai donc inséré le code de mon premier message qui devait souligner un texte en rouge quand la catégorie peluches (par exemple) était sélectionné (pour valider le principe de fonctionnement)
Le module code et le module texte à modifier était dans la même section mais ça ne marchait pas

[Invité]

A tester :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
"use strict";
// -------------------
function get_filename_by_url( url )
{
  url = url.replace( /(\?.*)?(\#.*)?/gi,'' ); // supprime les parametres et ancre
  url = url.replace(/^\/+|\/+$/gm,''); // supprime le / final
  let filename = url.substring(url.lastIndexOf('/')+1 ).trim('/');
  return filename;
}
// ------------
function highlight_sous_categorie_active( )
{
  /* page courante (URL du fichier) */
  const page_courante = get_filename_by_url( window.location.href );
  /* sous-catégories (href) */
  const et_pb_button_all = Array.from(document.querySelectorAll('.et_pb_button'));
  et_pb_button_all.forEach(function(button){
    button.classList.remove('bt-active');
    let button_href = get_filename_by_url( button.getAttribute('href').trim('/') );
    if( button_href == page_courante ){
      button.classList.add('bt-active');
    }
  });
}
// ------------
highlight_sous_categorie_active( );
// ------------

CSS à adapter :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.bt-active { 
  color:green; 
  font-weight:bold; 
}

[AlainProust]

Sous mon menu de catégories peluches et sous-catégories, j'ai inséré 2 modules codes divi côte à côte (le code à gauche, le css à droite)
Je les ai minimiser sur le site https://cssminifier.com/

en dessous j'ai rajouté une autre ligne avec 2 modules codes côte à côte de la même façon mais sans modifier le code.

dans les 2 cas il m'affiche le code brut.

ai-je fais une erreur ou est-ce-que je dois écrire ce code à un autre endroit ? lien https://www.clic-jouet.fr/index.php/...duit/peluches/

merci