Accéder au contenu principal

Ne laissez pas Knock-Out vous mettre KO

OK, l'entrée en matière n'est pas aisée avec le framework JavaScript choisi par Magento pour la seconde version du célèbre framework. Ce n'est pas une raison pour faire du jQuery peu compatible. Essayons de voir rapidement comment ça fonctionne.

Comprendre la logique générale

Pour ceux qui, comme moi, ont été nourris au jQuery pendant des années après avoir acquis quelques bases de JavaScript dégueulasses auprès d'un professeur plutôt léger en terme de connaissances d'un des langages les plus utilisés du web, KnockOut peut paraître abscons. 

La première chose à comprendre est que le JavaScript et le HTML ont connaissance l'un de l'autre. C'est une vision qui peut être débattue (et elle l'est) mais là n'est pas le point. Lors de l'écriture du HTML, il faut attacher une logique à la balise s'il est nécessaire de modifier son fonctionnement grâce au JavaScript. Ce n'est que peu le cas pour jQuery par exemple où l'adaptation des balises se limite souvent à l'utilisation des attributs data pour récupérer de la donnée dans le JS.

Pour KnockOut, l'attribut data-bind va permettre d'attacher un certain nombre de choses à l'élément en question. La documentation de knockout montre comment effectuer ces opérations et nous n'allons pas couvrir l'ensemble des possibilités mais il est bon de garder à l'idée que Magento 2 ajoute un certain nombre de possibilités en terme de liaisons en plus de l'attribut data-bind : liaisons personalisées par Magento 2 et liste des liaisons possibles. Cet ajout permet normalement d'avoir des fonctionnalités supplémentaires fréquentes dans le domaine du e-commerce.

Un exemple simple pour commencer

Imaginons qu'il est nécessaire d'avoir une petite bulle avec le nom du client dans le header à la place de l'affichage par défaut :

 On veut quelque chose comme ça :

 

On va commencer avec le HTML. On garde à l'esprit qu'il faut ajouter une petite touche au HTML pour qu'il fonctionne avec KnockOut. Il sera placé dans le dossier \Vendor\Module\view\frontend\web\template. (template est au singulier ici)

Cela va permettre d'avoir le message "welcome" traduit dans la langue du site et de récupérer le nom et le prénom du client. Voyons maintenant comment lier ce morceau de HTML au JavaScript. Dans Magento 2, cela se fait par la définition d'un scope dans le phtml. Il faudra placer ce code dans \Vendor\Module\view\frontend\templates. (templates au pluriel cette fois).

Le bloc et son template doivent être déclarés dans le XML de layout correspondant. Enfin, on va créer le JavaScript

Et voilà comme disent les anglophones.

Pourquoi ça fonctionne ? 

text: getFullName()

Cette partie va appeler la fonction dans le JavaScript. Si le nom du client est mis à jour sur une autre partie de la page (peu probable mais imaginons), le nom sera automatiquement mis à jour

Une fois ce concept compris, il sera aisé de créer des widgets permettant d'afficher l'ensemble des magasins physiques dans une popup mais ce sera l'objet d'un autre article.

Commentaires

Posts les plus consultés de ce blog

[PHP] Faire un petit MVC avec des routes

Pour bon nombre de petits projets, il n'est pas nécessaire de taper dans les frameworks MVC comme Zend ou Symphony qui sont très lourds et un petit truc maison doit suffire. Je vais essayer de donner quelques tuyaux pour pouvoir faire son MVC maison avec des routes qui dirigent vers les contrôleurs et les actions. Tout d'abord, il faut créer un fichier index.php à la racine de votre site qui va contenir le lien vers tout ce dont vous avez besoin pour faire vos routes. Ensuite, vous devez créer un dossier controlleur (si vous voulez reproduire la faute de frappe de l'exemple) dans lequel vous aurez tous vos contrôleurs. Vous pouvez éventuellement diviser ce dossier en plusieurs dossiers distincts qui contiendront les différentes parties de votre site. Veillez à appeler vos classes en rapport avec vos règles de is_callable. Dans mon exemple, le chemin vers le dossier est en minuscule et la première lettre du fichier est en majuscule. Par exemple : la classe /controlleur/fron

[jQuery-ui] Mettre en place plusieurs boutons coulissants

Ce blog est crée à cause du mal que j'ai eu autant de mal en anglais qu'en français à trouver les ressources me permettant de mettre en place des boutons coulissants qui interagissent entre eux et qui soient un peu customisés. Comme un exemple vaut souvent mieux que de longs discours, je voulais faire le simulateur de crédit disponible sur http://www.meilleur-credit.org/ . Pour cela, il fallait que le changement de montant ou de durée puisse influer sur la mensualité. J'ai eu recours pour me simplifier la vie à jQuery-UI (comme User Interface) qui permet d'avoir des boutons coulissants (appelés Sliders dans la langue de Shakespeare ou Seek bars pour l'interface android). La mise en place graphique La mise en place est assez simple pour avoir une apparence standard mais elle se complique un peu si on veut une apparence plus personnalisée. J'ai essayé de dire à mon graphiste que je m'en foutais mais vous savez, vous développeurs, comment ils son

Ajouter un administrateur à Magento 1 en SQL

On vous balance sur un projet, vous devez récupérer la base de données et travailler dessus dans votre environnement de développement. Le problème est que vous n'avez pas d'accès à l'administration car vous n'avez pas d'utilisateur créé en production ou en staging. Ce n'est pas une fatalité ! Il est possible de créer facilement un utilisateur qui aura les rôles suffisants dans Magento avec seulement un accès à la base de données. Pour faire cela, il faut comprendre que les administrateurs sont inscrits dans une table et leur rôle dans une autre. Dans le script suivant, on créera un administrateur avec les pleins pouvoirs mais vous pouvez adapter ce script à vos besoin en jetant un oeil à la table admin_role et en modifiant parent_id dans le script. La colonne parent_id définit le parent du rôle en question pour l'utilisateur. Si vous voulez créer un utilisateur avec des pouvoirs différents, regardez le rôle qui correspond au pouvoir que vous accorde