septembre 2022

WooCommerce – configurations avancées (partie 3)

Intro Cet article fait suite aux articles : https://reactor.fr/un-site-e-commerce-en-moins-dune-heure  https://reactor.fr/woocommerce-configurations-avancees https://reactor.fr/woocommerce-configurations-avancees-partie-2/ J’ai reussi à couvrir 99% de mes besoins. Un utilisateur peut s’acheter une licence de jeu OutQuest. Le souci, c’est qu’il doit copier une clé de licence sur mon appli. J’aimerais un lien qui lui permette de ne pas le faire. Vu que mon app mobile est un site web, il devrait être simple de rediriger l’utilisateur vers mon site en cliquant sur cette clé de license. (ou un lien que j’aurais fait). Sauf que ca ne se fait pas par défaut. Les concepteurs du plugins me l’ont confirmé, ce n’est pas une fonctionnalité, ça le sera peut être un jour, inchallah. Autre besoin, même si j’ai cet email, ou que l’utilisateur saisie manuellement cette clé de licence sur mon app, comment je vérifie celle ci ? C’est l’objet de ce post. API Licences Manager for Woo Commerce Donc l’idée c’est de faire une requête depuis mon app (ou depuis n’importe où finalement) vers mon site web de e-commerce qui gère ces clés de licences. Le plugin précédément installé qui gère ces licences a justement une gestion par une API de ces clés. Dans les réglages de WooCommerces, Onglet « Gestion de licences » en base de page, on a la possibilité de gérer individuellement chaque endpoint de l’API. Le lien de la documentation est celui ci https://www.licensemanager.at/documentation/rest-api/#api-keys La première chose que l’on nous demande c’est de passer nos liens en permaliens. Dans un précédent article nous avons déjà fait cette manipulation et d’ailleurs je ne souvenais plus pourquoi je devais le faire… ba c’est pour l’API de gestion de licences. Ensuite il nous faut générer une clé d’API que l’on utilisera dans chacune de nos requêtes. Pensez à stocker ces clés car elles ne vous seront plus accessible par la suite. Ca y est notre API est prête ! L’API lmfwc (Licence Manager for Woo Commerce) est situé dans ce path par defaut : https://shop.outquest.fr/wp-json/lmfwc/ Si vous ne faites pas la modification des permaliens vous aurez une 404. Ensuite il faut rajouter la route de l’api que l’on souhaite, par exemple https://shop.outquest.fr/wp-json/lmfwc/v2/licenses/sdf Qui demande la clé « sdf » (qui n’existe pas). J’ai cette réponse 401 Unauthorized : { « code »: « lmfwc_rest_authentication_error », « message »: « Clé client ou secrète manquante. », « data »: { « status »: 401 } } J’utilise une extension Visual Studio Thunder Client (c’est comme Postman) qui me permet de faire des requêtes sur mesure. Il faut paramétrer une authorisation « Basic » avec username = clé client et password = clé secrète. En relancant la requête on obtient ceci : { « code »: « lmfwc_rest_data_error », « message »: « License Key: sdf could not be found. », « data »: { « status »: 404 } } On nous indique une 404 car la clé de licence « sdf » n’existe pas. Essayons maintenant avec une vraie clé : https://shop.outquest.fr/wp-json/lmfwc/v2/licenses/LBL-JVP { « success »: true, « data »: { « id »: 1, « orderId »: 40, « productId »: 29, « userId »: 1, « licenseKey »: « LBL-JVP », « expiresAt »: null, « validFor »: 0, « source »: 1, « status »: 2, « timesActivated »: null, « timesActivatedMax »: 0, « createdAt »: « 2022-09-30 16:00:10 », « createdBy »: 1, « updatedAt »: « 2022-09-30 16:00:10 », « updatedBy »: 1 } } Bingo on obtient nos informations de licence ! L’api lmfwc dispose de 3 autres endpoints en get : licenses/validate/ licenses/activate/ licenses/deactivate/ La première vous donne ce type de réponse : { « success »: true, « data »: { « timesActivated »: 0, « timesActivatedMax »: 0, « remainingActivations »: 0 } } En faisant une requete avec licenses/activate { « success »: true, « data »: { « id »: 1, « orderId »: 40, « productId »: 29, « userId »: 1, « licenseKey »: « LBL-JVP », « expiresAt »: null, « validFor »: 0, « source »: 1, « status »: 2, « timesActivated »: 1, « timesActivatedMax »: 0, « createdAt »: « 2022-09-30 16:00:10 », « createdBy »: 1, « updatedAt »: « 2022-10-10 13:04:29 », « updatedBy »: 1 } } puis en refaisant licenses/validate on obtient : { « success »: true, « data »: { « timesActivated »: 1, « timesActivatedMax »: 0, « remainingActivations »: -1 } } Notez qu’on a eu +1 sur timesActivated. Cela permettra de voir si la licence est utilisé plusieurs fois et éventuellement travailler sur de l’anti fraude. en utilisant licenses/deactivate on fait l’opération inverse. API Woo Commerce On vient de voir comment valider une licence. Le souci c’est qu’à ce stade, je n’ai qu’un numéro orderId et un productId. Je pourrais me démerder avec cela si je rentre en dur, coté application les références produits. Seulement si un jour je change de produit ca ne fonctionnera plus. Comment faire ? Il faut requêter l’API Woo Commerce, tout simplement. De la même manière on va devoir générer des clés d’API dans l’onglet « avancé » des réglages de Woo Commerce. Notre requête devra aussi avoir une authorisation basique avec ces clés. Le path api est wp-json/wc/ Voici une requête pour obtenir des informations sur la commande 40 :https://shop.outquest.fr/wp-json/wc/v2/orders/40 { « id »: 40, « parent_id »: 0, « status »: « completed », « currency »: « EUR », « version »: « 6.9.4 », « prices_include_tax »: true, « date_created »: « 2022-09-30T18:00:07 », « date_modified »: « 2022-09-30T18:00:10 », « discount_total »: « 0.00 », « discount_tax »: « 0.00 », « shipping_total »: « 0.00 », « shipping_tax »: « 0.00 », « cart_tax »: « 0.17 », « total »: « 1.00 », « total_tax »: « 0.17 », « customer_id »: 1, « order_key »: « wc_order_Px8132TVZef0E », « billing »: { « first_name »: « Yann », « last_name »: « Vasseur », « company »: «  », « address_1 »: « 2 la en face », « address_2 »: «  », « city »: « Partis », « state »: «  », « postcode »: « 35580 », « country »: « FR », « email »: « xxxxxxx@yahoo.fr », « phone »: « 06 66 66 6 6 6 » }, « shipping »: { « first_name »: «  », « last_name »: «  », « company »: «  », « address_1 »: «  », « address_2 »: «  », « city »: «  », « state »: «  », « postcode »: «  », « country »: «  », « phone »: «  » }, « payment_method »: « woocommerce_payments », « payment_method_title »: « Carte de crédit/carte de débit », « transaction_id »: « pi_3LnldEFq94z7RR2d10UTj3Te », « customer_ip_address »: « 79.95.127.132 », « customer_user_agent »: « Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36 », « created_via »: « checkout », « customer_note »: «  », « date_completed »: « 2022-09-30T18:00:10 », « date_paid »: « 2022-09-30T18:00:10 », « cart_hash »: « 7c45d164e8db4f049f791a4cb6bfeded », « number »: « 40 », « meta_data »: [ { « id »: 645, « key »: « is_vat_exempt », « value »: « no » }, { « id »: 646, « key »: « _payment_method_id », « value »: « pm_1LnldCFq94z7RR2dn0VFdrDP » }, { « id »: 647, « key »: « _stripe_customer_id », « value »: « cus_MWiJXN4eXAa94X » }, { « id »: 648, « key »: « _wcpay_mode », « value »: « test » }, { « id »: 649, « key »: « _intent_id », « value »: « pi_3LnldEFq94z7RR2d10UTj3Te » }, { « id »: 650, « key »: « _charge_id », « value »: « ch_3LnldEFq94z7RR2d1CxGKYWX » }, { « id »: 651, « key »: « _intention_status », « value »: « succeeded » }, { « id »: 652, « key »: « _wcpay_intent_currency », « value »: « EUR » }, { « id »: 662, « key »: « lmfwc_order_complete », « value »: « 1 » }, { « id »: 663, « key »: « _wcpdf_invoice_settings », « value »: { « display_shipping_address »: «  », « display_customer_notes »: « 1 », « display_date »: « order_date », « header_logo »: « 19 », « header_logo_height »: «  », « shop_name »: { « default »: « Outquest » }, « shop_address »: { « default »: « 2 la basrn35580 Paris » }, « footer »: { « default »: «  » }, « extra_1 »: { « default »: «  » }, « extra_2 »: { « default »: «  » }, « extra_3 »:…

