Hola Rafael.
He visitado la web y, aunque, no cabo de entender del todo el formulario, te propongo esto:
1. Atributos de datos personalizados (Data Attributes):
- ¿Qué son?
- Los atributos de datos personalizados son atributos HTML que te permiten adjuntar datos personalizados a cualquier elemento HTML. En tu caso, los usaremos para almacenar el nombre del cuadro directamente en el elemento de la imagen.
- Implementación:
- Edita las imágenes:
- En Elementor, edita cada imagen de los cuadros.
- En la pestaña «Avanzado» de la configuración de la imagen, busca la sección «Atributos».
- Añade un atributo personalizado:
- Clave:
data-nombre-cuadro
- Valor: El nombre exacto del cuadro (ej. «Noche estrellada», «Guernica», etc.).
- Ajusta el formulario emergente:
- Edita el formulario emergente que se abre al hacer clic en un cuadro.
- Añade un campo oculto al formulario. Este campo almacenará el nombre del cuadro.
- Tipo de campo: Oculto.
- ID: (ej. «nombre-cuadro-seleccionado»)
- Añade JavaScript:
- Necesitarás añadir código JavaScript a tu página para capturar el nombre del cuadro del atributo de datos y colocarlo en el campo oculto del formulario.
- Dentro de Elementor busca la sección HTML, o un plugin del tipo «Header Footer Code Manager».
- Añade el siguiente código Javascript:
<script>
document.addEventListener('DOMContentLoaded', function() {
var imagenesCuadros = document.querySelectorAll('.elementor-image'); // Ajusta el selector si es necesario
imagenesCuadros.forEach(function(imagen) {
imagen.addEventListener('click', function() {
var nombreCuadro = this.dataset.nombreCuadro;
document.getElementById('nombre-cuadro-seleccionado').value = nombreCuadro; // Asegúrate de que el ID coincide
});
});
});
</script>
Explicación del código:
- El código espera a que la página se cargue completamente (
DOMContentLoaded).
- Selecciona todas las imágenes de los cuadros (asegúrate de que el selector
.elementor-image coincida con la clase de tus imágenes).
- Añade un evento de «clic» a cada imagen.
- Cuando se hace clic en una imagen, recupera el valor del atributo
data-nombre-cuadro.
- Coloca ese valor en el campo oculto del formulario.
NO he podido probar el código así que, antes de implementar esta solución en el sitio en producción, hazlo en una copia de pruebas. Y recuerda hacer siempre una copia de seguridad del sitio antes de hacer cualquier cambio importante.
Prueba y nos cuentas.
Saludos.
Hola, Jose Ramón Bernabeu (@jrberguill).
Muchísimas gracias por tomarte el tiempo para responderme. Me parece bastante lógica tu solución, pero tengo un inconveniente, y es que la solución no puede ser manual, por que? 1. son muchísimos cuadros y esto implicaría mucho tiempo. 2. la persona que subirá los cuadros no es desarrollador, es una persona asignada por mi cliente para hacer este trabajo y yo le he explicado como subir cada cuadro.
Te comento, la pagina cuenta con una tienda (https://vitololi.com/tienda-virtual/) en donde mi cliente vende sus cuadros con medidas y especificaciones ya estandarizadas, pero también cuenta con un área de servicios (https://vitololi.com/servicios/) que se divide en 3 tipos de servicios Geeclays, híbridos y personalizados, esta área es mas especifica, es para que los clientes puedan solicitar cuadros intervenidos con detalles a su gusto. La tienda son productos comunes y corrientes de woocommerce, Pero esta área de servicios, específicamente Geeclays e híbridos están configurados con Advanced Custon Field, la persona designada para subir todo el contenido, al entrar al escritorio de wordpress puede ver un área para cada uno de estos 2 servicios como si fueran post, y en cada uno de estos post puede introducir las especificaciones predefinidas de cada cuadro, entre ellas el código que representa a cada uno. Lo que yo necesito es que cuando el usuario pinche en alguno de los cuadros y le salga el formulario emergente, el sistema automáticamente reconozca, bien sea el nombre del cuadro o el código del cuadro, y que cuando rellene el formulario con los datos requeridos y lo envié, le llegue un correo a mi cliente con todos estos datos, incluyendo el nombre o el código del cuadro en cuestión, para que el usuario no tenga que introducir el nombre del cuadro manualmente en el formulario.
Nota> si tienes alguna otra solución, tomando en cuenta lo que te comento, estaría inmensamente agradecido.
Hola Rafael.
Se puede hacer lo mismo con un campo de ACF.
La idea general es obtener el campo corrrespondiente mediante Javascript y pasarlo a un campo del formulario. Este puede ser un campo oculto que almacene el dato e incluirlo en el contenido del correo electrónico para que tu cliente reciba el código del cuadro junto con los demás datos del formulario.
Saludos.
