{"id":233630,"date":"2023-02-18T15:34:00","date_gmt":"2023-02-18T12:34:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233630"},"modified":"2022-11-11T00:44:16","modified_gmt":"2022-11-10T21:44:16","slug":"como-adicionar-endpoints-personalizados-a-pagina-minha-conta-no-woocommerce","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/como-adicionar-endpoints-personalizados-a-pagina-minha-conta-no-woocommerce\/","title":{"rendered":"Como adicionar endpoints personalizados \u00e0 p\u00e1gina Minha conta no WooCommerce"},"content":{"rendered":"\n

Este post mostrar\u00e1 como adicionar endpoints personalizados \u00e0 p\u00e1gina "Minha conta" do WooCommerce<\/a>. Podemos torn\u00e1-lo acess\u00edvel de duas maneiras; como uma guia personalizada pr\u00f3pria ou como um bot\u00e3o para cada pedido na guia "Pedidos".<\/p>\n

A p\u00e1gina “Minha conta" do WooCommerce est\u00e1 usando a funcionalidade integrada do WordPress para endpoints, o que facilita o ajuste ou a adi\u00e7\u00e3o de seus pr\u00f3prios endpoints. Se voc\u00ea n\u00e3o estiver familiarizado com endpoints, recomendo ler meu post que detalha como adicionar endpoints personalizados no WordPress<\/a>.<\/p>\n

A forma como voc\u00ea torna seu endpoint personalizado acess\u00edvel para o usu\u00e1rio em “Minha conta” depende inteiramente das necessidades de sua loja virtual. Se voc\u00ea simplesmente deseja uma p\u00e1gina geral para obter informa\u00e7\u00f5es adicionais, pode adicionar esta p\u00e1gina como sua pr\u00f3pria guia. No entanto, se voc\u00ea quiser que seu endpoint seja relacionado a cada pedido, ser\u00e1 necess\u00e1rio adicionar seu endpoint a cada linha de pedido na guia "Pedidos". Neste post, veremos os dois m\u00e9todos.<\/p>\n

Adicionando uma guia personalizada e um endpoint a “Minha conta”<\/h2>\n

Por exemplo, vamos supor que nossa loja virtual venda software e precisamos de um local para mostrar as chaves de licen\u00e7a de nossos clientes na p\u00e1gina "Minha conta". Adicionaremos uma guia personalizada “Chaves de licen\u00e7a” que deve gerar todas as chaves de licen\u00e7a v\u00e1lidas registradas para esse usu\u00e1rio.<\/p>\n

Adicionando um endpoint personalizado<\/h3>\n

No c\u00f3digo do nosso tema functions.php<\/code>ou plugin, primeiro adicionamos nosso endpoint personalizado usando add_rewrite_endpoint()<\/code>. Como primeiro argumento para isso, fornecemos uma chave exclusiva. No exemplo abaixo, chamei o endpoint de ‘ license-keys<\/code>‘.<\/p>\n

add_action('init', function() {\n    add_rewrite_endpoint('license-keys', EP_ROOT | EP_PAGES);\n});<\/code><\/pre>\n
Lembre-se de que o WordPress adiciona automaticamente nossa chave para consultar vars ao usar add_rewrite_endpoint()<\/code>, portanto, n\u00e3o h\u00e1 necessidade de filtrar query_vars<\/code>.<\/p>\n
Se voc\u00ea encontrar erros “404 n\u00e3o encontrado”, ser\u00e1 necess\u00e1rio atualizar seus permalinks. Voc\u00ea faz isso acessando Configura\u00e7\u00f5es > Permalinks e apenas clicando em Salvar. Sempre que fazemos altera\u00e7\u00f5es em links permanentes ou endpoints, precisamos fazer isso.<\/p>\n
Adicionando uma guia personalizada<\/h3>\n
A pr\u00f3xima etapa \u00e9 adicionar uma guia \u00e0s guias da p\u00e1gina "Minha conta". Fazemos isso com o filtro woocommerce_account_menu_items<\/code>. A matriz fornecida pelo filtro cont\u00e9m todas as teclas de tabula\u00e7\u00e3o e seu r\u00f3tulo correspondente.<\/p>\n
Voc\u00ea pode simplesmente anexar sua guia no final do array, mas se voc\u00ea quiser mais controle de onde sua guia deve aparecer, voc\u00ea precisa manipular o array usando fun\u00e7\u00f5es PHP. No exemplo acima eu quero no final, mas antes da aba “Sair”. Ent\u00e3o eu tiro a guia “Log out”, insiro minha guia e, em seguida, coloco de volta a guia “Log out” depois.<\/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
Se voc\u00ea atualizar sua p\u00e1gina Minha conta agora, voc\u00ea ver\u00e1 sua guia aparecer antes de “Sair”. Clicar nele leva voc\u00ea ao URL ” <example.com>\/my-account\/license-keys\/<\/code>“. No entanto, voc\u00ea n\u00e3o ver\u00e1 nada mudar ao clicar na guia. Isso porque n\u00e3o definimos o que produzir. Esse \u00e9 o nosso pr\u00f3ximo passo.<\/p>\n
Renderizando o conte\u00fado da guia personalizada<\/h3>\n
O WooCommerce oferece o gancho woocommerce_account_<endpoint key>_endpoint<\/code>para a sa\u00edda de conte\u00fado em “Minha conta”, onde voc\u00ea substitui por sua chave de endpoint personalizada. Em nosso exemplo, o gancho correto seria 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
Quanto \u00e0 sa\u00edda real da guia, isso depende inteiramente de voc\u00ea. Voc\u00ea pode fazer uma consulta, buscar algumas informa\u00e7\u00f5es e depois produzi-las. No entanto, \u00e9 recomend\u00e1vel usar modelos para gerar HTML em vez de gerar a sa\u00edda HTML completa diretamente dentro de nossa fun\u00e7\u00e3o. O WooCommerce oferece \u00f3timas funcionalidades para modelos, ent\u00e3o vamos usar isso.<\/p>\n
Ao usar wc_get_template()<\/code>, podemos fornecer um modelo personalizado (n\u00e3o precisa ser um dos modelos do WooCommerce). Como segundo argumento podemos definir vari\u00e1veis \u200b\u200bque ser\u00e3o passadas para o arquivo template. Seguindo a estrutura estabelecida do WooCommerce, criamos um modelo WooCommerce personalizado que guardamos call license-keys.php<\/code>na <theme>\/woocommerce\/myaccount\/<\/code>pasta.<\/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
V\u00e1 em frente e crie um arquivo vazio <theme>\/woocommerce\/myaccount\/license-keys.php<\/code>. Dentro dele \u00e9 onde voc\u00ea define a sa\u00edda da sua guia personalizada. Tamb\u00e9m temos acesso a todas as vari\u00e1veis \u200b\u200bque passamos no array para wc_get_template()<\/code>. Portanto, no nosso caso, a $licenses<\/code>vari\u00e1vel estar\u00e1 dispon\u00edvel e preenchida com as informa\u00e7\u00f5es que passamos de nossa fun\u00e7\u00e3o de ponto de extremidade. Voc\u00ea pode passar quantas vari\u00e1veis \u200b\u200bprecisar.<\/p>\n
Adicionando um endpoint e um bot\u00e3o personalizado a cada pedido na p\u00e1gina “Minha conta”<\/h2>\n
Vamos continuar com o mesmo exemplo acima; assumindo que sua loja virtual est\u00e1 vendendo software e voc\u00ea precisa mostrar as chaves de licen\u00e7a do cliente em algum lugar. Mas em vez de adicionar uma guia personalizada para mostrar todos eles, talvez voc\u00ea prefira mostrar as chaves de licen\u00e7a conectadas a um pedido espec\u00edfico? Poder\u00edamos adicionar um bot\u00e3o personalizado ao lado de “Visualizar” na vis\u00e3o geral dos pedidos em Minha conta:<\/p>\n
\"Como<\/a><\/p>\n
Vamos come\u00e7ar fazendo o mesmo que fizemos acima: registrando um endpoint personalizado:<\/p>\n
Registrar um endpoint personalizado<\/h3>\n
add_action('init', function() {\n    add_rewrite_endpoint('license-keys', EP_ROOT | EP_PAGES);\n});<\/code><\/pre>\n
N\u00e3o se esque\u00e7a de liberar os permalinks (v\u00e1 para Configura\u00e7\u00f5es > Permalinks e aperte o bot\u00e3o Salvar)!<\/p>\n
Adicionar uma a\u00e7\u00e3o personalizada (e um bot\u00e3o)<\/h3>\n
O pr\u00f3ximo passo \u00e9 adicionar o bot\u00e3o usando o filtro woocommerce_my_account_my_orders_actions<\/code>. Como segundo argumento para este filtro, voc\u00ea obt\u00e9m o objeto order. Isso \u00e9 muito \u00fatil; queremos verificar se o pedido foi conclu\u00eddo e pago, para que n\u00e3o mostremos as chaves de licen\u00e7a para pedidos n\u00e3o pagos ou cancelados. Com o objeto do pedido, tamb\u00e9m obtemos o ID do pedido que provavelmente \u00e9 necess\u00e1rio para consultar as chaves de licen\u00e7a dos produtos nesse pedido. No c\u00f3digo abaixo eu simplesmente verifico se o status do pedido est\u00e1 ou n\u00e3o conclu\u00eddo. Voc\u00ea provavelmente precisar\u00e1 adicionar seu pr\u00f3prio c\u00f3digo para verificar se h\u00e1 ou n\u00e3o chaves de licen\u00e7a para mostrar por pedido.<\/p>\n
Para adicionar uma a\u00e7\u00e3o personalizada, precisamos fornecer uma chave exclusiva e um array com valores autoexplicativos para ‘ url<\/code>‘ e ‘ name<\/code>‘. Quanto ao URL, usamos a fun\u00e7\u00e3o do WordPress para retornar o URL do endpoint: wc_get_endpoint_url()<\/code>. Como tamb\u00e9m precisamos passar o ID do pedido, definimos o ID do pedido como segundo argumento para essa fun\u00e7\u00e3o, o que resulta na seguinte URL: <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
Isso deve adicionar um novo bot\u00e3o para cada pedido conclu\u00eddo:<\/p>\n
\"Como<\/a><\/p>\n
Agora tudo o que precisamos \u00e9 o modelo para mostrar para o endpoint license-keys<\/code>.<\/p>\n
Renderizando o endpoint<\/h3>\n
A maneira como os endpoints funcionam no WordPress \u00e9 que o que vem depois do endpoint \u00e9 o valor dessa vari\u00e1vel de consulta; ou em outras palavras; quando visitamos, por exemplo, o URL <example.com>\/my-account\/license-keys\/204\/<\/code>que podemos usar get_query_var('license-keys')<\/code>para obter o ID do pedido; 204.<\/p>\n
Para gerar conte\u00fado para nosso endpoint personalizado, nos conectamos ao woocommerce_account_<endpoint key>_endpoint<\/code>que, em nosso caso, seria woocommerce_account_license-keys_endpoint<\/code>. Dentro dessa fun\u00e7\u00e3o, podemos usar get_query_var()<\/code>para obter o ID do pedido e, com essa consulta, o pedido de qualquer chave de licen\u00e7a.<\/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
A sa\u00edda HTML real do seu modelo personalizado ” myaccount\/license-keys.php<\/code>” depende inteiramente de suas necessidades. Presumivelmente, voc\u00ea teria usado o ID do pedido para reunir as chaves de licen\u00e7a em algum array e passar isso para o modelo para uma boa sa\u00edda. No c\u00f3digo acima, tamb\u00e9m estou passando o ID do pedido para que seja acess\u00edvel como $order_id<\/code>dentro do modelo (por exemplo, para gerar um bom t\u00edtulo “Chaves de licen\u00e7a para o pedido #204”).<\/p>\n
Fonte de grava\u00e7\u00e3o:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Este post explicar\u00e1 como adicionar endpoints personalizados \u00e0 “Minha conta” do WooCommerce; como uma guia pr\u00f3pria ou como um bot\u00e3o para cada pedido na guia “Pedidos”.<\/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,816,816,846,846,857,857,867,867],"tags":[1170],"class_list":["post-233630","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-n-a","category-plug-ins","category-tutoriais","category-woocommerce-8","category-wordpress-8","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/233630","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/comments?post=233630"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/233630\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/223696"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=233630"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=233630"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=233630"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}