WooCommerce – configurations avancées (partie 2)

Intro Cet article fait suite à l’article https://reactor.fr/un-site-e-commerce-en-moins-dune-heure qui est une introduction à Woo Commerce et à son installation. On part donc avec un site WordPress qui a un plugin WooCommerce, un plugin WooCommerce Payments et un theme Virtue. Cet article fait aussi suite à celui la https://reactor.fr/woocommerce-configurations-avancees et je rappelle les besoins : Cet article va traiter des spécifications dont j’ai besoin pour mon site Ouquest. Je souhaite : permettre l’achat d’un jeu part Carte Bancaire / Paypal (fait dans le précédent article) envoyer une facture automatiquement après achat envoyer une clé de license permettant de jouer à un jeu Outquest forcer la quantité à 1 (on achète 1 licence pour 1 jeu)  (fait dans le précédent article) permettre de mettre en place des produits « Bientôt disponible » visible mais pas achetable.  (fait dans le précédent article) Facture PDF Je voudrais envoyer une facture automatiquement au client. J’utilise le plugin suivant :  WooCommerce PDF Invoices & Packing Slips Une fois installé et activé, j’ai changé qq settings, comme l’ajout d’un logo, le nom et l’adresse de la boutique. Ya un assistant qui vous aide.  J’ai choisi d’ajouter un PDF facture à chaque mail concernant une nouvelle commande Et voila, lorsqu’une commande est effectué, l’utilisateur reçois un email comme d’habitude, mais avec un PDF de facture en plus. C’est plus pro ! Clé de licence Le but de ce site e-commerce c’est de permettre l’achat d’un jeu sur OutQuest qui est réalisé via une app mobile.  Il faut donc pouvoir vérifier que l’achat effectué permet de jouer ou pas.  Pour cela j’utilise un autre plugin qui permet de gérer des licences. Comme un jeu vidéo !  Ce plugin c’est License Manager for WooCommerce  Une fois activé on peut se rendre dans les réglages de WooCommerce qui propose un nouvel onglet « Gestion de licences ». J’ai juste coché la case  Une clé de licence peut prendre plusieurs forme, souvent on voit une suite de lettres et de chiffres espacé de tiret comme ceci JHDS-OZINB-5DDF-97SF Pour faire cela, on va utiliser un générateur de clé, dans le menu WooCommerce – Générateurs. On en ajoute un : Je veux une clé facile à retenir pour pouvoir la mémoriser et l’écrire ensuite sur une app par exemple.  Mon format c’est XXX-XXX donc 3 lettres, tiret, 3 lettres. Ca représente 26 ^6 soit plus de 300 millions de combinaisons. Large, je suis pas Ubisoft. La carte des caractères c’est l’ensemble des caractères possible que vous souhaitez voir dans cette clé de licence. J’y ai mis que des lettres. C’est simple et surtout ça évite les confusions de type O 0, I 1, etc…  On enregistre. Et normalement c’est tout bon.  Par default, la livraison d’une commande se fait sur un état terminé. Ca nous servira plus tard.  Automatiquement, à l’installation du plugin, ça doit rajouter une ligne dans Email de WooCommerce ce qui va nous permettre de joindre la clé de licence directement dans l’email de confirmation de commande. (commande terminée) Il faut modifier notre produit pour qu’il gère une clé de licence. Un nouvel onglet est disponible.  Il faut cocher « Vendre des clés de licence pour ce produit ». Quantité 1.  Générer des clés de licence avec le générateur que l’on vient de paramétrer. Maintenant si on passe une commande, on verra une nouvelle ligne dans le résumé de la commande et aussi dans l’email de confirmation de commande. Page web Email : Problème des produits Virtuels et Téléchargeables. Je ne voulais pas parler de cette option avant pour éviter toute confusion. Mais maintenant cela a son importance.  Lorsque vous créer un produit, vous avez la possibilité de le déclarer Virtuel et/ou Téléchargeable.  Dans mes précédentes commande, j’ai un produit qui a les deux : Pourquoi ?  Car en faisant cela, lorsqu’un utilisateur finalise sa commande, le statut de la commande passe à « Terminé ». Et rappellez vous, le plugin ajoute la licence dans l’email sur ce statut.  Or si on ne coche pas « Téléchargeable », la commande de ce produit sera « en cours »  Et donc la license ne sera pas incluse ! Moi je coche la case Téléchargeable car pour moi c’est une commande terminé.  Mais l’autre option c’est de rajouter un statut « En cours » dans les settings de la licence (non testé)

