✅ Permitir a los Clientes Subir una Foto de Perfil desde Mi Cuenta en WooCommerce

En este artículo, vamos a dar continuidad a un tutorial anterior, donde aprendimos a permitir a los administradores de WordPress y a los usuarios a agregar y editar una foto de perfil personalizada desde el panel de administración utilizando el campo custom_profile_picture. Ahora, daremos un paso más y configuraremos el sistema para que los usuarios puedan subir o cambiar su foto de perfil desde la sección «Mi cuenta» en WooCommerce.

Al igual que en el caso anterior, utilizaremos el campo custom_profile_picture para almacenar la URL de la imagen en los metadatos del usuario. Esto significa que si un usuario sube o actualiza su foto de perfil desde «Mi cuenta», esos cambios también serán visibles en la administración, y viceversa. Además, implementaremos una función que sustituya la imagen de Gravatar por esta nueva foto personalizada.

Pasos:

1. Permitir a los usuarios subir su foto de perfil personalizada desde la sección «Mi cuenta» en WooCommerce.
2. Guardar la URL de la foto en el metacampo custom_profile_picture del usuario.
3. Asegurar que los cambios realizados por el usuario se reflejen en el panel de administración y viceversa.
4. Reemplazar la imagen predeterminada de Gravatar por la foto personalizada del usuario en todo el sitio.

Cómo Funciona el Proceso?

El sistema que implementamos consta de varias partes:

1. Formulario en la Sección «Mi Cuenta»: Creamos un formulario dentro del escritorio de «Mi cuenta» en WooCommerce. Este formulario permite a los usuarios cargar una imagen desde su dispositivo, ver una vista previa de su foto de perfil actual o una imagen predeterminada si no han subido ninguna foto.
2. Manejo de Subida de Archivos: Cuando el usuario sube una imagen, esta es procesada y validada. Si el archivo cumple con los requisitos, se guarda en la biblioteca de medios de WordPress y la URL se almacena en el metacampo custom_profile_picture asociado al usuario.
3. Sincronización Bidireccional: Los cambios realizados desde «Mi cuenta» son visibles en el panel de administración. Del mismo modo, si un administrador actualiza la foto de perfil desde el backend, los usuarios verán estos cambios reflejados en su cuenta.
4. Reemplazo de Gravatar: Sustituimos la imagen predeterminada de Gravatar con la foto personalizada almacenada en custom_profile_picture. Si un usuario no tiene una foto personalizada, el sistema utiliza la imagen de Gravatar como respaldo.

Detalles del Proceso

Formulario en «Mi Cuenta»

En la sección «Mi cuenta» de WooCommerce, se añade un formulario con un campo de carga de archivos y una vista previa de la foto de perfil actual. Este formulario incluye un botón para guardar los cambios, lo que permite a los usuarios actualizar su imagen de manera intuitiva. La vista previa de la imagen cambia automáticamente después de que se guarda una nueva foto.

Manejo de Subida y Almacenamiento de la Imagen

Cuando el usuario sube una imagen, el sistema valida el archivo para asegurarse de que sea una imagen válida y cumpla con los requisitos establecidos (formato, tamaño, etc.). Si la imagen es aceptada, se sube a la biblioteca de medios de WordPress y se obtiene la URL de acceso a la imagen. Esta URL se almacena en el metacampo personalizado del usuario, asegurando que la foto quede vinculada a su cuenta.

Sincronización con el Administrador

El campo custom_profile_picture permite la sincronización entre el front-end y el back-end. Si un administrador cambia la foto desde el panel de control, el usuario verá este cambio reflejado al acceder a «Mi cuenta». Por otro lado, cualquier cambio realizado por el usuario desde el escritorio de WooCommerce también será visible en el panel de administración.

Reemplazo de Gravatar

En lugar de utilizar Gravatar como proveedor de la foto de perfil, el sistema verifica si existe una URL personalizada en el metacampo custom_profile_picture. Si está disponible, esta imagen se utiliza como avatar en todo el sitio. Si no, se muestra la imagen predeterminada de Gravatar, asegurando una transición fluida para los usuarios que no han subido su propia foto.

Ventajas del Sistema

1. Personalización Mejorada: Los usuarios tienen el control de su foto de perfil, lo que mejora la experiencia del usuario y refuerza la identidad personal en el sitio.
2. Sincronización Total: Los cambios realizados en cualquier parte del sistema se reflejan tanto en el front-end como en el back-end, garantizando consistencia y facilidad de gestión.
3. Sustitución de Gravatar: La posibilidad de usar una foto personalizada permite prescindir de Gravatar y ofrece mayor control sobre la imagen de perfil.
4. Integración Nativa con WordPress: Utilizar los metadatos de usuario y la biblioteca de medios de WordPress asegura un rendimiento óptimo y compatibilidad con futuras actualizaciones.

Con este sistema, hemos extendido la funcionalidad del campo custom_profile_picture para que los usuarios puedan gestionar su foto de perfil desde «Mi cuenta» en WooCommerce. Al permitir sincronización bidireccional entre el front-end y el panel de administración, garantizamos una experiencia fluida y consistente para los usuarios y administradores.

Además, sustituir Gravatar con una foto personalizada refuerza la identidad visual del usuario en todo el sitio. Este enfoque no solo mejora la experiencia del usuario, sino que también incrementa las posibilidades de personalización y profesionalismo en tu sitio WordPress. Si quieres llevar tu plataforma al siguiente nivel, este es un excelente punto de partida.

