Étiquette : placeholder

[Magento 2] Récupérer la placeholder image de votre store dans un block PHP

Objectif:

Dans la fonction suivante, je souhaite rajouter en else la possibilité d’afficher la placeholder image rendue disponible par Magento 2 si l’utilisateur admin backoffice n’a pas uploadé d’image spécifique.

Solution:

Tout d’abord, juste après la déclaration class myClassName extends…, déclarer le Helper Image et sa variable $imageHelper:

NOTE: dans mon cas (un peu particulier), une protected function _construct(): void existe déjà dans le block. Il ne faut pas chercher à la modifier!

Au lieu de ça, dans notre code et juste en-dessous ce premier contructeur, on crée une nouvelle extension de public function __construct sur le modèle de la fonction _construct tout droit issue de vendor/magento/framework/View/Element/Template.php et on y ajoute le image helper:

NOTE: \Template\Context $context devient \Magento\Framework\View\Element\Template\Context $context pour l’occasion.

Puis compléter la fonction de départ avec un else qui retourne l’image placeholder:

Cette manip’ donnera le même résultat que si on mettait en place le code suivant la le fichier template PHTML chargé d’afficher les images ou, à défaut, le placeholder. On est cependant plus efficace en renvoyant directement l’image adéquate via le block PHP. Donc, le code ci-dessous est présent juste à titre informatif mais éviter de l’utiliser dans la mesure du possible (on voit qu’on utilise, comme argument de la condition, la même méthode empty() que dans le block PHP):

[Magento 2] Un champ Date de Naissance custom avec validation côté javascript, placeholder et masque de saisie avec le plugin Cleave

Testé fonctionnel Magento 2.3, 2.4

Nous allons supprimer le widget calendar du champ date de naissance du formulaire de création de compte de Magento 2.
Attention: le champ Date de Naissance n’apparaît pas par défaut! Il faut l’activer via l’interface d’administration (Google est ton ami).

Demo en ligne de Cleave.js.

app/design/frontend/MyVendor/mytheme/Magento_Customer/templates/widget/dob.phtml:

Apporter plus d’attention au passages suivants:

  • data-validate='{"required":true, "validate-date": {"dateFormat": "dd\/MM\/y"}, "validate-dob": true}' sur l'input type="text" permet la bonne validation de votre champ Date de Naissance
  • <script>require(['cleave'... qui initialise le masque de saisie sur le champ via le plugin Cleave.js

app/design/frontend/MyVendor/mytheme/requirejs-config.js:

Import des sources de Cleave.js dans le projet:

Au moment où j’ai mise en place cette fonctionnalité, la dernière version tagguée de Cleave.js était la v1.6.0, mais n’hésitez pas à mettre à jour avec une version supérieure si existante!

Placez la source minifiée dans app/design/frontend/MyVendor/mytheme/web/js/vendor/cleave/dist/cleave.min.js.

[CSS] Afficher des icônes issus d’une police dans des champs de formulaire (notamment ceux de Bootstrap)

Source : Support glyph and fa icon inside input.

Code CSS réduit (mis en place dans un Magento avec Font Awesome comme bibliothèque d’icônes) :

Afin que l’icône s’affiche correctement, (il semble que) la structure HTML doivent obligatoirement comporter des <div class="row"><div class="classes-de-votre-grille placeholder-icon"> englobants :

La classe .icon-addon pouvant entrer en conflit avec d’autres styles affectés à des classes plus génériques de type icon-, j’ai préféré changer le libellé en .placeholder-icon.

Code HTML/CSS de la démo initiale :

[CSS] Styler un Placeholder

Source: http://css-tricks.com/almanac/selectors/p/placeholder/

Remarque : à priori, il faut mettre la mention !important derrière chaque déclaration pour qu’elles soient prises en compte.

Utilisateurs de préprocesseurs type LESS, SASS, attention : les pseudo-éléments ci-dessus ne fonctionnent pas si le code est factorisé. Déclarer les styles comme ci-dessous :

[jQuery] Simuler un placeholder

[jQuery] Déplacer les textes des étiquettes Label de formulaire vers les attributs Placeholder des champs Input associés

label_to_placeholder

Simulation : http://jsfiddle.net/frontenddeveloper/ZXxXH/1/