WooCommerce – configurations avancées

Cet article fait suite à celui la https://reactor.fr/un-site-e-commerce-en-moins-dune-heure qui est une introduction à Woo Commerce et à son installation. On part donc avec un site WordPress qui a un plugin WooCommerce, un plugin WooCommerce Payments et un theme Virtue. Cet article va traiter des spécifications dont j’ai besoin pour mon site Ouquest. Je souhaite : permettre l’achat d’un jeu part Carte Bancaire / Paypal envoyer une facture automatiquement après achat envoyer une clé de license permettant de jouer à un jeu Outquest forcer la quantité à 1 (on achète 1 licence pour 1 jeu) permettre de mettre en place des produits « Bientôt disponible » visible mais pas achetable. Processus d’achat A ce stade, comment se passe le processus d’achat pour l’utilisateur ? Pour le moment la page d’accueil liste un ensemble de produit disponible à la vente. Chaque produit dispose de sa propre page détail.  L’utilisateur est invité à cliquer sur « Ajouter au Panier » ce qui permet, comme indiqué de rajouter le produit dans le panier.  Me concernant, les joueurs ne feront qu’un seul achat, donc je voudrais directement rediriger l’utilisateur vers la page « Validation de Panier », celle ci : Pour rediriger l’utilisateur directement vers la page panier après achat, il faut cocher la case suivante dans la section Produit des réglages de WooCommerce. J’aimerais aussi ne pas afficher le selecteur de quantité pour cela, il faut se rendre dans la page configuration du produit, données produit, Inventaire et cocher la case suivante : Payments Mode Test Avant toute chose, on va démarrer en mode « Test » pour rendre fictif le paiement. Cela permettra de valider le processus avec une carte banquaire bidon. Pour cela, rendez vous dans les réglages de WooCommerce section Paiements et cocher la case ci dessous. Lorsque l’utilisateur valide son panier il arrive sur une page qui lui demande ses informations personnelles nécéssaires pour editer une facture avec les éléments obligatoires légaux.  Ensuite la page résume la liste des produits du panier, affiche la TVA et le total. Si tous les champs sont corrects, au clic sur le bouton commander, l’utilisateur est rediriger vers une page validation de commande avec toutes les informations concernant son achat. De plus un email est automatiquement expédié à l’utilisateur lui validant sa commande. Un autre email est expédié à l’adresse email de l’administrateur de WooCommerce lui indiquant qu’une commande vient d’être effectuée. TVA Vous avez peut etre remarqué une erreur dans le screenshot ci dessus, la TVA est à 0%. C’est pas normal. (enfin ça se discute hein ! ) La solution pour cela est d’activer l’option des taxes automatiques dans les options de TVA dans les réglages de WooCommerce. Le problème (dans mon cas) c’est que ca bloque l’edition des tarifs TTC, on est obligé de saisir les tarrifs en HT.  Cependant, le fait de mettre cette option, puis de l’enlever (remise à default) à débloquer ce pb de TVA à 0%. Note :  J’ai travaillé sur 2 sites WooCommerce, un pour faire mes tests et un autre pour ma prod. Je rédige cet article en mettant en place la production (shop.outquest.fr) progressivement. Et je m’appercois que je n’ai pas les memes comportements vis à vis de cette TVA. (j’ai mis a jour depuis sur une version WooCommerce, c’est peut être lié) Ce que j’ai fait dans le didactel c’est d’abord constuire mes produits, puis changer ma méthode d’application de la TVA (HT à TTC) ensuite. Or, on a ce petit encart qui nous informe que cela n’impactera pas les produits existants.  Dans les faits, ça change rien. J’ai testé sur un « ancien » produit et un produit que j’ai fait apres ces changements. La ou ca change c’est au moment de faire les calculs, sur la page panier par exemple. (un produit anciennement à 1€ HT à qui faut rajouter 0.20€ de TVA devient un produit à 1€ TTC qui comprends la TVA) Donc pour un produit vendu 1€ TTC, j’ai un produit HT à 0.83€ (et pas 0.80€) et donc une TVA à 0.17€. (20% de 0.83€) C’est un « calcul à l’envers » qui est « bizarre » si on essai de calculer sur cette page les taxes. Cependant et c’est le but de cette façon de faire, c’est d’afficher les tarifs TTC.  Donc quand on affiche 1€, c’est 1€ pas 1.20€ au final.  C’est personnel, mais je suis toujours un peu déçu quand j’arrive sur une page qui me dit qu’en fait le prix que tu as vu avant c’était HT. Quand on est consomateur c’est frustrant. Si j’étais acheteur dans le privé, j’aurais mis HT bien entendu.  Mais par défaut, les prix sont affichés en HT. Il faut changer l’option dans les réglages de TVA : <– avant HT après TTC –> Pour Simplifier la lecture, je simplifie les tarifs sur la page panier et commande avec des tarifs TTC Voici au final ce que ça donne. Simple, clair.  La TVA est inscrite discrètement, c’est pas pour dissimuler, mais tout le monde sait qu’il y a de la TVA… Note : je ne sais pas ce qui s’est passé, mais depuis que j’ai fait la section suivante, les prix TTC ne sont plus affichés. Donc c’est pas stable st’histoire.  J’ai joué avec les réglages, en passant et repassant des fonctionalités « on/off », c’est presque redevenu normal. Sauf que j’ai plus de TVA. Fait chier ! Après une pause (d’énervement) j’ai trifouillé qq options dont « Disable automated taxes » et pouf, ca remarche… Produit indisponible J’ai besoin d’un moyen d’afficher des produits mais qui ne sont pas encore disponible à la vente. Ca permet de préparer le terrain et d’informer l’utilisateur que de nouveaux circuits vont être disponibles. Pour cela je vais utiliser un plugin (en fait 2, on verra plus tard pourquoi) qui va me permettre d’afficher ceci  Ce plugin permet de rajouter une bulle « Bientôt Disponible » sur l’image principale. Ce plugin c’est Coming Soon Badge for WooCommerce Une fois installé et activé, ce plugin vous propose tout un tas de customisation.  Il faut activer la fonctionalité par produit dans l’encart « Publier » du produit. Sympas…