El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS. También puedes crear tu propio plugin con unos simples pasos.

// Agregar el campo de foto de perfil en el Escritorio de Mi Cuenta
add_action('woocommerce_account_dashboard', 'agregar_campo_foto_perfil_escritorio');
function agregar_campo_foto_perfil_escritorio() {
    $user_id = get_current_user_id();
    $profile_picture = get_user_meta($user_id, 'custom_profile_picture', true);

    ?>
    <h3><?php _e('Foto de Perfil', 'text-domain'); ?></h3>
    <form id="profile-picture-form" method="post" enctype="multipart/form-data" style="margin-bottom: 20px;">
        <p>
            <label for="custom_profile_picture"><?php _e('Sube tu foto de perfil:', 'text-domain'); ?></label>
            <input type="file" name="custom_profile_picture" id="custom_profile_picture" accept="image/*" />
        </p>
        <p>
            <img id="profile-picture-preview" src="<?php echo esc_url($profile_picture ? $profile_picture : wc_placeholder_img_src()); ?>" alt="<?php _e('Tu foto de perfil', 'text-domain'); ?>" style="width: 100px; height: 100px; border-radius: 50%; margin-top: 10px;" />
        </p>
        <p>
            <button type="button" id="save-profile-picture" class="button"><?php _e('Guardar Cambios', 'text-domain'); ?></button>
        </p>
        <?php wp_nonce_field('save_custom_profile_picture', 'custom_profile_picture_nonce'); ?>
    </form>

    <script>
        document.getElementById('save-profile-picture').addEventListener('click', async function () {
            const form = document.getElementById('profile-picture-form');
            const formData = new FormData(form);
            formData.append('action', 'save_custom_profile_picture'); // Agregar el campo de acción necesario

            const saveButton = this;
            saveButton.innerText = '<?php _e('Guardando...', 'text-domain'); ?>';
            saveButton.disabled = true;

            try {
                const response = await fetch('<?php echo admin_url('admin-ajax.php'); ?>', {
                    method: 'POST',
                    body: formData,
                });

                const result = await response.json();
                if (result.success) {
                    // Actualizar la imagen de vista previa
                    document.getElementById('profile-picture-preview').src = result.data.new_picture_url;
                    alert('<?php _e('Tu foto de perfil se ha actualizado correctamente.', 'text-domain'); ?>');
                } else {
                    alert(result.data.message || '<?php _e('Hubo un error al guardar tu foto.', 'text-domain'); ?>');
                }
            } catch (error) {
                alert('<?php _e('Error al comunicarse con el servidor.', 'text-domain'); ?>');
            }

            saveButton.innerText = '<?php _e('Guardar Cambios', 'text-domain'); ?>';
            saveButton.disabled = false;
        });
    </script>
    <?php
}

// Manejar la subida de la foto a través de AJAX
add_action('wp_ajax_save_custom_profile_picture', 'guardar_campo_foto_perfil_ajax');
function guardar_campo_foto_perfil_ajax() {
    // Verificar el nonce para seguridad
    if (!isset($_POST['custom_profile_picture_nonce']) || !wp_verify_nonce($_POST['custom_profile_picture_nonce'], 'save_custom_profile_picture')) {
        wp_send_json_error(['message' => __('Error de seguridad, inténtalo de nuevo.', 'text-domain')]);
    }

    // Verificar si se subió un archivo
    if (!isset($_FILES['custom_profile_picture']) || empty($_FILES['custom_profile_picture']['name'])) {
        wp_send_json_error(['message' => __('Por favor, selecciona una imagen para subir.', 'text-domain')]);
    }

    // Manejar la subida del archivo
    $uploaded_file = $_FILES['custom_profile_picture'];
    $upload = wp_handle_upload($uploaded_file, ['test_form' => false]);

    if (isset($upload['url'])) {
        // Guardar la URL de la imagen en los metadatos del usuario
        $user_id = get_current_user_id();
        update_user_meta($user_id, 'custom_profile_picture', esc_url($upload['url']));

        wp_send_json_success(['new_picture_url' => esc_url($upload['url'])]);
    } else {
        wp_send_json_error(['message' => __('Error al subir la imagen, verifica el formato o tamaño.', 'text-domain')]);
    }
}

// Reemplazar la foto de Gravatar con la foto personalizada
add_filter('get_avatar', 'reemplazar_avatar_personalizado', 10, 6);
function reemplazar_avatar_personalizado($avatar, $id_or_email, $size, $default, $alt, $args) {
    $user = false;

    if (is_numeric($id_or_email)) {
        $user = get_user_by('id', $id_or_email);
    } elseif (is_object($id_or_email)) {
        if (!empty($id_or_email->user_id)) {
            $user = get_user_by('id', $id_or_email->user_id);
        }
    } elseif (is_email($id_or_email)) {
        $user = get_user_by('email', $id_or_email);
    }

    if ($user && is_object($user)) {
        $custom_avatar = get_user_meta($user->ID, 'custom_profile_picture', true);
        if ($custom_avatar) {
            $avatar = '<img src="' . esc_url($custom_avatar) . '" alt="' . esc_attr($alt) . '" class="avatar avatar-' . esc_attr($size) . ' photo" style="width:' . esc_attr($size) . 'px; height:' . esc_attr($size) . 'px; border-radius: 50%;">';
        }
    }

    return $avatar;
}

Lenguaje del código: PHP (php)

Nos vemos en el siguiente tutorial. Un saludo.