{"id":233590,"date":"2023-02-18T15:44:00","date_gmt":"2023-02-18T12:44:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233590"},"modified":"2022-11-11T00:31:07","modified_gmt":"2022-11-10T21:31:07","slug":"como-agregar-puntos-finales-personalizados-a-la-pagina-mi-cuenta-en-woocommerce","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/como-agregar-puntos-finales-personalizados-a-la-pagina-mi-cuenta-en-woocommerce\/","title":{"rendered":"C\u00f3mo agregar puntos finales personalizados a la p\u00e1gina Mi cuenta en WooCommerce"},"content":{"rendered":"\n

Esta publicaci\u00f3n explicar\u00e1 c\u00f3mo agregar puntos finales personalizados a la p\u00e1gina "Mi cuenta" de WooCommerce<\/a>. Podemos hacerlo accesible de dos maneras: ya sea como una pesta\u00f1a personalizada propia o como un bot\u00f3n para cada pedido en la pesta\u00f1a "Pedidos".<\/p>\n

La p\u00e1gina "Mi cuenta" de WooCommerce utiliza la funcionalidad integrada de WordPress para puntos finales, lo que facilita el ajuste o la adici\u00f3n de sus propios puntos finales. Si no est\u00e1 familiarizado con los puntos finales, le recomiendo leer mi publicaci\u00f3n que detalla c\u00f3mo agregar puntos finales personalizados en WordPress<\/a>.<\/p>\n

La forma en que hace que su punto final personalizado sea accesible para el usuario desde "Mi cuenta" depende completamente de las necesidades de su tienda web. Si simplemente desea una p\u00e1gina general para obtener informaci\u00f3n adicional, puede agregar esta p\u00e1gina como su propia pesta\u00f1a. Sin embargo, si desea que su punto final est\u00e9 relacionado con cada pedido, debe agregar su punto final a cada fila de pedido en la pesta\u00f1a "Pedidos". En esta publicaci\u00f3n veremos ambos m\u00e9todos.<\/p>\n

Agregar una pesta\u00f1a personalizada y un punto final a "Mi cuenta"<\/h2>\n

Por ejemplo, supongamos que nuestra tienda web vende software y necesitamos un lugar para mostrar las claves de licencia de nuestros clientes en su p\u00e1gina "Mi cuenta". Agregaremos una pesta\u00f1a personalizada "Claves de licencia" que deber\u00eda generar todas las claves de licencia v\u00e1lidas registradas para ese usuario.<\/p>\n

Agregar un punto final personalizado<\/h3>\n

En el c\u00f3digo de nuestro tema functions.php<\/code>o complemento, primero agregamos nuestro punto final personalizado usando add_rewrite_endpoint()<\/code>. Como primer argumento a esto proporcionamos una clave \u00fanica. En el siguiente ejemplo, he llamado al punto final ‘ license-keys<\/code>‘.<\/p>\n

add_action('init', function() {\n    add_rewrite_endpoint('license-keys', EP_ROOT | EP_PAGES);\n});<\/code><\/pre>\n
Tenga en cuenta que WordPress agrega autom\u00e1ticamente nuestra clave para consultar vars cuando se usa add_rewrite_endpoint()<\/code>, por lo que no es necesario filtrar query_vars<\/code>.<\/p>\n
Si encuentra errores de "404 no encontrado", debe actualizar sus enlaces permanentes. Para hacer esto, vaya a Configuraci\u00f3n> Enlaces permanentes y simplemente haga clic en Guardar. Siempre que hagamos cambios en los enlaces permanentes o puntos finales, debemos hacer esto.<\/p>\n
Agregar una pesta\u00f1a personalizada<\/h3>\n
El siguiente paso es agregar una pesta\u00f1a a las pesta\u00f1as de la p\u00e1gina "Mi cuenta". Esto lo hacemos con el filtro woocommerce_account_menu_items<\/code>. La matriz proporcionada por el filtro contiene todas las teclas de tabulaci\u00f3n y su etiqueta correspondiente.<\/p>\n
Simplemente puede agregar su pesta\u00f1a al final de la matriz, pero si desea tener m\u00e1s control sobre d\u00f3nde debe aparecer su pesta\u00f1a, debe manipular la matriz utilizando las funciones de PHP. En el ejemplo anterior, lo quiero al final, pero antes de la pesta\u00f1a "Cerrar sesi\u00f3n". As\u00ed que saco la pesta\u00f1a "Cerrar sesi\u00f3n", inserto mi pesta\u00f1a y luego vuelvo a colocar la pesta\u00f1a "Cerrar sesi\u00f3n".<\/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 actualiza su p\u00e1gina Mi cuenta ahora, deber\u00eda ver aparecer su pesta\u00f1a antes de "Cerrar sesi\u00f3n". Al hacer clic en \u00e9l, se accede a la URL \u00bb <example.com>\/my-account\/license-keys\/<\/code>\u00ab. Sin embargo, no ver\u00e1 ning\u00fan cambio al hacer clic en la pesta\u00f1a. Eso es porque no hemos definido qu\u00e9 salida. Ese es nuestro pr\u00f3ximo paso.<\/p>\n
Renderizar el contenido de la pesta\u00f1a personalizada<\/h3>\n
WooCommerce ofrece el gancho woocommerce_account_<endpoint key>_endpoint<\/code>para generar contenido en "Mi cuenta", donde reemplaza con su clave de punto final personalizada. En nuestro ejemplo, el gancho correcto ser\u00eda 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
En cuanto a la salida real de la pesta\u00f1a, esto depende totalmente de usted. Puede hacer una consulta, obtener informaci\u00f3n y luego enviarla. Sin embargo, se recomienda usar plantillas para generar HTML en lugar de generar la salida HTML completa directamente dentro de nuestra funci\u00f3n. WooCommerce ofrece una gran funcionalidad para las plantillas, as\u00ed que la usaremos.<\/p>\n
Al usar wc_get_template()<\/code>podemos proporcionar una plantilla personalizada (no es necesario que sea una de las plantillas de WooCommerce). Como segundo argumento, podemos definir variables que se pasar\u00e1n al archivo de plantilla. Siguiendo la estructura establecida de WooCommerce, creamos una plantilla de WooCommerce personalizada que guardamos call license-keys.php<\/code>en la <theme>\/woocommerce\/myaccount\/<\/code>carpeta.<\/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
Contin\u00fae y cree un archivo vac\u00edo <theme>\/woocommerce\/myaccount\/license-keys.php<\/code>. Dentro de aqu\u00ed es donde define la salida de su pesta\u00f1a personalizada. Tambi\u00e9n tenemos acceso a todas las variables que pasamos en la matriz a wc_get_template()<\/code>. Entonces, en nuestro caso, la $licenses<\/code>variable estar\u00e1 disponible y se completar\u00e1 con la informaci\u00f3n que transmitimos desde nuestra funci\u00f3n de punto final. Puede pasar tantas variables como necesite.<\/p>\n
Agregar un punto final y un bot\u00f3n personalizado a cada pedido en la p\u00e1gina "Mi cuenta"<\/h2>\n
Sigamos con el mismo ejemplo anterior; suponiendo que su tienda web vende software y necesita mostrar las claves de licencia del cliente en alguna parte. Pero en lugar de agregar una pesta\u00f1a personalizada para mostrarlos todos, \u00bfquiz\u00e1s prefiera mostrar las claves de licencia conectadas a un pedido espec\u00edfico? Podr\u00edamos agregar un bot\u00f3n personalizado junto a "Ver" en el resumen de pedidos en Mi cuenta:<\/p>\n
\"C\u00f3mo<\/a><\/p>\n
Comencemos haciendo lo mismo que hicimos anteriormente: registrando un punto final personalizado:<\/p>\n
Registrar un punto final personalizado<\/h3>\n
add_action('init', function() {\n    add_rewrite_endpoint('license-keys', EP_ROOT | EP_PAGES);\n});<\/code><\/pre>\n
\u00a1No olvide eliminar los enlaces permanentes (vaya a Configuraci\u00f3n> Enlaces permanentes y presione el bot\u00f3n Guardar)!<\/p>\n
Agregar una acci\u00f3n personalizada (y un bot\u00f3n)<\/h3>\n
El siguiente paso es agregar el bot\u00f3n usando el filtro woocommerce_my_account_my_orders_actions<\/code>. Como segundo argumento de este filtro obtienes el objeto de pedido. Eso es muy \u00fatil; queremos comprobar que el pedido se ha completado y pagado, para no mostrar las claves de licencia de los pedidos no pagados o cancelados. Con el objeto de pedido tambi\u00e9n obtenemos el ID del pedido, que probablemente sea necesario para consultar las claves de licencia de los productos en ese pedido. En el siguiente c\u00f3digo, simplemente verifico si el estado del pedido est\u00e1 completo o no. Probablemente necesite agregar su propio c\u00f3digo para verificar si hay o no claves de licencia para mostrar por pedido.<\/p>\n
Para agregar una acci\u00f3n personalizada, debemos proporcionar una clave \u00fanica y una matriz con valores autoexplicativos para ‘ url<\/code>‘ y ‘ name<\/code>‘. En cuanto a la URL, usamos la funci\u00f3n de WordPress para devolver la URL del punto final: wc_get_endpoint_url()<\/code>. Como tambi\u00e9n necesitamos pasar el ID de pedido, establecemos el ID de pedido como segundo argumento para esta funci\u00f3n, lo que da como resultado la siguiente 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
Esto deber\u00eda agregar un nuevo bot\u00f3n para cada pedido completado:<\/p>\n
\"C\u00f3mo<\/a><\/p>\n
Ahora todo lo que necesitamos es la plantilla que se mostrar\u00e1 para el punto final license-keys<\/code>.<\/p>\n
Representaci\u00f3n del punto final<\/h3>\n
La forma en que funcionan los puntos finales en WordPress es que lo que viene despu\u00e9s del punto final es el valor de esa variable de consulta; o en otras palabras; cuando visitamos, por ejemplo, la URL <example.com>\/my-account\/license-keys\/204\/<\/code>que podemos usar get_query_var('license-keys')<\/code>para obtener la identificaci\u00f3n del pedido; 204.<\/p>\n
Para generar contenido para nuestro punto final personalizado, nos conectamos a woocommerce_account_<endpoint key>_endpoint<\/code>lo que en nuestro caso ser\u00eda woocommerce_account_license-keys_endpoint<\/code>. Dentro de esa funci\u00f3n, podemos usarla get_query_var()<\/code>para obtener el ID del pedido y, con eso, consultar el pedido para obtener las claves de licencia.<\/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 salida HTML real de su plantilla personalizada \u00bb myaccount\/license-keys.php<\/code>" depende completamente de sus necesidades. Presumiblemente, habr\u00eda utilizado el ID de pedido para recopilar las claves de licencia en alg\u00fan conjunto y pasarlo a la plantilla para obtener un buen resultado. En el c\u00f3digo anterior, tambi\u00e9n paso el ID del pedido para que sea accesible desde $order_id<\/code>el interior de la plantilla (por ejemplo, para generar un buen t\u00edtulo "Claves de licencia para el pedido n.\u00ba 204").<\/p>\n
Fuente de grabaci\u00f3n:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Esta publicaci\u00f3n explicar\u00e1 c\u00f3mo agregar puntos finales personalizados a \u00abMi cuenta\u00bb de WooCommerce; ya sea como pesta\u00f1a propia, o como bot\u00f3n a cada pedido en la pesta\u00f1a \u00abPedidos\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":[810,1110,810,840,840,851,851,861,861],"tags":[1172],"class_list":{"0":"post-233590","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-complementos","8":"category-n-a","10":"category-tutoriales","12":"category-woocommerce-2","14":"category-wordpress-2","16":"tag-affiai-es"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/233590","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/comments?post=233590"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/233590\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/223696"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=233590"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=233590"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=233590"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}