Sélecteur de devises flottant WooCommerce : réglages, pages, mobile et CSS

Le sélecteur de devises flottant de WooCommerce dans FOX est un panneau fixé au bord gauche ou droit de l'écran. Il reste visible pendant que le visiteur fait défiler la page et ne demande ni zone de widgets, ni shortcode, ni modification du thème : vous l'activez dans les réglages du plugin et il apparaît sur chaque page que vous autorisez. Ce guide présente ses réglages, la façon de le limiter à certaines pages et à certains appareils, les correctifs pour les problèmes habituels sur mobile, et le CSS pour les détails que les réglages n'atteignent pas.

Activer le sélecteur de devises flottant

Ouvrez WooCommerce → Réglages → Devise (Currency) → Côté (Side) et activez Activer / Désactiver (Enable / Disable). Les autres options apparaissent une fois qu'il est activé :

Les deux options de champs acceptent des variables que FOX remplace pour chaque devise : __CODE__ (USD), __SIGN__ ($), __FLAG__ (l'image du drapeau) et __DESCR__, le texte de la colonne Description de l'onglet Devises (Currencies). Pour modifier un texte comme « USA dollar », modifiez cette description. Si un champ est laissé vide, FOX affiche le code de la devise à la place : un Champ(s) au survol (Hover field(s)) vide ne supprime donc pas le texte au survol ; le CSS ci-dessous le fait.

Le sélecteur liste chaque devise dont l'interrupteur Visible est activé dans l'onglet Devises (Currencies). Une devise absente du panneau est presque toujours une devise dont Visible est désactivé. Les options de style de la liste déroulante et l'onglet Designer s'appliquent au sélecteur [woocs], pas à ce panneau.

Choisir les pages où il apparaît

Afficher sur les pages (Show on the pages) et Masquer sur les pages (Hide on the pages) acceptent des identifiants de page et des mots-clés, séparés par des virgules sans espaces. FOX découpe la liste à chaque virgule sans retirer les espaces : dans product, shop, la deuxième entrée est « shop » et ne correspond jamais à rien ; écrivez product,shop.

Les nombres sont traités comme des identifiants de page et ne fonctionnent que pour les pages WordPress ; l'identifiant d'un produit ou d'un article ne correspond à rien. Lorsque Afficher sur les pages (Show on the pages) contient une valeur, le sélecteur est masqué partout ailleurs. Une entrée de Masquer sur les pages (Hide on the pages) l'emporte sur la liste d'affichage. Par exemple, woocommerce,cart dans la liste d'affichage garde le panneau sur le catalogue et le panier, et le retire du blog et de la page de paiement.

Pour l'écarter uniquement de la page de paiement, il existe une option plus simple : Masquer le sélecteur sur la page de paiement (Hide switcher on checkout page) dans l'onglet Options masque le sélecteur latéral sur la page de paiement et sur celle du paiement d'une commande, ainsi que le sélecteur [woocs] sur la page de paiement.

Conditions que les champs ne peuvent pas exprimer

Les articles de blog, les produits et les pages de cours sont tous des entrées « single » : les champs ne peuvent donc pas les distinguer. Après avoir appliqué ses réglages, FOX fait passer sa décision par le filtre woocs_show_side_swither, et ce que vous renvoyez l'emporte. Le nom du hook s'écrit swither dans le plugin ; utilisez-le exactement ainsi.

/*
 * FOX side switcher: final decision on where it is shown.
 * Child theme functions.php or a code snippets plugin.
 */
add_filter('woocs_show_side_swither', function ($show) {
    if (is_singular('post') || is_home()) {
        return false; // blog posts and the blog page
    }
    if (is_singular('course')) {
        return true;  // replace "course" with your custom post type
    }
    return $show;     // everywhere else the Side tab settings decide
});

Téléphones et tablettes

Comportement selon l'appareil (Behavior for devices) a la priorité la plus haute : lorsqu'il masque le sélecteur, les listes de pages et le filtre ne sont pas consultés. Il utilise la fonction WordPress wp_is_mobile(), qui examine côté serveur le user agent du navigateur. Cela a deux conséquences :

• Avec un cache de page, le HTML construit pour le premier visiteur est servi à tout le monde. Si le cache ne conserve pas de copies séparées pour les appareils mobiles, un téléphone peut recevoir la version bureau, sélecteur compris, ou l'inverse.
• Certaines tablettes, les iPad en particulier, se présentent comme des navigateurs de bureau et comptent comme du bureau.

Lorsque l'un ou l'autre pose problème, gardez Afficher sur tous les appareils (Show on all devices) et masquez le panneau selon la largeur d'écran en CSS, ce que le navigateur décide à chaque affichage de page :

/* Hide the FOX side switcher on screens up to 767px wide */
@media (max-width: 767px) {
    body .woocs_auto_switcher {
        display: none !important;
    }
}

Les boutons situés sous le sélecteur ne répondent pas au toucher

Blocs classiques (Classic blocks) se trouve dans une boîte fixe et transparente de 200 pixels de large sur 220 pixels de haut, et Blocs déroulants (Roll blocks) dans une colonne de 90 pixels. Sur un téléphone, cette boîte peut recouvrir la flèche d'un slider, un bouton d'ajout au panier ou l'icône du menu, et les touchers tombent sur la partie vide du sélecteur. Sélecteur rond (Round select) laisse passer les touchers tant qu'il est fermé. Réduisez la boîte à son contenu et placez-la sous les calques du thème :

/* FOX side switcher: no invisible area, below sticky headers and menus */
body .woocs_auto_switcher {
    width: auto;
    height: auto;
    z-index: 99;
}
/* Round select has its own, stronger rule for the stacking order */
body .woocs_auto_switcher.cd-stretchy-nav {
    z-index: 99;
}

L'ordre d'empilement par défaut du sélecteur est 99999 (9999 pour Sélecteur rond (Round select)), au-dessus de presque tout ce que dessine un thème. Avec 99, le menu du thème, le tiroir du panier ou la bannière de cookies s'ouvrent au-dessus de lui. Si le thème recouvre alors le sélecteur lui-même, augmentez le nombre par étapes.

Un toucher change la devise par accident

Les écrans tactiles n'ont pas de survol : le panneau coulissant de Blocs classiques (Classic blocks) peut donc s'ouvrir au toucher et recouvrir la page, et le toucher suivant dans cette zone change la devise. Désactivez le panneau sur les écrans tactiles :

/* Classic blocks: no slide-out panel on touch screens */
@media (hover: none) {
    body ul.woocs_auto_switcher li a span {
        display: none !important;
    }
}

Une longue liste ne tient pas à l'écran

Un panneau fixe ne défile pas : avec beaucoup de devises, les dernières se retrouvent sous le bas de l'écran d'un téléphone et sont inaccessibles. Montrez moins de devises (l'interrupteur Visible), ou laissez le panneau défiler avec la page sur les petits écrans :

/* The panel scrolls with the page on small screens */
@media (max-width: 767px) {
    body .woocs_auto_switcher,
    body .woocs_auto_switcher.cd-stretchy-nav {
        position: absolute;
    }
}

Pour un panneau plus étroit, réglez Champ(s) de base (Basic field(s)) sur __SIGN__ ou __FLAG__. Pour des réglages différents sur téléphone, utilisez le filtre à la fin de ce guide.

Recettes CSS

Ajoutez le CSS dans le CSS additionnel de votre thème (Apparence → Personnaliser → CSS additionnel, ou Styles → CSS additionnel dans l'éditeur de site d'un thème bloc), puis purgez le cache de page. Le préfixe body rend les règles plus fortes que les styles du plugin. Commencez par Couleur principale (Main color) et Couleur au survol (Hover color) ; les règles ci-dessous couvrent ce qu'elles ne font pas.

/* Smaller flags (Classic blocks and Roll blocks), default 35px */
body .woocs_auto_switcher img.flag_auto_switcher {
    width: 24px;
}

/* Classic blocks: let a long hover text wrap instead of overflowing */
body ul.woocs_auto_switcher li a span {
    height: auto;
}
body ul.woocs_auto_switcher li a span div {
    white-space: pre-wrap;
}

/* Classic blocks: gradient buttons; the current currency keeps the Hover color */
body ul.woocs_auto_switcher li a {
    background: linear-gradient(90deg, #1e3c72 0%, #2a5298 100%);
}

/* Round select: gradient background of the opened panel */
body .woocs_auto_switcher.cd-stretchy-nav .stretchy-nav-bg {
    background: linear-gradient(180deg, #1e3c72 0%, #2a5298 100%);
}

Si le panneau ne réagit pas à une règle, inspectez-le dans les outils de développement du navigateur : Blocs classiques (Classic blocks) est un ul.woocs_auto_switcher, Blocs déroulants (Roll blocks) et Sélecteur rond (Round select) sont un nav.woocs_auto_switcher, avec la classe left ou right pour le côté.

Réglages différents selon l'appareil : woocs_side_switcher_data

Tous les réglages du panneau passent par le filtre woocs_side_switcher_data avant la construction du panneau. Le tableau comporte les clés skin (classic_blocks, roll_blocks ou round_select), side, top, color, hover_color, basic_field et add_field (le champ au survol). Cet exemple affiche sur téléphone un bouton rond compact à droite et laisse intacts les réglages du bureau :

/*
 * FOX side switcher: other settings on mobile devices.
 * Child theme functions.php or a code snippets plugin.
 */
add_filter('woocs_side_switcher_data', function ($data) {
    if (wp_is_mobile()) {
        $data['skin']        = 'round_select';
        $data['side']        = 'right';
        $data['top']         = '30%';
        $data['basic_field'] = '__SIGN__';
    }
    return $data;
});

Il s'appuie lui aussi sur wp_is_mobile() : la remarque ci-dessus sur le cache de page s'applique donc. Si vous préférez une liste déroulante fixée dans un coin plutôt qu'un panneau latéral, consultez comment placer le sélecteur de devises en bas du site.

S'il ne s'affiche toujours pas

• Activer / Désactiver (Enable / Disable) est activé dans l'onglet Côté (Side) et les réglages ont été enregistrés.
• Les listes de pages ne contiennent pas d'espaces et utilisent product_category, pas product-category.
• Comportement selon l'appareil (Behavior for devices) et Masquer le sélecteur sur la page de paiement (Hide switcher on checkout page) ne le masquent pas sur la page que vous testez.
• Au moins deux devises ont Visible activé.
• Le cache de page et le cache du navigateur ont été purgés après la modification, et aucun snippet ne renvoie false depuis woocs_show_side_swither.

Si le panneau n'apparaît toujours pas ou se comporte différemment des réglages, ouvrez un sujet sur le forum de support de FOX en indiquant le lien de la page et vos réglages de l'onglet Côté (Side), et nous l'examinerons.