Cómo agregar puntos finales personalizados a la página Mi cuenta en WooCommerce

Esta publicación explicará cómo agregar puntos finales personalizados a la página "Mi cuenta" de WooCommerce. Podemos hacerlo accesible de dos maneras: ya sea como una pestaña personalizada propia o como un botón para cada pedido en la pestaña "Pedidos".

La página "Mi cuenta" de WooCommerce utiliza la funcionalidad integrada de WordPress para puntos finales, lo que facilita el ajuste o la adición de sus propios puntos finales. Si no está familiarizado con los puntos finales, le recomiendo leer mi publicación que detalla cómo agregar puntos finales personalizados en WordPress.

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ágina general para obtener información adicional, puede agregar esta página como su propia pestaña. Sin embargo, si desea que su punto final esté relacionado con cada pedido, debe agregar su punto final a cada fila de pedido en la pestaña "Pedidos". En esta publicación veremos ambos métodos.

Agregar una pestaña personalizada y un punto final a "Mi cuenta"

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ágina "Mi cuenta". Agregaremos una pestaña personalizada "Claves de licencia" que debería generar todas las claves de licencia válidas registradas para ese usuario.

Agregar un punto final personalizado

En el código de nuestro tema functions.phpo complemento, primero agregamos nuestro punto final personalizado usando add_rewrite_endpoint(). Como primer argumento a esto proporcionamos una clave única. En el siguiente ejemplo, he llamado al punto final ‘ license-keys‘.

add_action('init', function() {
    add_rewrite_endpoint('license-keys', EP_ROOT | EP_PAGES);
});

Tenga en cuenta que WordPress agrega automáticamente nuestra clave para consultar vars cuando se usa add_rewrite_endpoint(), por lo que no es necesario filtrar query_vars.

Si encuentra errores de "404 no encontrado", debe actualizar sus enlaces permanentes. Para hacer esto, vaya a Configuración> Enlaces permanentes y simplemente haga clic en Guardar. Siempre que hagamos cambios en los enlaces permanentes o puntos finales, debemos hacer esto.

Agregar una pestaña personalizada

El siguiente paso es agregar una pestaña a las pestañas de la página "Mi cuenta". Esto lo hacemos con el filtro woocommerce_account_menu_items. La matriz proporcionada por el filtro contiene todas las teclas de tabulación y su etiqueta correspondiente.

Simplemente puede agregar su pestaña al final de la matriz, pero si desea tener más control sobre dónde debe aparecer su pestaña, debe manipular la matriz utilizando las funciones de PHP. En el ejemplo anterior, lo quiero al final, pero antes de la pestaña "Cerrar sesión". Así que saco la pestaña "Cerrar sesión", inserto mi pestaña y luego vuelvo a colocar la pestaña "Cerrar sesión".

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;
});

Si actualiza su página Mi cuenta ahora, debería ver aparecer su pestaña antes de "Cerrar sesión". Al hacer clic en él, se accede a la URL ” <example.com>/my-account/license-keys/“. Sin embargo, no verá ningún cambio al hacer clic en la pestaña. Eso es porque no hemos definido qué salida. Ese es nuestro próximo paso.

Renderizar el contenido de la pestaña personalizada

WooCommerce ofrece el gancho woocommerce_account_<endpoint key>_endpointpara generar contenido en "Mi cuenta", donde reemplaza con su clave de punto final personalizada. En nuestro ejemplo, el gancho correcto sería woocommerce_account_license-keys_endpoint.

add_action('woocommerce_account_license-keys_endpoint', function() {
    _e('Your license keys', 'txtdomain');
});

En cuanto a la salida real de la pestaña, esto depende totalmente de usted. Puede hacer una consulta, obtener información 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ón. WooCommerce ofrece una gran funcionalidad para las plantillas, así que la usaremos.

Al usar wc_get_template()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án al archivo de plantilla. Siguiendo la estructura establecida de WooCommerce, creamos una plantilla de WooCommerce personalizada que guardamos call license-keys.phpen la <theme>/woocommerce/myaccount/carpeta.

Continúe y cree un archivo vacío <theme>/woocommerce/myaccount/license-keys.php. Dentro de aquí es donde define la salida de su pestaña personalizada. También tenemos acceso a todas las variables que pasamos en la matriz a wc_get_template(). Entonces, en nuestro caso, la $licensesvariable estará disponible y se completará con la información que transmitimos desde nuestra función de punto final. Puede pasar tantas variables como necesite.

Agregar un punto final y un botón personalizado a cada pedido en la página "Mi cuenta"

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ña personalizada para mostrarlos todos, ¿quizás prefiera mostrar las claves de licencia conectadas a un pedido específico? Podríamos agregar un botón personalizado junto a "Ver" en el resumen de pedidos en Mi cuenta:

Comencemos haciendo lo mismo que hicimos anteriormente: registrando un punto final personalizado:

Registrar un punto final personalizado

add_action('init', function() {
    add_rewrite_endpoint('license-keys', EP_ROOT | EP_PAGES);
});

¡No olvide eliminar los enlaces permanentes (vaya a Configuración> Enlaces permanentes y presione el botón Guardar)!

Agregar una acción personalizada (y un botón)

El siguiente paso es agregar el botón usando el filtro woocommerce_my_account_my_orders_actions. Como segundo argumento de este filtro obtienes el objeto de pedido. Eso es muy útil; 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én 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ódigo, simplemente verifico si el estado del pedido está completo o no. Probablemente necesite agregar su propio código para verificar si hay o no claves de licencia para mostrar por pedido.

Para agregar una acción personalizada, debemos proporcionar una clave única y una matriz con valores autoexplicativos para ‘ url‘ y ‘ name‘. En cuanto a la URL, usamos la función de WordPress para devolver la URL del punto final: wc_get_endpoint_url(). Como también necesitamos pasar el ID de pedido, establecemos el ID de pedido como segundo argumento para esta función, lo que da como resultado la siguiente URL: <example.com>/my-account/license-keys/<order ID>/.

Esto debería agregar un nuevo botón para cada pedido completado:

Ahora todo lo que necesitamos es la plantilla que se mostrará para el punto final license-keys.

Representación del punto final

La forma en que funcionan los puntos finales en WordPress es que lo que viene después 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/que podemos usar get_query_var('license-keys')para obtener la identificación del pedido; 204.

Para generar contenido para nuestro punto final personalizado, nos conectamos a woocommerce_account_<endpoint key>_endpointlo que en nuestro caso sería woocommerce_account_license-keys_endpoint. Dentro de esa función, podemos usarla get_query_var()para obtener el ID del pedido y, con eso, consultar el pedido para obtener las claves de licencia.

La salida HTML real de su plantilla personalizada ” myaccount/license-keys.php" depende completamente de sus necesidades. Presumiblemente, habría utilizado el ID de pedido para recopilar las claves de licencia en algún conjunto y pasarlo a la plantilla para obtener un buen resultado. En el código anterior, también paso el ID del pedido para que sea accesible desde $order_idel interior de la plantilla (por ejemplo, para generar un buen título "Claves de licencia para el pedido n.º 204").