 Bonjour à tous, bienvenue à cette conférence dédiée à la conception d'espace client avancé sous WooCommerce. Alors, Mickael, peux-tu résumer un petit peu le sujet de notre intervention ce matin ? Mais nous n'allons pas, il n'a pas trop préparé. Pour résumer, on va parler de WooCommerce et plus particulièrement des espaces clients au niveau des possibilités, de ce qu'on peut ajouter au niveau des options, de tout ce qui est personnalisable. Et il y a beaucoup de choses à dire. En gros, comment faire un espace client qui déchire avec WooCommerce ? C'est un bon mesumé. C'est le dit de la conférence. Alors, pour se présenter rapidement, on ne va pas étayer non plus de 10 ans nos titres de noblesse, c'était pour rigoler un petit peu, mais pour se situer, peut-être que vous connaissez l'un de ces petits logos. Il y a des gens du Sud-West dans la salle-là, d'ailleurs, mais il n'y en a plus. Et si vous êtes dans le Sud-West, peut-être que vous serez intéressé pour aller au meet-up WordPress Meet and Exchange sur la Côte Basque notamment. Et on essaie de s'implanter sur Giron. Donc, on pourra causer WordPress. Voilà, on pourra rediscuter après. Il y a des gens de Bordeaux, d'ailleurs, ici ? Il faut monter un truc à Bordeaux, s'il n'y a pas déjà quelque chose, on ne sait pas trop. Voilà, on enchaîne. Alors, WooCommerce ? Ah, WooCommerce. Donc, c'est une extension WordPress qui permet de faire de l'e-commerce. Est-ce que, déjà, dans la salle, il y en a qui font du développement WordPress et qui utilisent... Qui fait du WooCommerce ? Levez la main, s'il vous plaît. Non, déjà, qui c'est ? Ouais. Bien. Alors, maintenant, la main, levez, s'il vous plaît. Et parmi vous, qui vendent des projets WooCommerce à des clients ? Autant, autant, autant. Donc, c'est bien, c'est... Vous êtes à la bonne conférence, c'est rassurant. Bon, WooCommerce, rachetée depuis le mois de mai par Automatique, Société qui supporte donc le projet WordPress. Et on espère qu'ils vont encore plus le booster dans les mois qui viennent, puisque la fission a eu lieu, mais on sait pas... Enfin, l'acquisition a eu lieu, tout récit. Non, c'est pas trop encore ce que ça va donner pour la communauté des utilisateurs. Ce qu'on veut dire aussi sur WooCommerce, c'est que c'est un plugin auquel on peut greffer d'autres plugins. C'est-à-dire qu'on peut lui donner encore plus de fonctionnalités. Donc, à la base, il a certaines options. Et si quelque chose manque, on peut très bien dire, peut-être que quelqu'un a développé un plugin qui vient se greffer à WooCommerce. Ça fait le plugin du plugin. C'est ça un peu, c'est qu'on peut faire, on pourrait très bien avoir WordPress avec tout son écosystème d'extension. Mais finalement, cet univers-là, on le retrouve aussi sous WooCommerce, qui a aussi son écosystème d'extension. Et c'est presque deux mondes qui ont leur univers à part entière. C'est cette particularité-là qu'on va aussi creuser... Tout au long de la conférence ? Tout au long de la présentation. Bam ! Bam ! Voilà. Petite animation sympa. Donc pour situer les choses, WooCommerce, en 2016, les stats sont toutes fraîches. On les a sortis du service built with, je ne sais pas si vous connaissez, qu'il y a un outil de stats en ligne, quasiment au jour le jour, sur toutes les technologies de web utilisées. Et donc on s'est attardé sur les parts de marché par pays, pour ou au commerce. Et enfin, constat, c'est clair. C'est carrément, presque 60% pour les États-Unis. Donc c'est vraiment là-bas que ça marche. Et en France, on n'a que 3,3%. Donc c'est vraiment très peu, en fait. C'est vraiment quelque chose qui nous vient des États-Unis et sur lequel c'est en train d'émerger ici un petit peu. Je ne sais pas si d'ailleurs on aurait pu voir une respoie trop perspective. Donc, seconde, très intéressante, pour nous francophones notamment, c'est qu'on est au niveau mondial à environ 30% part de marché sur les solutions e-commerce avec des gens qui utilisent au commerce. Mais sur le marché français, on aura du prestashop beaucoup plus majoritaire, beaucoup mieux à implanter. Alors au niveau mondial, c'est pas du tout le cas. En fait, prestashop ne sort même pas dans les stats. Et c'est ça qui est marrant. Mais alors que chez nous, en France, c'est très très connu et largement implanté. Et c'est aujourd'hui concurrent, direct, d'une solution comme au commerce. Donc la perception des choses, c'est quand même propre au pays dans lequel on se trouve et attention au marché. La stats des 30%, chez Wutem, ils aiment bien mais on pense en français aussi. Et puis après, on a du Magento qui résisterait très bien, qui est très bien implanté sur les gros projets aussi. Du Shopify, il y a plein de solutions dans tous les sens. Donc le e-commerce, il est naissant finalement sur les solutions mode CMS. Comment définir un espace client ? Alors déjà, pour éventurer la question, ça serait bien qu'on sache ce qu'est un espace client par défaut dans WutCommerce. Parce que le sujet, c'est quand même de parler de WutCommerce et de voir de presse en général. Et donc du coup, par défaut, l'espace client de WutCommerce, quand il est sorti de la boîte, il est assez simpliste en fait. Il répond à deux choses. La consultation, la modification des informations personnelles. Vous pouvez éditer dans votre compte vos adresses, vos mots de passe. Et aussi tout ce qui concerne vos identifiants. Et ensuite, et c'est quand même pas mal, c'est de pouvoir consulter l'historique de ces commandes. C'est là où on peut retrouver où on a passé nos commandes et aussi surtout, l'état des commandes. Donc on peut aussi voir si la commande est en cours, si elle a été bien payée, si il n'y a pas eu de soucis, ou si elle est terminée. Et donc on a quand même un cas particulier. C'est si vous avez des produits qui sont dis virtuels, téléchargeables. Donc les produits virtuels, c'est tout ce qui n'est pas physique. Par exemple, je suis vendu un service, je ne sais pas, une nuit d'hôtel par exemple. Un e-book? Un e-book après, donc ça devient un produit virtuel, mais aussi téléchargeable. Tout à fait. Téléchargeable. Donc ça pourrait être un, par exemple, un chien mp3, jouer une musique, c'est un produit virtuel téléchargeable. Donc ça, vous le retrouvez aussi dans l'espace client. Vous pourrez le retrouver et le télécharger. Et à part ça, on ne fait rien d'autre dans l'espace client. Et je ne sais pas vous, ça me paraît un peu basique. Surtout de base comme ça. Je confirme. Un exemple avec le thème Storefront. Très connu des utilisateurs de WooCommerce puisqu'il est gratuit. Et il est souvent présenté dans les tutoriels de chez eux. Et c'est un peu leur faire de lance. C'est comme on a les 20 dans les WordPress. On va avoir le Storefront qui a des extensions qui viennent se greffer spéciale Storefront. Pour si vous voulez apprendre à développer des thèmes WooCommerce, c'est pas mal. Vous pouvez creuser ce qu'ils mettent dedans. Il y a des petites fonctions sympathiques. Le Storefront de base, qu'est-ce qui nous sort au niveau espace client. Je ne sais pas si vous voyez très bien. Mais en gros, les commandes, l'adresse et éditez le profil. Ce que je viens de dire. Oui, ça est précédente. Autant de dire que c'est pas terrible. Il va falloir trop se contenter de ce qu'il y a de base dans WooCommerce. Sinon, on va passer un peu pour des nuls. Auprès des clients. Non, mais je pense qu'on peut le pousser un peu plus cet espace client. Ah, tu crois ça ? Oui. Et je pense qu'on peut rajouter des petites options. Je ne sais pas, peut-être... Il y a des petites idées ? Oui, j'ai des idées. Est-ce que vous avez des idées de ce que ça serait optimal pour vous ? Vous pouvez avoir une idée. Dans mon espace client, je veux quoi ? Est-ce que quelqu'un a une idée dans la salle ? Vous ou un espace client, je me connecte. Je devrais avoir quoi ? De base. Ah, facture, ça c'est bien ça. Justin commande dans la de base. Justin commande dans la de base. Ouais, pas mal ça. J'ai des livraisons. Oui, c'est bien. Support. J'ai un produit virtuel. Je vais vous poser un ticket. Il y a un bug dans le produit que j'ai acheté. Comment on fait ? D'autres suggestions ? Oui, repasser une commande. Il me semble que c'est de base dans commerce. Oui, gestion des avoirs, oui. Ouais, je ne sais même pas. Vous avez de bonnes propositions. Il y en a d'autres ? Tu vois, on l'a dit. Oui. Ouais, suggestion de produit, tout à fait. Wishlist, voilà. Oui, Wishlist, c'est important. Comme sur Amazon, quoi. Ou sur d'autres boutiques. Je n'ai pas bien entendu, en fait. J'ai juste entendu mon prénom. Donc en fait, on ne sait pas trop compliqué la vie. Nous, on est allés voir sur Amazon ce qu'il y avait. Oui, d'autres suggestions d'ailleurs. Ouais, il ne faut pas citer de marque pour ceux qui nous regardent. Bonjour à la caméra aussi. Bonjour au replay. Ouais, parce qu'il faut les saluer. Donc, on a dit des factures PDF. Ils sont bons, ils sont bons. Oui. Suivi de colis, ça a été dit. Ça ne marche plus. Retour produit à Sav. Ça serait un jeu, là. Il y en aurait qui gagne. Gérer mes moyens de paiement, ça peut être... Alors, je vais pas dire retour, je dirais mes moyens de paiement. Mais... Sur les gérer mes moyens de paiement, c'est que des fois on peut enregistrer sa carte bancaire pour repasser commande plusieurs fois. Donc ça peut être intéressant de pouvoir le gérer directement depuis son espace client. Si on peut le laisser traîner sur un e-commerce, par exemple. Il faut avoir confiance, mais oui. Gestion des paiements récurrents. Ça, c'est intéressant. Les gestions de paiement récurrents, si par exemple vous avez quelque chose qui doit retomber tous les ans, il faut repayer pour pouvoir continuer de profiter d'un service ou quelque chose... Un abonnement mensuel pour accéder à des choses. Et donc du coup, ça peut être quelque chose intéressant. Un abonnement, un service de streaming, et une association. Une association. Et on peut aller plus loin. Donc on n'a pas parlé de la liste de vos envies, la wishlist. Des avantages clients. Ça peut être excité, ça. Fournir un coupon de réduction à un client récurrent qui a déjà acheté pour 100 euros d'achat chez vous. Voilà. Elle voudrait compenser automatiquement. Par exemple. Il faut bien qu'il retrouve le coupon quelque part. Parce qu'un mail s'aspère. Il faut compter des coupons. Ou d'autres types d'avantages pour le coup. On peut tout imaginer. Il faut être créatif. Gestion de la communication. Oui. Par exemple, si on veut s'abonner une newsletter et qu'on veut s'y désabonner. Donc ça pourrait se trouver ici quand c'est géré. Ça c'est un peu la vision de l'espèce client-optimale qu'on a imaginée. Il y a sans doute deux fois plus de choses que l'on peut avoir là-dedans. On a essayé d'être un peu plus global. On a regardé sur des commerces connues. En gros, on a retrouvé ça. On a réfléchi aussi à ce qu'on voulait dans un espace client en 2016. Bien sûr. Alors là, on a un deuxième slide. C'est un espace client pour des membres. Il y a une nuance là-dessus. Parce que c'est un peu le sujet qu'on va creuser plus en amont maintenant. C'est finalement vous être client, mais aussi membre de quelque chose, membre d'un site. Et là, dans ce cas particulier, il y a d'autres services à proposer. Et vous, commerce, est adapté pour cela. Alors, l'accès à du contenu privatif. Donc par exemple, on le disait tout à l'heure, je veux acheter un accès pour consulter des vidéos qui seraient privées. Bien, c'est tout à fait possible avec un accès de contenu privé. Inscription des événements. Ben, par exemple, je veux m'inscrire au WorldCamp. Ben voilà, tout simplement. Donc, vous pourrez très bien le gérer dans un espace membre dédié. Et avoir acheté via vos commerces. Désertes, on pourra. Donc là, déjà c'est un petit peu encore plus particulier. Un peu plus particulier. C'est encore plus particulier dans un espace qui. On pourrait très bien dire, je veux m'inscrire sur le site et je paye pour pouvoir accéder ou avoir des offres de très haut niveau. Sinon, ça recrute à côté. Pour information, sous World Press, il y a des agences aujourd'hui. Des badges, encore plus particuliers. Voilà, on va passer à peu près. Le WorldCamp, ça pourrait se justifier. Cotisation, on l'a dit. Du monde associatif, tout à fait. Avec des paiements récurrents. Donc c'est ce qu'on disait aussi. Des clés de licence. C'est un petit peu plus particulier. Qui fait de la vente de produits virtuels dans la salle ? Et voilà. Est-ce que vous girez des clés de licence ? Non ? Oui. Donc dans vos commerces, on pourrait imaginer les gestions de clés de licence. Bon après, c'est peut-être pas forcément vos commerces le mieux. Des annonces ? Voilà, une communication informelle uniquement pour les clients. Vous n'avez pas à mettre ça sur votre site en gros partout si c'est que pour les clients. Donc une petite news. Oui, ça peut être intéressant. Dans le cas où j'ai besoin d'avoir des infos sur mon profil, qui soit vraiment typique. Je sais pas si on peut rentrer dans les... Du champ personnalisé qui remonte là-dedans, par exemple. ACF. Par exemple, si on retourne sur nos histoires de badge et compagnie, pour dire, j'ai assisté à tel WorldCamp, on pourrait très bien mettre ça dans son profil. Et le faire remonter dans son espacement. Et là, c'est un espacement avec de la notion de e-commerce. Voilà. Alors, la question. Comment on fait ça ? Comment qu'on soit ces fameuses espaces ? Bah voilà, vous dites, ah ouais, j'aimerais bien avoir suivi de colis, des factures, pour mon client, je veux le choisir, il me faut tout ça. Comment je fais ça ? Alors, on va essayer d'y répondre. Première étape. Faut coder. Faut coder le thème. Donc, nous, on recommande plutôt de pas partir sur des thèmes, genre, des choses comme ça, mais partir sur un thème sur mesure. Étant donné qu'on parle de quelque chose qui est sur mesure, avec des fonctionnalités avancées, c'est pareil logique de partir sur quelque chose de sur mesure, dès la base. Donc, on partira sur un thème qui a été créé sur mesure, donc quelque chose fait chez vous ou autre. Ensuite, on a, oui, donc après, ce qui se passe dans les plugins de type e-commerce, c'est que vous pouvez surcharger des templates de pages. Pour exemple, la template de pages de commande, c'est un fichier que vous pouvez aller surclasser. Donc, dans votre thème, vous pouvez embarquer un dossier qui s'appellera e-commerce et dans lequel vous pouvez surcharger et mettre les fichiers. Donc, ça veut dire par défaut, plutôt que de se baser sur les fichiers de e-commerce, ça devra s'appuyer sur les fichiers de votre thème. Ça, c'est intéressant. Ça vous permet de vraiment moduler complètement l'interface d'une page. Et après, c'est quoi un hook ? Je vais te poser la question. C'est quoi un hook ? Les hooks sont un moyen de venir se greffer avec des fonctions, sur d'autres fonctions dans un WordPress. Et donc, sans toucher au corps, sans toucher à l'extension ou au thème que vous auriez installé au préalable, ou justement à ces fichiers que vous serez venus surclasser. Donc, ce qui est intéressant, c'est de se dire, finalement, dans cette page, est-ce que j'ai vraiment besoin de surclasser tout ce qu'avait fait hook-commerce par défaut ? Est-ce que j'ai juste besoin de, je ne sais pas, déplacer un titre, déplacer quelque chose ? Et il y a peut-être un hook qui répond à cette fonction et qui pourra vous permettre de faire ce que vous voulez, sans avoir à toucher avec. Voilà. Donc, c'est les fameux add-action, remove-action, add-filter, etc. Hook-commerce est très friande de hook. Si je vous parcouris le dossier de template, on y reviendra à la fin de hook-commerce. Il y a des do-action un peu partout dans les modèles de template, dans un dossier template d'ailleurs. Donc, pour le panier, pour la page commande, etc., vous pouvez venir vous greffer dessus et injecter ce que vous avez besoin de mettre à tel endroit en particulier. Et la grosse avantage de ça, il y a une mise à jour de hook-commerce qui arrive, le hook devrait continuer à fonctionner correctement. Et donc, ça devrait toujours injecter le code au bon endroit. Si vous surclassez toujours avec la première méthode, avec des templates, des thèmes, donc dans des fichiers PHP, dans votre thème, il est possible que la structure est variée lors d'une mise à jour de hook-commerce et du coup, il doit falloir aussi mettre à jour ça. Les hooks sont plus faciles à maintenir. Mais les deux sont complémentaires. On ne peut pas faire la même chose entre les hooks et le surclassage de templates. Mais bon, on est sur un projet sur mesure, donc il faut toujours prévoir aussi de la maintenance derrière. Ça n'a pas marché par magie. Il commerce en plus. Maintenant, il commerce quand même. La base. Step 2. Maintenant pour remonter des flux d'information directement dans l'espace membre ou dans l'espace client. Donc, c'est vrai qu'on pourrait imaginer tout un tas de choses comme on l'a dit tout à l'heure. Et pour ça, on a déjà plein d'outils dans WordPress qui nous permet de faire tout ça. Donc, on pourrait utiliser la WP query tout simplement pour remonter des informations qui se réveillent. Je ne sais pas un custom post-type qu'on aurait créé pour gérer des alertes, par exemple, qui apparaîtraient dans l'espace membre. On a des extensions qui permettent aussi de faire des appels dans le shortcode. Ce n'est pas forcément le plus propre, mais c'est vrai que des fois, ça permet de faire ce qu'on veut sans trop mettre la main à la patte. Donc, on peut faire ça aussi. Shortcode, pour rappel, c'est les fameux raccourcis entre crochets que vous pouvez avoir dans votre éditeur classique d'éditeurs de contenu de WordPress pour injecter un formulaire, une galerie, ce genre de choses. Et au final, dans le code, il suffit de faire un bon vieux PHP de shortcode, le mot entre crochet on le met et ça va s'afficher. Évidemment, c'est toujours mieux si la documentation technique de l'extension propose les appels via des fonctions PHP en direct. Il vaut mieux le faire comme ça. Maintenant, une ligne de code avec un bout shortcode ça peut vous sauver l'avis, ça peut vous faciliter le développement aussi si vous n'êtes pas trop à l'aise avec PHP. Tout à fait. A savoir que certains shortcodes sont assez restreints dans les possibilités. Des fois, même si on a l'impression que le shortcode pourrait faire ce qu'on veut, il faudra peut-être mettre quand même passer par du code. On peut aussi récupérer des informations de profils utilisateurs. C'est ce que je disais tout à l'heure, par exemple, pour dire si je suis venu participer au WorldCamp pour avoir une rétrospective, ça pourrait avoir, je ne sais pas, tous les WorldCamp auxquels je suis allé. Donc ça, ça pourrait être un truc qu'on attache à l'utilisateur. Et ça se fait avec la fonction GetUserMeta par exemple. Donc après, pour vos clients, vous pourriez avoir, vu que les vos clients, ce sont vos utilisateurs dans le back-office de WordPress. Donc après, c'est assez facile d'aller rajouter un champ dans le profil utilisateur et de leur remonter dans ce fameux espace. Tout à fait. Et aussi, on peut faire appel à des API externes. Donc si vous avez des données qui utilisent un service autre, vous pourrez très bien le faire avec une API et vous connecter et afficher dans l'espacement. Et vous commerce, gère depuis un bon moment les API restes. Tout à fait. Donc on peut pousser de la donnée, récupérer. Donc il faut, ni commerce, il faut souvent le penser dans un ensemble, donc récupérer de la donnée, c'est la base. En fait, par rapport à ce que vous avez fait réagir tout à l'heure par rapport à ce qu'on pouvait faire dans l'espace client, mais en fait, le seul limite, c'est votre imagination parce qu'on peut vraiment tout faire. Le budget. Après, ça dépend dans quelle situation on est. Si on est vraiment développeur, ou si on a un client qui a un besoin spécifique. En API externe, on va typiquement avoir du suivi de colis qui va récupérer une info à distance. C'est un très bon exemple tout à fait. Etape 3. Test. Pour tester. Ça marche jamais. Faut vous dire ça. Alors comment on teste ? Alors, faire des tests unitaires, voilà, c'est quand même la méthode la plus évidente. Mais ce qu'il y a hyper important, et là c'est valable pour n'importe quel projet WordPress, c'est vous constituer un panel de testers. Alors un panel de testers faut vraiment le faire le plus varié possible. Des hommes, des femmes, des jeunes, des vieux, différents types de machines, des systèmes d'exploitation, de navigateurs. Il faut tactile, pas tactile. Tactile, pas tactile. Qui ont une bonne connexion internet, qui ont une connexion pas terrible. Est-ce que ma page va s'afficher suffisamment vite ? Est-ce que mon espace client, il n'est pas trop lent pour ceux qui ont un débit à desser le moyen ? Il y a vraiment beaucoup de choses, et je pense qu'il y a des outils pour s'aider pour savoir quel panel faire pour trouver des utilisateurs type. Sans doute. J'ai aimé l'idée. Et aussi, les fameux tests Asure-B à une partie de votre panel, vous pouvez lui présenter votre espace client conçu d'une telle manière, le présenter d'une seconde manière à une deuxième partie du panel pour poser des questions. Comment vous percevez les choses ? Vous vous refaites des exercices ? Essayez d'accéder au téléchargement de votre dernière facture. Et puis, vous regardez ce qu'ils font. Lui, il a mis 30 secondes, lui, il a mis une minute. Est-ce que cette personne n'a la bloqué ? Est-ce qu'elle n'a pas du tout compris ? Est-ce qu'elle est arrivée au bout ? Vous allez très vite prendre conscience que j'avais imaginé le chef de projet imaginé, le développeur et, au final, l'utilisateur, lui, il n'a peut-être rien compris ce que vous avez fait. L'expérience utilisateur, qui est essentielle puisque là, on est un espace client quand on s'adresse au plus proche du utilisateur, ne l'oubliez pas. En fait, vous n'aurez jamais la solution d'entrée de jeu, tant que vous n'aurez pas testé. On l'a eu dans tous nos projets. À chaque fois, on est arrivés à avoir des testeurs. Et là, on s'est dit qu'ils font comme ça. Donc, il faut repenser le truc. Les tests, essayez d'en faire le plus tôt possible dès qu'il y a une fonctionnalité qui fonctionne à peu près correctement, que ça tient à peu près la route, une version beta. Boom, un panel de testeurs. Et ensuite, on donne des outils pratiques pour nous aider dans ces tests, voir comment les gens réagissent, en leur donnant des exercices. Donc, un de les premiers outils dont on peut parler, c'est Inspeclet, qui est vraiment un très bon outil. Qui connaît Inspeclet ? Personne ne connaît Inspeclet. Je crois bien, si vous analysez la source du site. C'est un outil, c'est un petit script JavaScript. Donc, vous injectez soit dans votre back-office WordPress, n'importe où, qui en fait filme l'écran de l'utilisateur. Alors, c'est assez balèze. Parce que, du coup, vous voyez la souris qui te balade ou la personne a cliqué, les zones les plus chaudes où il y a eu le plus de contacts, le temps qu'il a mis, etc. Donc, voyez vraiment l'écran de l'utilisateur. Inspeclet. Donc, c'est un service en ligne qui est gratuit pour un certain nombre de cas de test. Donc, on peut en faire vraiment beaucoup. Et après, si vous voulez, après, il y a des off-payantes. Donc, ce service, on l'a utilisé dans nos propres projets et on s'est aperçu vraiment et notamment en front. Et en back, plutôt, on a fait des tests en back-office également. Comment se comporter de nos utilisateurs ces ultra-ultra-ultra-révelateurs ? Et ça vous dit, bien sûr, une navigateur qui est utilisée, la résolution. Quand vous faites des tests en responsive design, évidemment, ah, mince, ça passait pas bien. Le petit bouton était trop gros. On peut corriger. Et vous, chez vous, si vous avez, à moins d'avoir une armée de développeurs qui sont tous alignés, qui font les tests, c'est un peu, ils sont impossibles. Donc, rien de voletisateur final. Quand tu disais tout à l'heure, si tu prends que des développeurs, ce n'est pas non plus très intéressant. Ça permet de pas être derrière les gens, donc de vraiment les laisser faire leur exercice et de vraiment rien leur dire. Ça permet vraiment, en avant, de la certaine chose. C'est-à-dire, finalement, c'est peut-être pas si parlant que ça, mon option et de pouvoir... Il y a, genre, une spectlette, c'est un parmi tant d'autres, puisqu'il était sur WordPress.com, donc on l'avait récupéré, enfin, on l'avait testé. Mais il y en a plein d'autres alternatives plus ou moins efficaces qui font ce même genre de screen capture de façon puissante, quoi. Après, on a l'extension Upcast pour les navigateurs, qui pour texter l'accessibilité, c'est un référentiel assez connu en France, mais il fait aussi une batterie de test SEO, ergonomie, tout ça. Donc après, c'est toujours pareil, ce genre de test, un peu automatisé, ça vaut ce que ça vaut. Au moins, il y a des recommandations qui sortent et qui vous guide comment améliorer certaines parties de votre site. Donc, quand on pense à tous ces aspects-là, Upcast, c'est pas mal du tout. Alors, petite aparté, pour l'installer sur les navigateurs, notamment Firefox, il faut faire une petite manie, parce qu'il n'est pas une extension reconnue officiellement, machin et tout, donc il faut faire une petite autorisation spéciale, mais sinon, c'est hyper pratique, ça se loge en bas du navigateur, vous lancez le test sur une page, ça vous sort une note, un peu comme un YahuSlo, un Google PagePied pour les performances, donc eux, ils ont une batterie de test et notamment, c'est très pratique. Oui, puis de toute façon, je crois que tu as toute une liste aussi que tu peux récupérer pour pouvoir vérifier. Il y a un référentiel. Donc, voilà, il faut penser à tout votre tout votre panel de clients qu'il pourrait y avoir, donc l'accessibilité, ça compte. Il y a aussi des outils de développement du navigateur, tout simplement, pour débloquer. Voilà, donc le fameux F12 du navigateur, inspecter un élément sur une page, du debug console, etc. Voilà, ça permet de voir aussi le temps de chargement des pages, ça peut être intéressant pour de la performance, pour un petit peu améliorer ça. Donc comme tout projet web classique. Bon, là, on se redit un peu. Conseil d'utiliser user interface, user experience. Alors, soyez accessible, on l'a dit, pensez mobile. Donc, au niveau mondial, il y a plus de recherches sur mobile que sur desktop aujourd'hui, d'après Google. En France, ce n'est pas encore le cas, mais l'explosion, enfin maintenant, on ne se pose plus la question de dire, voilà, on fait du mobile, enfin, on y est, mais après, il faut bien le faire. Alors responsive design, c'est une des solutions web app, application mobile, enfin voilà. Mais en tout cas, quand on pense mobile, mettez-en le moins possible, évitez tout ce qui bouge dans tous les sens, ces animations, enfin, c'est des conseils de base, mais évidemment, dans un espace client, c'est une des solutions des meilleurs produits, voilà. Clairement, bouton identifiable. Respectez la charte graphique du site. Oui, parce que des fois, on voit des espaces clients qui, c'est vraiment les infos, elles sont posées comme ça, et ça n'a pas été du tout travaillé. Donc, c'est vraiment, en fait, c'est tout bête, il suffit de respecter un peu la charte graphique, les boutons, les tableaux, tout ça, et de mettre un peu en forme, justement, de mettre en avant que c'est quelque chose que vous avez travaillé, c'est comme si vous étiez entrés dans une boutique, la devanture est très belle, belles vitrines, les produits sont super bien présentés, et au moment de passer à la caisse, de faire la gestion de tout ça, c'est tout molle, c'est tout vilain, derrière le rideau, ils ont tout cassé. Donc, présentez bien les choses à tous les niveaux de votre site. Et notamment, dans les espaces clients, il y a beaucoup de messages d'erreur qui peuvent s'afficher. Donc ça aussi, il faut les charter, n'oubliez pas ça, ça, dans les tests normalement, ça remonte. Il y a un cas pratique. Je ne sais pas combien de temps il nous reste. J'adore. Garder. Garder, on a le temps. Donc, on a un cas pratique intéressant qu'on a réalisé sur un site qui s'appelle ACOcamp. Est-ce qu'il y a un ad qui font partie de cette association ACOcamp dans la salle ? C'est une association nationale de référenceur pour lequel on a en s'occupé de cette gestion de refonte d'espaces clients, et notamment juste pour les espacements. Donc, on va vous expliquer un peu ce qu'on s'est amézié sur ce projet. Page d'accueil. Donc, la page d'accueil du site ACOcamp avec une possibilité de se connecter dans notre cas tout en haut. Voilà. Donc, l'espacement n'est pas vraiment mis en avant, parce que dans notre cas, la page d'accueil, ce qui compte, c'est surtout de parcourir les événements et de voir un peu ce qui est les actualités et mettre le tour en avant. Mais c'est quelque chose qui est très travaillé. Donc, si vous cliquez sur les événements, vous avez la possibilité de vous y inscrire. Et donc, l'idée, c'est qu'une fois que vous êtes inscrit à un événement que vous avez payé, c'est que vous puissiez retrouver toutes ces informations quelque part. Notamment, à quel événement je suis venu, à quel événement est-ce que j'ai eu des badges. Dans leur cas, c'est de dire si vous venez à des événements, vous pouvez récolter des badges et avoir des certifications. En fait, pour résumer, il y a besoin de concevoir quelque chose pour que les membres se sentent vraiment chez eux et que l'ensemble des fonctionnalités offerts par le site et donc l'association de l'événement, de la news, du contenu privé tout ça dans leur espace avec de la notion de paiement de cotisation pour adhérer à l'association qu'on retrouve ici et là en fait, ou commerce derrière ces fiches-là et bien que ça soit géré dans ce fameux espace. Il y a des gens, c'est vraiment un truc de paiement récurrent et donc régulier c'est tous les ans, c'est ça, il faut en ouvrir. Ouais, voilà. Donc effectivement, là on a une vue de ce à quoi ressemble le compte d'un client. Donc on a fait quelque chose de relativement simple avec de la gestion par anglais, que vous pouvez voir ici et ça, ça repose exclusivement sur du développement ou commerce en fait. Donc toutes les informations qu'on va remonter donc abonnement pour gérer les cotisations. Donc voilà, on peut visualiser ici, vous retrouvez un peu les commandes comme on a vu dans le storefront tout au début. On va avoir la gestion du profit d'utilisateur avec des champs avancés par exemple. Je sais pas, on peut imaginer tout type d'information à demander. Gestion des commandes mais pas forcément que les abonnements, ça c'est différencier donc ça c'est purement cotisation à un assaut. Eventement donc voilà, comme tu disais Je vais m'inscrire à l'événement de l'association qui est réunie et je sais pas. Payer l'événement aussi, c'est tout ici que ça se trouve. Parce qu'on ne faut pas oublier que là on parle d'adhésion sur un site d'assaut mais il y avait des événements qui pouvaient être payants donc vous commerce peut faire de la gestion d'événement payant avec de la génération de ticket derrière et d'enregistrement de badge et donc on s'était dit, c'est bien que vous êtes allé à cet événement ça remonte parce que vous avez payé donc il faut aller chercher la commande techniquement, comment ça se passe ? En fait on a une vp query derrière qui va chercher les inscriptions aux événements et qui permet donc avec un croisement sur le l'utilisateur actuellement connecté de remonter les événements qu'il s'est inscrit et auquel il a payé aussi surtout. Et oui, il y aura des gratuits. Gestion de badge, donc ça on l'a déjà évoqué ça c'est vous reliez directement sur le profit de l'utilisateur donc comme on disait tout à l'heure l'idée c'est qu'on puisse dire qu'à tel ou tel événement on puisse apparaître et aussi c'est pour un peu garantifier les personnes quand elle investisse. Ça leur permet de dire vous n'avez pas tous les badges, vous pouvez avoir d'autres badges en vous investissant un petit peu plus et donc ici ça permet de voir les badges qu'on a obtenues et donc ça c'est purement connecté à la profil-utilisateur. Voilà, alors ce qui est intéressant c'est pour faire appareil avec une boutique e-commerce typiquement où tout le système de récompenses de l'utilisateur voilà il a acheté pour un certain montant il a acheté pendant les sols les périodes de Noël vous avez fait une espèce de classement des meilleurs clients là vous essayez de le gratifier ça c'est purement après dans votre stratégie auprès de votre clientèle et vous pouvez le développer avec ce genre d'informations, de remonter d'infos dans votre espace client voilà après il faut faire un beau design et voilà quoi les alertes emplois donc eux ils ont une particularité aussi c'est que sur le site on peut trouver des enfres d'emplois en rapport avec le SEO et donc on peut se paramétrer des alertes emplois si on surveille quelque chose par exemple si on cherche un emploi mon clé WordPress et on peut leur demander d'avoir une fréquence pour recevoir des alertes sur les nouveaux postes d'emplois qui seraient postés dans le module d'offres d'emplois donc ça c'est aussi quelque chose qu'on retrouve ici donc je peux gérer les alertes je me suis inscrit j'ai paramétré 3 alertes je peux en supprimer, les modifier tout se passe ici donc là finalement on remonte de l'information qui n'a rien à voir avec du e-commerce mais qui peut être mixé à l'intérieur de cet espace donc il faut vraiment se dire finalement j'ai un projet il va y avoir de la gestion de paiement je vais avoir quelques petites fiches produits qui sont des produits soit physiques soit virtuels soit téléchargeables ou commerce il est là derrière il faut aussi la gestion de client login mode pass aussi on l'a même pas évoqué mais de base il y aura une page de connexion, une page panier, une page commande ce que vous connaissez bien sur vos commerces puisque beaucoup d'entre vous ici l'ont déjà utilisé et bien finalement utilisons cette outil de base et venons s'y greffer dessus et développer notre propre outil à notre source pour ce projet on a utilisé pas mal d'extensions qu'on va vous révéler puisque comme on l'a dit c'est qu'il y a tout un écosystème qui est propre à l'univers vous commerce et pour faire tout ça il faut aller piocher à droite à gauche donc évidemment on a utilisé vous commerce c'est encryption pour la gestion d'abonnement récurrent donc ça peut être sur une base mensuelle hebdomadaire annuelle donc là c'était pour les adhésions donc tous les ans ça dit au membre vous devez payer pour continuer à faire partie de l'assaut membership pour la gestion d'avancer des membres tout simplement surtout de contenu privatif vous avez une catégorie d'article ou un custom post type l'accès à ce contenu c'est uniquement pour ceux qui ont payé avec membership vous pouvez gérer ça très facilement ça peut être aussi avec des groupes d'utilisateurs donc là imaginez vous avez un e-commerce avec les clients VIP les clients VIP peut-être qu'ils ont accès à un ensemble de produits sur votre site donc si ils sont VIP ils sont instants VIP ils ont accès mais les autres ils sont pas VIP donc ça peut être ce genre de choses zee event calendar c'est une extension qui permet de gérer des agendas et plus particulièrement dans notre cas les événements ça fait des fiches événements très avancées dans lesquels on peut ajouter une carte de géocalisation en fait zee event calendar dans la gestion d'événements il ressort très vite dans les moteurs de recherche et son principal avantage il va être d'avoir un ensemble d'addon qui vont fonctionner notamment avec des passerelles de PMA donc dont du e-commerce avec de la génération de tickets avec QR code etc donc ils ont pas mal évolué c'est encore perfectible mais c'est une bonne solution et notamment il y a des fiches produits tout simplement et nous on l'a utilisé c'est ça pour se relier à des produits l'achat et puis on parlait tout à l'heure dans le développement du thème d'utiliser des hooks et le fameux dossier template de e-commerce pour venir surclasser dans votre propre thème et en fait le gros avantage d'event calendar il fonctionne pareil donc dans event calendar toutes les vues single product, archive product etc peuvent être surclassées dans votre propre thème donc si vous avez un gabarit spécifique à développer vous pouvez avec grande facilité dupliquer le fichier, mettez-le dans votre thème et vous surclasser et donc quand le plugin est mis à jour ça continue à conserver votre gabarit donc c'est très proche de e-commerce dans le fonctionnement ticket plus c'est un adon pour gérer des tickets je crois qu'il fait le pendant entre event calendar et les subscriptions c'est possible vp job manager et un paquet d'extensions qui vont avec qui est un plugin développé à la base par des gens de chez wootem et qui du coup est dans l'escarcel d'automatique et job manager gère des off d'emploi et donc typiquement vous pourrez avoir des recruteurs que vous faites payer pour publier des off d'emploi sur votre site et donc forcément qui dit payer e-commerce c'est la fraction qu'on peut avoir la facturation, on y revient on en a parlé tout à l'heure effectivement la facturation PDF qui permet d'attacher dans les emails de notification directement un PDF de facture et donc que vous pouvez moduler très facilement donc il utilise le même système que vous commerce on peut récupérer un mode de template le mettre directement dans son thème et donc ça permet de personnaliser la facture donc à chaque fois il faut toujours customiser tout évidemment vous n'allez pas livrer brutes une facture que votre voisin a déjà parce qu'il a mis le plugin brutes de fonderies donc voilà ça peut les laisser Stripe en passerelle de paiement qui connaît Stripe qui l'utilise un peu moins donc Stripe en fait c'est une passerelle de paiement qui est très puissante qui permet de prendre les cartes bleues sur votre site il faut installer un certificat SSL sur votre serveur mais le gros avantage de Stripe c'est qu'il a des commissions pas très élevées et il est très ergonomique après bien sûr il y a tout un tas de solutions d'autres passerelles compatibles au commerce donc là c'était pour ce projet on a fait le choix de Stripe ouais plugin un peu hors sujet mais pour le citer quand même Security Audit Log qui en fait permet dans votre back office de logger toutes les interactions qui se passent donc ça c'est pas mal pour faire un peu de suivi qui se connecte bon la citer là pour à but informatif c'est un bon plugin gratuit de base pour vérifier un peu ce qui s'est passé sur votre site c'est bien ACF on le sent ? non pas vraiment ADVANCE KISTOPHILD qui connaît ADVANCE KISTOPHILD ? qui connaît pas ACF bon ben on passe donc ACF bien évidemment vous mettez du champ et bien sûr ça remonte vous le remontez dans vous commerce pour les badges pour les profitisateurs alors les hooks on a parlé des hooks pour surclasser pour modifier dans vos thèmes et dans les plugins aussi désactiver la site bar de vous commerce désactiver les produits relatifs qui se mettent en bas de votre fiche produit généralement dans vous commerce de base il y a plein de choses qu'on dégage c'est pénible et après on ajoute quand on les veut donc là on en a quelques-uns voilà ou c'est qu'on vient interagir donc avant le contenu après la site bar le résumé produit il y en a une pas lancée on a bien fait 300 lignes de code pour virer des choses mais ça marche donc là j'en parlais tout à l'heure c'est cette histoire de surclasser le template de par défaut donc ici on a notre thème sur mesure ici au camp et dans lequel je suis venu ajouter un dossier ou commerce les templates qui nous intéressaient à surclasser on retrouve bien Mayakon toutes ces choses là qui permettent de modifier l'espace client et donc après on a tout ce qu'on dise aussi donc les PDF, les cartes, les e-mails on va assez loin oui on va très loin d'ailleurs à partir de là comme vous avez le fichier dans votre thème faites vraiment ce que vous voulez vous avez plus de limites vous reprenez vous modulez non limites alors un petit aid de mémoire de l'ensemble des technologies qu'on a utilisés dans le projet que vous pourriez être amenés à réutiliser de votre côté les custom post types type de contenu personnalisé en français donc on avait évidemment ou commerce qui créait les produits l'event calendar il ajoute les événements après on peut avoir des offres d'emploi après on peut avoir tout ce que vous créez vous donc ça c'est assez basique et utilisé sous WordPress qui va de pair avec les custom taxonomies voilà des champs personnalisés soit en manuel soit via ACF si on met une interface Twitter boostrap pour le responsive design c'était les petits ongles tout à l'heure qu'on voyait notamment mais pour l'ensemble du site nous on aime bien utiliser ce framework les vp query donc pour faire des requêtes sur du contenu personnalisé la gestion hdpi donc c'est pour les écrans de type qui gère le retina dans ces projets dans la salle c'est bien donc c'est assez folklorique la gestion du retina quand on veut bien faire attention on peut avoir des surprises mais aujourd'hui c'est incontournable AOS c'est retina donc faut pas oublier ça pas dire que c'est un petit gadget 1% dédiateur dans le monde dont un mac ou je ne sais pas trop quoi AOS c'est populaire quand même mais c'est retina donc le petit logo qui floue sur le site c'est un peu bête quoi surtout sur iCommerce donc attention les langages est-ce que c'est vraiment utile de les citer les hooks les hooks donc comme on disait tout à l'heure et puis PO edit pour les traductions puisque c'est un site oui parce que bon faut préciser une chose dans tout le boulot des extensions ajoutées, surclacées, remodulées faits à la main aussi et bien ce genre d'extension là où commerce c'est potentiellement plusieurs jours de trad traducteurs de vent qui soisent de quoi on parle donc ça comptez-le surtout alors le petit citation pour la fin les clients ne peuvent pas toujours vous dire ce qu'ils veulent mais ils sont toujours capables d'exprimer ce qui ne va pas eh oui comme on parlait tout à l'heure avec les tests alors c'est Carly Fiorina vous lâchez pas si vous la connaissez XPDG de qui avait sorti cette citation un jour donc vous pouvez passer un bon moment sur votre projet faire tous les tests tout le monde est content et puis vous allez tourner le site, mettre en prod et là d'un coup on va vous tomber dessus on va vous dire que ça ça va pas et là il faut vous écouter vos clients vous avez pas le choix sinon vous vente vous les ferez pas donc c'est tout donc n'oubliez jamais vos clients écoutez les clients ou utilisateurs d'ailleurs merci surcharger le thème vous commerce c'est toujours très bien très pratique mais dernièrement avec les dernières mises à jour ça devient un petit peu laborieux pour ajuster les thèmes est-ce que vous avez une bonne pratique, une solution, une idée à part faire du ligne par ligne les deux il y a dans vous commerce dans le back office un onglet qui permet de dire qui scanne le thème et qui dit attention ça depuis la telle version c'est déprécié vous devriez modifier cette fonction donc il scanne les fichiers dépréciés en fait il vous l'indique donc ça c'est déjà une première aide après c'est aussi faire des tests et voir est-ce que ça continue à bien fonctionner en ce moment-là vous pouvez essayer de tourner mais il le dit, il y a une aide dans le back office dans un onglet qui déjà scanne un petit peu après on peut avoir la rétro compatibilité souvent presque en général elle est bien assurée mais sous vous commerce c'est un point justement sur WordPress sur vous commerce c'est un peu plus douloureux surtout si c'est un thème premium qui avait fait 300 fichiers de tempest en plus sur pour surclasser mais même quand on le vifille nous quand on fait pas mal de changements c'est un peu mieux si on peut le faire mais c'est pas toujours possible merci j'ai une petite question à propos de l'outil inspectlet est-ce que ils tractent tous les types d'écran surtout tous les mobiles et puis le rapport généré c'est par rapport à chaque type d'écran ou ça se passe comment il prend en charge tout ça et en fait c'est un ensemble de sessions qui sont enregistrées par jour après il suffit de cliquer sur la session de son choix et là il y a la vidéo qui se déclenche et on voit ce que l'utilisateur a fait voilà pour compléter on a aussi le détail de son navigateur on peut savoir ça au niveau de la vue des sessions je pense qu'on peut le filtrer pour certainement merci pour la conférence j'ai une cliente une événementielle et puis il souhaite louer du matériel d'itables est-ce qu'au commerce propose un système de devis oui il me semble qu'il y a une extension qui permet de le faire donc c'est tout à fait possible de compléter je connais pas le nom de l'extension oui il y a ça il faut taper le nom en anglais mais il y avait une extension on avait eu le cas d'une demande client qui voulait remonter dans un espace client et le store était géré vous commerce derrière il y a une extension pour ça c'est vous commerce quote il faut chercher dans google mais il y en avait une mais c'est des choses assez classiques et aussi la génération de bonnes commandes ça s'envisage je n'ai pas entendu le paiement d'account on a eu cette demande je crois ça peut s'imaginer ça ça peut s'imaginer je pense après j'ai pas d'extension il y en a une il y en a une officielle merci bonjour merci pour cette énergie que vous nous donnez ce samedi matin c'est super j'ai un client qui travaille pour des supermarchés et donc chaque enseigne référence les produits ce que clients voudraient sous commerce en back office ils ont le supermarché voient sa commande et puis ils lui proposaient des produits qui ne sont pas référencés comme ils sont pas référencés ils n'ont pas encore un prix pour ce client vraisemblable je pense que c'est un peu spécifique il faudrait voir un peu plus en détail mais ça me paraît tout à fait possible si ils ont un outil inAPI quelque chose pour se greffer avec ce client je pense pas qu'il y ait de blocage on peut se voir après bonjour j'ai une question plus générale sur vous commerce c'est la gestion du multilingue combiné à la gestion du multi devise est-ce que ça se fait il faut fuir qu'est-ce que vous en pensez la traditionnelle question du multilingue plusieurs approches multi-site sans oublier sous vous commerce plug-in polylang vpml pour les langues il paraît que si on modifie avec quelques filtres ça marche bien voilà, il paraît que ça marche vpml ils ont une adonne pour ça mais comme c'est vpml personnellement on n'aime pas donc multi devise ça gère sous vous commerce maintenant après multilingue pour les langues on customise un peu le truc mais c'est pas si simple pas si simple salut multi-site ou commerce ça marche pas on m'a dit que multi-site avec ou commerce déjà attention de source interne et après oui éventuellement tu fais pas une activation réseau mais tu active site par site pour bien créer les tables mais on m'a dit ils ont pas trop testé en interne j'ai testé ça marche bien alors il a testé s'il le dit faites-le confiance bonjour Charles c'est pas une question c'est juste pour apporter une petite information supplémentaire sur les tests en amont avant même d'avoir des clients avant même de le mettre en prod j'utilise un outil très performant qui s'appelle browser stack c'est pas forcément connu mais c'est utilisé par des devs sur des fonctions très avancées comme par du grand public ça peut être testé sur plus de 700 des exploitations et navigateurs existants périphériques mobiles, tablettes et tout ça et qui est vraiment très performant et en termes de simulation c'est quasi à l'identique de l'afficher sur son écran iPhone et de tester tous les OS possibles d'une imagineuse enfin voilà je recommande browser stack vraiment ok super bonjour merci pour la conférence je voulais savoir avec le rachat par automatique est-ce qu'on aurait un risque que le plugin devienne payant non je ne pose pas chez eux mais non c'est le modèle premium qui leur fait la popularité les 30% c'est parce que c'est gratuit à la base sur tout ça et après c'est l'écosystème qui peut être payant ou gratuit et les services autour ça reste la philosophie wordpress de toute manière pas de crainte fonce bonjour merci pour la conférence j'ai une petite question sur les plugins que vous avez utilisés est-ce que vous avez été confronté par moments à des difficultés sur l'intégration c'est à dire si votre client vous a donné une maquette un PSD est-ce que vous avez eu du mal à faire rentrer le PSD avec les plugins que vous utilisez qui utilisait une structure html particulière qui était parfois compliquée à des registres des scripts oui mais voilà oui mais on y arrive après c'est du templateing c'est comme crainte un wordpress il y a toujours des difficultés merci beaucoup