Accéder au contenu principal

Comment avoir de belles boucles avec KnockOut

 Une des puissances du javascript dans Magento 2 est de permettre de faire du chargement assynchrone sans vraiment se forcer le cerveau. Que ce soit pour charger une liste de produits ou les résultats d'un filtrage. La logique mise en place dans KnockOut va vous permettre de faire facilement des listes. Si vous arrivez directement sur cette page, je ne saurez que vous conseiller de jeter un œil à l'initiation à knockout avant de continuer.

Pour illustrer notre propos, nous allons voir comment mettre en place un composant qui chargera les résultats de recherche en fonction de ce que l'utilisateur saisi dans un champ. Si vous souhaitez réellement faire cela, sachez qu'il existe déjà un widget dans Magento 2 qui le fait.

Le composant de vue

Tout d'abord, nous allons créer le composant de vue. Pour cela, il nous faudra principalement deux choses : 

  • une variable qui sera modifiée quand l'utilisateur tapera un mot de recherche 
  • un tableau observable qui va contenir les résultats de notre recherche.

Il faut songer que le temps de réponse du serveur peut être supérieur à la vitesse à laquelle tape un utilisateur. C'est pourquoi, dans cet exemple précis, j'ai recours à la limitation de fréquence (rate limit) pour les observables. Cela peut être utile quand l'utilisateur est amené à effectuer des modifications rapides d'un champ mais qui n'ont besoin d'une réponse qu'une fois la saisie finie (ou au moins en pause).


Une fois que cette partie a été créé, nous allons pouvoir passer à la suite.

Le modèle de vue

Le html doit faire référence aux deux choses importantes de notre composant de vue. A savoir, le mot recherché qui doit être envoyé au composant et les résultats qui doivent être récupérés depuis le composant.

Une fois cela réalisé, vous pouvez utiliser les lier via le scope comme cela est décrit dans l'initiation à knockout cité dans l'entête de ce billet.

Différentes utilisations

Cela peut également servir à filtrer des produits directement sur une catégorie, mettre en place des questions interdépendantes pour un formulaire de contact, lister les différents moyens de paiement proposés dans un bloc de réassurance, afficher l'ensemble des magasins physiques du groupe...

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