Un site e-Commerce en moins d’une heure.

Pourquoi faire ? Pour vendre un bien numérique (un circuit d’OutQuest), j’ai besoin d’un site e-commerce qui me gère la partie vente.   Qui dit vente, dit emmerdes. Oui car on va devoir gérer des profils (user data, email nom prénom, adresse, tel etc) qui aujourd’hui sont sous le coup de lois (RGPD) et on a pas le droit de faire n’importe quoi avec. Et c’est normal. Mais pour ceux qui code un peu, cette partie est un gros morceau. (sécurité, intégrité, disponibilité…)   De plus on va demander un ou des moyens de paiements, enregistrer des commandes, gérer des factures, des remboursements et pour certain des stocks (et des ruptures de stocks), des bons de réduction etc. Coder une platerforme e-commerce est un boulot de dingue.   Mais heuresement on a des développeurs qui l’on fait déjà fait, et propose des solutions gratuites !!! Je vous aime, chères collègues !   J’ai testé WooCommerce, qui pour l’instant couvre 99% de mes besoins WooCommerce kick ass Le e-Commerce, c’est pas nouveau. Je dirais meme que les solutions sont c’est hyper matures. Woo Commerce en est une. J’ai pas été voir les autres, ni même tenté une étude de marché.  J’ai installé WooCommerce pour testé. Et j’ai couvert 99% de mes besoins. Il me manque un tout petit %, dont je parlerai en fin d’article.  Je vous montre ici une installation de woo commerce + plugins + skin pour mes besoins qui seront peut être les votres aussi.   La base Avant toute chose, il vous faut un nom de domaine et un site wordpress hébergé qq part.  Moi ça sera https://shop.outquest.fr Première chose à faire, modifier les réglages principaux avec vos données : N’oubliez pas de confirmer votre adresse email si vous la changez.   Ensuite il faut installer le plugin WooCommerce.   puis on l’active :, on passe alors à la configuration du site e-commerce.    Config On commence par des informations de base concernant votre site, pas vraiment utile que je détaille ceci ici. On vous demandera de choisir le type de produit. Prendre les deux, c’est un choix qui vous permettra de vendre différent type de produit, au moment d’en créer un. Enfin, on vous propose par défault quelques options complémentaires : Accepter les cartes de crédit et autres méthodes de paiement populaire avec WooCommerce Payments.  C’est un plugin spécial WooCommerce développé par WooCommerce Une fois installé, il va gérer tout ce qui concerne les paiments, les remboursements, les méthodes de paiement (stripe, pay pal…), l’intégration de ceux ci sur votre site web.  WooCommerce Tax, utile si vous vendez dans différents pays.  JetPack : utilitaire très connus qui fait plein d’optimisation MailPoet : je connais pas bien, je teste Google Listing & Ads : pas encore testé Facebook pour WooCommerce : pas encore testé     Pour finir, on nous demande de choisir un theme. Personnellement j’ai choisi le thème « Virtue » qui ne figure pas dans la liste qui vous est proposé. Si vous voulez le même suffit d’aller l’installer manuellement dans la section « theme ». Si vous avez opté pour l’option JetPack, on vous demandera de connecter votre compte JetPack sur votre site.    Mise en route Ca y est votre site e-commerce est configuré. Par défaut, votre site web ressemble à cela. On a un thème par defaut, aucun produit, rien a montrer à part une page principale afficher un pauvre article. Ca reste du WordPress from scratch.  A partir de maintenant, les screenshots suivant seront prit avec le theme Virtue. La page d’accueil ressemble à ça : L’interface d’admin de wordpress vous propose de commencer à alimenter votre site web Vous pouvez suivre toutes les étapes une à une. C’est un bon moyen de démarrer. A tout moment vous pouvez reprendre cette mise en route en cliquant sur Accueil du menu WooCommerce: Réglage apparence Note: vous n’êtes pas obliger de régler maintenant l’apparence, d’autant plus qu’en fin de configuration on vous propose de le faire.  Comme un site wordpress classique, il faut paramétrer un minimum pour démarrer. Cela concerne la home page et les menus. Dans mon cas l’apparence du site est basé sur un theme « Virtue » donc pas certain que vous ayez les memes options. Ce que je veux afficher sur ma home page c’est un logo, un menu et une liste de produit.  Insérer un logo se fait via l’assistance de personnalisation dans « réglage principaux » Pour mettre une liste de produit à la place d’un article de base, il faut se rendre dans « Réglages de la page d’accueil »   et modifier en page statique et choisir  « boutique » Dans la section Apparence – Menu sur l’admin wordpress, j’ai crée un menu comme ceci :  Pour au final un look qui ressemble à ça : Ce qui permet de naviguer sur nos produits et voir le détail d’un produit sur une page dédiée. Ajout de produits Depuis le didactel, choisir « ajouter un produit manuellement dans le cas d’une petite boutique ». Sinon Il existe un menu spécial produit :  On va rapidement créer un premier produit « Quête des Vallons de la Vilaine » qui sera notre premier produit numérique que l’on souhaite vendre. On va lui donner un nom, une description et une image. (on pourra mettre plus d’une image plus tard). Le cadre suivant est très important, c’est ici que l’on détermine quel type de produit et à quel tarif.  On commence par un tarif peu élevé de 1€ que l’on changera plus tard. Cela nous permettra de faire notre premier « auto achat » pour tester. En évitant de payer des impots et taxes inutiles.  On y reviendra plus tard. On publie notre premier produit. Et on en profite pour en faire un ou deux de plus, ce qui nous permettra de comparer plus tard quelques fonctionnalités intéressantes.   WooCommerce Payments On vient d’ajouter nos produits, on avance sur les paiements C’est pas la partie la plus simple. Mais c’est celle qui a été la plus simplifié depuis qq années. En gros ce plugin va nous faciliter. la…