Étiquette : bouton

[Magento 2] Afficher/masquer le bouton « Effacer tous les filtres » dans la liste des catégories/produits

Testé fonctionnel Magento 2.4!

Dans mon exemple, l’ID « narrow-by-list » est présent deux fois dans le DOM (ce qui n’est pas du tout une bonne pratique) car la liste des filtres s’affiche dans deux zones bien distinctes de la page: 1. en mode horizontal au-dessus de la liste des catégories/produits et dans un volet glissant qui ne s’affiche qu’au clic sur un bouton de type « Voir plus de filtres ».

Il faudra donc adapter un peu mon code à votre propre utilisation.

Chemin: app/design/frontend/MyVendor/MyTheme/Magento_LayeredNavigation/templates/layer/view.phtml.

  • Je désactive la condition PHP <?php if ($block->getLayer()->getState()->getFilters()) : ?> qui sette la visibilité du bouton « Effacer tout », mais uniquement au rechargement de la page.
  • J’ajoute un ID <div id="filterActions" class="block-actions filter-actions">.

Dans le même fichier view.phtml, j’ajoute ce bout de code javaScript (il vous faudra probablement adapter le ciblage du selecteur suivant qui n’existera pas chez vous: let FILTER = $('#narrow-by-list.is-view-top').find('.active');):

On n’oublie pas le petit CSS qui va bien:

[Magento 2] Rajouter des préfixes de civilités sous forme de boutons radio dans le formulaire de création de compte

Attention: astuce fonctionnelle sur une version de Magento 2.4 Enterprise. Je crois que toute la partie attributs des customers n’est pas disponible en version Community Edition. Mais cette astuce pourrait très bien fonctionner avec les deux versions.

PHTML à modifier

Créer le fichier de surcharge app/design/frontend/MyVendor/mytheme/Magento_Customer/templates/widget/name.phtml pour remplacer l’élément Select par des boutons Radio:

A savoir:

Sans ajouter le bout de code ci-dessous, l’information sur le préfixe coché lors de l’inscription ne sera PAS récupérée pour des affichages ultérieurs des préfixes dans les pages du site.

Par exemple, dans la page « Modifier les informations de mon compte », les boutons radio représentant les préfixes disponibles s’affichaient bien, mais celui qui avait été coché lors de l’inscription n’était pas coché!

Manipulations à effectuer en BO – Afficher les préfixes (Madame, Monsieur) dans le formulaire de création de compte

  • Se rendre dans STORES > Attributes > Customer
  • Dans la liste des attributs, sélectionner l’Attribute Code « prefix »
  • Scroller jusqu’au volet « Storefront Properties »
  • Passer le champ « Show on Storefront » à « Yes »
  • Cliquer sur le bouton orange « Save Attribute »
  • Se rendre ensuite dans STORES > Settings > Configuration
  • Passer le Scope au store voulu
  • Dans la navigation de gauche, aller dans CUSTOMERS > Customers Configuration
  • Ouvrir le volet « Name and Address Options »
  • Au niveau du champ « Prefix Dropdown Options », décocher la case « Use Defaults »
  • Dans le champ « Prefix Dropdown Options », saisir les préfixes séparés par des point-virgules (exemple: Madame;Mademoiselle;Monsieur)
  • Cliquer sur le bouton orange « Save Config »
  • Se rendre ensuite dans SYSTEM > Tools > Cache Management
  • Cocher les « Cache Type » « Configuration » et « Page Cache » (leur « Status » est normalement en « INVALIDATED »
  • Au niveau de la liste de sélection située en haut à gauche du tableau, sélectionner « Refresh » et cliquer sur le bouton gris « Submit »

[javaScript] Désactiver un bouton d’action si le champ input associé affiche une valeur inférieure ou égale à zéro

Solution 1:

Vérifier que le contenu à changé avec l’événement input (source: Can jQuery check whether input content has changed?).

Où (optimisé)

Solution 2:

avec les attributs onkeyup et disabled

[jQuery] Détecter quel bouton est cliqué lors de la soumission d’un formulaire

Source : jquery detect which button submitted form

Attention: ne fonctionne qu’avec l’élément <input />, pas avec les éléments <a />, <button />.

[jQuery] Soumettre un formulaire sans rafraîchir la page avec Ajax

Source: Form Submission without page refresh

[SASS] Mixin button-reset pour annuler les styles appliqués aux boutons

Source: Codepen.io – Reset button style.

[CSS] Styler tous les éléments de formulaires de façon sexy et uniquement avec CSS

Source : Custom Style All Your Form Elements with Pure CSS and No JavaScript

Styler l’élément HTML Select avec CSS

(Works in IE8+, FF, Webkit)

Une variante sans image de fond avec Bootstrap 3 et le composant CSS .caret

sexy-select_variante_bootstrap-caret

[CSS] Un champ de formulaire fluide et un bouton alignés qui prennent systématiquement 100% de la largeur de leur conteneur

Solution moderne avec la propriété CSS box-sizing :

Solution obsolète :

Source : Input field and submit button on the same line, full width.

[jQuery] Click/toggle entre deux fonctions (bouton play/pause, start/stop)

Source : jQuery click / toggle between two functions.
Plug-in : [jQuery-Function-Toggle-Plugin
] A jQuery plugin that binds multiple event handlers which are executed on each consecutive event
.

Ajout d’un bouton Play/Pause au carousel Bootstrap : Simulation, fil de discussion sur Stack Overflow.

Problème : lancer deux opérations (ou fonctions) distinctes lorsqu’on clique sur un seul et même bouton (bouton play/pause par exemple).