{"id":234235,"date":"2023-02-18T15:33:00","date_gmt":"2023-02-18T12:33:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=234235"},"modified":"2022-11-12T01:28:59","modified_gmt":"2022-11-11T22:28:59","slug":"comment-ajouter-des-points-de-terminaison-personnalises-a-la-page-mon-compte-dans-woocommerce","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/comment-ajouter-des-points-de-terminaison-personnalises-a-la-page-mon-compte-dans-woocommerce\/","title":{"rendered":"Comment ajouter des points de terminaison personnalis\u00e9s \u00e0 la page Mon compte dans WooCommerce"},"content":{"rendered":"\n

Cet article expliquera comment ajouter des points de terminaison personnalis\u00e9s \u00e0 la page "Mon compte" de WooCommerce. Nous pouvons le rendre accessible de deux mani\u00e8res\u00a0: soit sous la forme d’un onglet personnalis\u00e9, soit sous la forme d’un bouton pour chaque commande dans l’onglet "Commandes".<\/a><\/p>\n

La page "Mon compte" de WooCommerce utilise la fonctionnalit\u00e9 int\u00e9gr\u00e9e de WordPress pour les points de terminaison, ce qui facilite l’ajustement ou l’ajout de vos propres points de terminaison. Si vous n’\u00eates pas familier avec les points de terminaison, je vous recommande de lire mon article qui explique en d\u00e9tail comment ajouter des points de terminaison personnalis\u00e9s dans WordPress<\/a>.<\/p>\n

La fa\u00e7on dont vous rendez votre point de terminaison personnalis\u00e9 accessible \u00e0 l’utilisateur \u00e0 partir de "Mon compte" d\u00e9pend enti\u00e8rement des besoins de votre boutique en ligne. Si vous voulez simplement une page g\u00e9n\u00e9rale pour des informations suppl\u00e9mentaires, vous pouvez ajouter cette page comme son propre onglet. Si vous souhaitez toutefois que votre point de terminaison soit li\u00e9 \u00e0 chaque commande, vous devez ajouter votre point de terminaison \u00e0 chaque ligne de commande dans l’onglet "Commandes". Dans cet article, nous examinerons les deux m\u00e9thodes.<\/p>\n

Ajout d’un onglet personnalis\u00e9 et d’un point de terminaison \u00e0 "Mon compte"<\/h2>\n

Par exemple, supposons que notre boutique en ligne vende des logiciels et que nous ayons besoin d’un endroit pour afficher les cl\u00e9s de licence de nos clients dans leur page "Mon compte". Nous ajouterons un onglet personnalis\u00e9 "Cl\u00e9s de licence" qui devrait afficher toutes les cl\u00e9s de licence valides enregistr\u00e9es pour cet utilisateur.<\/p>\n

Ajouter un point de terminaison personnalis\u00e9<\/h3>\n

Dans le code de notre th\u00e8me functions.php<\/code>ou plugin, nous ajoutons d’abord notre point de terminaison personnalis\u00e9 en utilisant add_rewrite_endpoint()<\/code>. Comme premier argument, nous fournissons une cl\u00e9 unique. Dans l’exemple ci-dessous, j’ai appel\u00e9 le point de terminaison ‘ license-keys<\/code>‘.<\/p>\n

add_action('init', function() {\n    add_rewrite_endpoint('license-keys', EP_ROOT | EP_PAGES);\n});<\/code><\/pre>\n
Gardez \u00e0 l’esprit que WordPress ajoute automatiquement notre cl\u00e9 pour interroger les variables lors de l’utilisation add_rewrite_endpoint()<\/code>, il n’est donc pas n\u00e9cessaire de filtrer query_vars<\/code>.<\/p>\n
Si vous rencontrez des erreurs \u00ab\u00a0404 introuvable\u00a0\u00bb, vous devez actualiser vos permaliens. Pour ce faire, allez dans Param\u00e8tres> Permaliens et cliquez simplement sur Enregistrer. Chaque fois que nous apportons des modifications aux permaliens ou aux points de terminaison, nous devons le faire.<\/p>\n
Ajout d’un onglet personnalis\u00e9<\/h3>\n
L’\u00e9tape suivante consiste \u00e0 ajouter un onglet aux onglets de la page "Mon compte". Nous faisons cela avec le filtre woocommerce_account_menu_items<\/code>. Le tableau fourni par le filtre contient toutes les touches de tabulation et leur \u00e9tiquette correspondante.<\/p>\n
Vous pouvez simplement ajouter votre onglet \u00e0 la fin du tableau, mais si vous voulez plus de contr\u00f4le sur l’endroit o\u00f9 votre onglet doit appara\u00eetre, vous devez manipuler le tableau \u00e0 l’aide de fonctions PHP. Dans l’exemple ci-dessus, je le veux \u00e0 la fin, mais avant l’onglet "D\u00e9connexion". Je retire donc l’onglet "D\u00e9connexion", ins\u00e8re mon onglet, puis remets l’onglet "D\u00e9connexion" apr\u00e8s.<\/p>\n
add_filter('woocommerce_account_menu_items', function($items) {\n    $logout = $items['customer-logout'];\n    unset($items['customer-logout']);\n    $items['license-keys'] = __('License keys', 'txtdomain');\n    $items['customer-logout'] = $logout;\n    return $items;\n});<\/code><\/pre>\n
Si vous actualisez votre page Mon compte maintenant, vous devriez voir votre onglet appara\u00eetre avant "D\u00e9connexion". En cliquant dessus, vous acc\u00e9dez \u00e0 l’URL " <example.com>\/my-account\/license-keys\/<\/code>". Cependant, vous ne verrez rien changer lorsque vous cliquerez sur l’onglet. C’est parce que nous n’avons pas d\u00e9fini ce qu’il faut afficher. C’est notre prochaine \u00e9tape.<\/p>\n
Rendu du contenu de l’onglet personnalis\u00e9<\/h3>\n
WooCommerce offre le crochet woocommerce_account_<endpoint key>_endpoint<\/code>pour produire du contenu dans "Mon compte", o\u00f9 vous le remplacez par votre cl\u00e9 de point de terminaison personnalis\u00e9e. Dans notre exemple, le crochet correct serait woocommerce_account_license-keys_endpoint<\/code>.<\/p>\n
add_action('woocommerce_account_license-keys_endpoint', function() {\n    _e('Your license keys', 'txtdomain');\n});<\/code><\/pre>\n
Quant \u00e0 la sortie r\u00e9elle de l’onglet, cela d\u00e9pend enti\u00e8rement de vous. Vous pouvez faire une requ\u00eate, r\u00e9cup\u00e9rer des informations, puis les afficher. Cependant, il est recommand\u00e9 d’utiliser des mod\u00e8les pour g\u00e9n\u00e9rer du HTML au lieu de g\u00e9n\u00e9rer la sortie HTML compl\u00e8te directement dans notre fonction. WooCommerce offre d’excellentes fonctionnalit\u00e9s pour les mod\u00e8les, nous allons donc l’utiliser.<\/p>\n
En utilisant, wc_get_template()<\/code>nous pouvons fournir un mod\u00e8le personnalis\u00e9 (il n’est pas n\u00e9cessaire que ce soit l’un des mod\u00e8les de WooCommerce). Comme deuxi\u00e8me argument, nous pouvons d\u00e9finir des variables qui seront transmises au fichier de mod\u00e8le. Suivant la structure \u00e9tablie de WooCommerce, nous cr\u00e9ons un mod\u00e8le WooCommerce personnalis\u00e9 que nous avons call license-keys.php<\/code>dans <theme>\/woocommerce\/myaccount\/<\/code>le dossier.<\/p>\n
add_action('woocommerce_account_license-keys_endpoint', function() {\n    $licenses = [];  \/\/ Replace with function to return licenses for current logged in user\n    wc_get_template('myaccount\/license-keys.php', [\n        'licenses' => $licenses\n    ]);\n});<\/code><\/pre>\n
Allez-y et cr\u00e9ez un fichier vide <theme>\/woocommerce\/myaccount\/license-keys.php<\/code>. C’est \u00e0 l’int\u00e9rieur que vous d\u00e9finissez la sortie de votre onglet personnalis\u00e9. Nous avons \u00e9galement acc\u00e8s \u00e0 toutes les variables que nous avons transmises dans le tableau \u00e0 wc_get_template()<\/code>. Ainsi, dans notre cas, la $licenses<\/code>variable sera disponible et remplie avec les informations que nous avons transmises \u00e0 partir de notre fonction de point de terminaison. Vous pouvez transmettre autant de variables que n\u00e9cessaire.<\/p>\n
Ajout d’un point de terminaison et d’un bouton personnalis\u00e9 \u00e0 chaque commande dans la page "Mon compte"<\/h2>\n
Continuons avec le m\u00eame exemple ci-dessus\u00a0; en supposant que votre boutique en ligne vend des logiciels et que vous deviez montrer les cl\u00e9s de licence du client quelque part. Mais au lieu d’ajouter un onglet personnalis\u00e9 pour les afficher tous, peut-\u00eatre pr\u00e9f\u00e9rez-vous afficher les cl\u00e9s de licence li\u00e9es \u00e0 une commande sp\u00e9cifique\u00a0? Nous pourrions ajouter un bouton personnalis\u00e9 \u00e0 c\u00f4t\u00e9 de "Afficher" dans l’aper\u00e7u des commandes dans Mon compte\u00a0:<\/p>\n
\"Comment<\/a><\/p>\n
Commen\u00e7ons par faire la m\u00eame chose que ci-dessus\u00a0: enregistrer un point de terminaison personnalis\u00e9\u00a0:<\/p>\n
Enregistrer un point de terminaison personnalis\u00e9<\/h3>\n
add_action('init', function() {\n    add_rewrite_endpoint('license-keys', EP_ROOT | EP_PAGES);\n});<\/code><\/pre>\n
N’oubliez pas de vider les permaliens (allez dans Param\u00e8tres > Permaliens et appuyez sur le bouton Enregistrer)\u00a0!<\/p>\n
Ajouter une action personnalis\u00e9e (et un bouton)<\/h3>\n
L’\u00e9tape suivante consiste \u00e0 ajouter le bouton en utilisant le filtre woocommerce_my_account_my_orders_actions<\/code>. Comme deuxi\u00e8me argument de ce filtre, vous obtenez l’objet de commande. C’est tr\u00e8s utile; nous voulons v\u00e9rifier que la commande est termin\u00e9e et pay\u00e9e, afin de ne pas afficher les cl\u00e9s de licence pour les commandes non pay\u00e9es ou annul\u00e9es. Avec l’objet de commande, nous obtenons \u00e9galement l’ID de commande qui est probablement n\u00e9cessaire pour demander les cl\u00e9s de licence des produits de cette commande. Dans le code ci-dessous, je v\u00e9rifie simplement si le statut de la commande est termin\u00e9 ou non. Vous devrez probablement ajouter votre propre code pour v\u00e9rifier s’il existe ou non des cl\u00e9s de licence \u00e0 afficher par commande.<\/p>\n
Afin d’ajouter une action personnalis\u00e9e, nous devons fournir une cl\u00e9 unique et un tableau avec des valeurs explicites pour ‘ url<\/code>‘ et ‘ name<\/code>‘. En ce qui concerne l’URL, nous utilisons la fonction de WordPress pour renvoyer l’URL du point de terminaison\u00a0: wc_get_endpoint_url()<\/code>. Comme nous devons \u00e9galement transmettre l’ID de commande, nous d\u00e9finissons l’ID de commande comme deuxi\u00e8me argument de cette fonction, ce qui donne l’URL suivante\u00a0: <example.com>\/my-account\/license-keys\/<order ID>\/<\/code>.<\/p>\n
add_filter('woocommerce_my_account_my_orders_actions', function($actions, $order) {\n    if ($order->get_status() == 'completed') {\n        $actions['view-license-keys'] = [\n            'url' => wc_get_endpoint_url('license-keys', $order->get_id()),\n            'name' => __('View license keys', 'txtdomain')\n        ];\n    }\n    return $actions;\n}, 10, 2);<\/code><\/pre>\n
Cela devrait ajouter un nouveau bouton pour chaque commande termin\u00e9e\u00a0:<\/p>\n
\"Comment<\/a><\/p>\n
Maintenant, tout ce dont nous avons besoin est le mod\u00e8le \u00e0 afficher pour le point de terminaison license-keys<\/code>.<\/p>\n
Rendu du point de terminaison<\/h3>\n
La fa\u00e7on dont les points de terminaison fonctionnent dans WordPress est que tout ce qui vient apr\u00e8s le point de terminaison est la valeur de cette variable de requ\u00eate ; ou en d’autres termes; lorsque nous visitons par exemple l’URL <example.com>\/my-account\/license-keys\/204\/<\/code>que nous pouvons utiliser get_query_var('license-keys')<\/code>pour obtenir l’ID de commande\u00a0; 204.<\/p>\n
Pour g\u00e9n\u00e9rer du contenu pour notre point de terminaison personnalis\u00e9, nous nous accrochons \u00e0 woocommerce_account_<endpoint key>_endpoint<\/code>qui, dans notre cas, serait woocommerce_account_license-keys_endpoint<\/code>. \u00c0 l’int\u00e9rieur de cette fonction, nous pouvons utiliser get_query_var()<\/code>pour obtenir l’ID de commande et, avec cette requ\u00eate, la commande de toutes les cl\u00e9s de licence.<\/p>\n
add_action('woocommerce_account_license-keys_endpoint', function() {\n    $order_id = get_query_var('license-keys');\n    $licenses = [];  \/\/ Function to return licenses for order ID\n\u00a0\n    wc_get_template('myaccount\/license-keys.php', [\n        'licenses' => $licenses,\n        'order_id' => $order_id\n    ]);\n});<\/code><\/pre>\n
La sortie HTML r\u00e9elle de votre mod\u00e8le personnalis\u00e9 " myaccount\/license-keys.php<\/code>" d\u00e9pend enti\u00e8rement de vos besoins. Vous auriez probablement utilis\u00e9 l’ID de commande pour rassembler les cl\u00e9s de licence dans un tableau et les transmettre au mod\u00e8le pour une belle sortie. Dans le code ci-dessus, je transmets \u00e9galement l’ID de commande afin qu’il soit accessible comme $order_id<\/code>\u00e0 l’int\u00e9rieur du mod\u00e8le (par exemple, pour afficher un joli titre \u00abCl\u00e9s de licence pour la commande n\u00b0 204 \u00bb).<\/p>\n
Source d’enregistrement:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Cet article explique comment ajouter des points de terminaison personnalis\u00e9s \u00e0 \u00ab\u00a0Mon compte\u00a0\u00bb de WooCommerce\u00a0; soit comme un onglet propre, soit comme un bouton pour chaque commande dans l’onglet \u00ab\u00a0Commandes\u00a0\u00bb.<\/p>\n","protected":false},"author":1,"featured_media":223696,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[1110,811,811,841,841,852,852,862,862],"tags":[1167],"class_list":{"0":"post-234235","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-n-a","8":"category-plugins-2","10":"category-tutoriels","12":"category-woocommerce-3","14":"category-wordpress-3","16":"tag-affiai-fr"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/234235","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/comments?post=234235"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/234235\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/223696"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=234235"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=234235"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=234235"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}