Este post mostrará como adicionar endpoints personalizados à página "Minha conta" do WooCommerce. Podemos torná-lo acessível de duas maneiras; como uma guia personalizada própria ou como um botão para cada pedido na guia "Pedidos".
A página “Minha conta" do WooCommerce está usando a funcionalidade integrada do WordPress para endpoints, o que facilita o ajuste ou a adição de seus próprios endpoints. Se você não estiver familiarizado com endpoints, recomendo ler meu post que detalha como adicionar endpoints personalizados no WordPress.
A forma como você torna seu endpoint personalizado acessível para o usuário em “Minha conta” depende inteiramente das necessidades de sua loja virtual. Se você simplesmente deseja uma página geral para obter informações adicionais, pode adicionar esta página como sua própria guia. No entanto, se você quiser que seu endpoint seja relacionado a cada pedido, será necessário adicionar seu endpoint a cada linha de pedido na guia "Pedidos". Neste post, veremos os dois métodos.
Adicionando uma guia personalizada e um endpoint a “Minha conta”
Por exemplo, vamos supor que nossa loja virtual venda software e precisamos de um local para mostrar as chaves de licença de nossos clientes na página "Minha conta". Adicionaremos uma guia personalizada “Chaves de licença” que deve gerar todas as chaves de licença válidas registradas para esse usuário.
Adicionando um endpoint personalizado
No código do nosso tema functions.phpou plugin, primeiro adicionamos nosso endpoint personalizado usando add_rewrite_endpoint(). Como primeiro argumento para isso, fornecemos uma chave exclusiva. No exemplo abaixo, chamei o endpoint de ‘ license-keys‘.
add_action('init', function() {
add_rewrite_endpoint('license-keys', EP_ROOT | EP_PAGES);
});Lembre-se de que o WordPress adiciona automaticamente nossa chave para consultar vars ao usar add_rewrite_endpoint(), portanto, não há necessidade de filtrar query_vars.
Se você encontrar erros “404 não encontrado”, será necessário atualizar seus permalinks. Você faz isso acessando Configurações > Permalinks e apenas clicando em Salvar. Sempre que fazemos alterações em links permanentes ou endpoints, precisamos fazer isso.
Adicionando uma guia personalizada
A próxima etapa é adicionar uma guia às guias da página "Minha conta". Fazemos isso com o filtro woocommerce_account_menu_items. A matriz fornecida pelo filtro contém todas as teclas de tabulação e seu rótulo correspondente.
Você pode simplesmente anexar sua guia no final do array, mas se você quiser mais controle de onde sua guia deve aparecer, você precisa manipular o array usando funções PHP. No exemplo acima eu quero no final, mas antes da aba “Sair”. Então eu tiro a guia “Log out”, insiro minha guia e, em seguida, coloco de volta a guia “Log out” depois.
add_filter('woocommerce_account_menu_items', function($items) {
$logout = $items['customer-logout'];
unset($items['customer-logout']);
$items['license-keys'] = __('License keys', 'txtdomain');
$items['customer-logout'] = $logout;
return $items;
});Se você atualizar sua página Minha conta agora, você verá sua guia aparecer antes de “Sair”. Clicar nele leva você ao URL ” <example.com>/my-account/license-keys/“. No entanto, você não verá nada mudar ao clicar na guia. Isso porque não definimos o que produzir. Esse é o nosso próximo passo.
Renderizando o conteúdo da guia personalizada
O WooCommerce oferece o gancho woocommerce_account_<endpoint key>_endpointpara a saída de conteúdo em “Minha conta”, onde você substitui por sua chave de endpoint personalizada. Em nosso exemplo, o gancho correto seria woocommerce_account_license-keys_endpoint.
add_action('woocommerce_account_license-keys_endpoint', function() {
_e('Your license keys', 'txtdomain');
});Quanto à saída real da guia, isso depende inteiramente de você. Você pode fazer uma consulta, buscar algumas informações e depois produzi-las. No entanto, é recomendável usar modelos para gerar HTML em vez de gerar a saída HTML completa diretamente dentro de nossa função. O WooCommerce oferece ótimas funcionalidades para modelos, então vamos usar isso.
Ao usar wc_get_template(), podemos fornecer um modelo personalizado (não precisa ser um dos modelos do WooCommerce). Como segundo argumento podemos definir variáveis que serão passadas para o arquivo template. Seguindo a estrutura estabelecida do WooCommerce, criamos um modelo WooCommerce personalizado que guardamos call license-keys.phpna <theme>/woocommerce/myaccount/pasta.
Vá em frente e crie um arquivo vazio <theme>/woocommerce/myaccount/license-keys.php. Dentro dele é onde você define a saída da sua guia personalizada. Também temos acesso a todas as variáveis que passamos no array para wc_get_template(). Portanto, no nosso caso, a $licensesvariável estará disponível e preenchida com as informações que passamos de nossa função de ponto de extremidade. Você pode passar quantas variáveis precisar.
Adicionando um endpoint e um botão personalizado a cada pedido na página “Minha conta”
Vamos continuar com o mesmo exemplo acima; assumindo que sua loja virtual está vendendo software e você precisa mostrar as chaves de licença do cliente em algum lugar. Mas em vez de adicionar uma guia personalizada para mostrar todos eles, talvez você prefira mostrar as chaves de licença conectadas a um pedido específico? Poderíamos adicionar um botão personalizado ao lado de “Visualizar” na visão geral dos pedidos em Minha conta:
Vamos começar fazendo o mesmo que fizemos acima: registrando um endpoint personalizado:
Registrar um endpoint personalizado
add_action('init', function() {
add_rewrite_endpoint('license-keys', EP_ROOT | EP_PAGES);
});Não se esqueça de liberar os permalinks (vá para Configurações > Permalinks e aperte o botão Salvar)!
Adicionar uma ação personalizada (e um botão)
O próximo passo é adicionar o botão usando o filtro woocommerce_my_account_my_orders_actions. Como segundo argumento para este filtro, você obtém o objeto order. Isso é muito útil; queremos verificar se o pedido foi concluído e pago, para que não mostremos as chaves de licença para pedidos não pagos ou cancelados. Com o objeto do pedido, também obtemos o ID do pedido que provavelmente é necessário para consultar as chaves de licença dos produtos nesse pedido. No código abaixo eu simplesmente verifico se o status do pedido está ou não concluído. Você provavelmente precisará adicionar seu próprio código para verificar se há ou não chaves de licença para mostrar por pedido.
Para adicionar uma ação personalizada, precisamos fornecer uma chave exclusiva e um array com valores autoexplicativos para ‘ url‘ e ‘ name‘. Quanto ao URL, usamos a função do WordPress para retornar o URL do endpoint: wc_get_endpoint_url(). Como também precisamos passar o ID do pedido, definimos o ID do pedido como segundo argumento para essa função, o que resulta na seguinte URL: <example.com>/my-account/license-keys/<order ID>/.
Isso deve adicionar um novo botão para cada pedido concluído:
Agora tudo o que precisamos é o modelo para mostrar para o endpoint license-keys.
Renderizando o endpoint
A maneira como os endpoints funcionam no WordPress é que o que vem depois do endpoint é o valor dessa variável de consulta; ou em outras palavras; quando visitamos, por exemplo, o URL <example.com>/my-account/license-keys/204/que podemos usar get_query_var('license-keys')para obter o ID do pedido; 204.
Para gerar conteúdo para nosso endpoint personalizado, nos conectamos ao woocommerce_account_<endpoint key>_endpointque, em nosso caso, seria woocommerce_account_license-keys_endpoint. Dentro dessa função, podemos usar get_query_var()para obter o ID do pedido e, com essa consulta, o pedido de qualquer chave de licença.
A saída HTML real do seu modelo personalizado ” myaccount/license-keys.php” depende inteiramente de suas necessidades. Presumivelmente, você teria usado o ID do pedido para reunir as chaves de licença em algum array e passar isso para o modelo para uma boa saída. No código acima, também estou passando o ID do pedido para que seja acessível como $order_iddentro do modelo (por exemplo, para gerar um bom título “Chaves de licença para o pedido #204”).