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 VendorModuleviewfrontendwebtemplate. (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 VendorModuleviewfrontendtemplates. (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.