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

  1. Throw in employee salaries, overhead, and marketing expenses—which Vixio said could make up over 50% of general revenue alone—and on-line sports activities gambling just isn’t a moneymaking enterprise at this point. People take pleasure in each 코인카지노 taking part in} in sports activities as well as|in addition to} being a fan, cheering on their favorite staff. Not only do followers simply get pleasure from watching but additionally they like to place wagers on the occasions. Sports betting actually has an extended historical past and has been around for centuries of years}.

    RépondreSupprimer

Enregistrer un commentaire

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

Injecter des icônes font-awesome via JavaScript

Les icônes de font-awesome sont traduites en SVG ( Scalable Vector Graphics) à la volée grâce à un script. Le problème quand on injecte du HTML dans le DOM est que le script ne s'exécute pas correctement et l'icône n’apparaît pas. Pour palier à cela, il est possible d'utiliser un générateur de ressources qui est embarqué dans la librairie font-awesome. Pour éviter au script de s'exécuter sur des icônes qui se répètent, la librairie comprend un script qui permet de traduire une seule fois l'image en SVG pour être réutiliser dans des listes. Comme disent les anglo-saxons, et voilà ! Il y a d'autres exemples d'utilisation :  https://fontawesome.com/how-to-use/on-the-web/advanced/svg-symbols    

Modifier le type d'entrée d'un attribut produit dans Magento

Aujourd'hui, suite à une modification différente via l'administration dans deux instances du même site (dev et staging), j'ai du modifié le type d'un attribut de liste déroulante vers multi-select. Pour y parvenir, j'ai du faire quelques modifications dans la base de données directement puisqu'il n'est pas possible de le faire via l'administration. On voit que le type d'entrée est grisé Pour faire cette modification, je me suis basé sur un gist que j'ai adapté selon mes besoins : Et voilà !