Me gusta Divi y me gusta crear sitios espectaculares con su constructor, llevo muchos años diseñando páginas web propias y para clientes con la ayuda de sus módulos y configuraciones sin apenas programar, pero siempre hay algún momento en el que se requiere conocimientos avanzados de los que no dispongo. Como el caso que quiero mostrar, cambiar la visibilidad de módulos al presionar un botón.
Como diseñador siempre he requerido de la ayuda de un programador para realizar estos efectos, pero a día de hoy, para estos pequeños retoques podemos hacer uso de la "IA", en concreto de la inteligencia artificial que nos proporciona "ChatGPT".
En un artículo y vídeo anterior ya os mostré lo fácil que es conseguir que ChatGPT trabaje para nosotros para configurar un texto que cambiaba de forma dinámica y constante, en este caso lo volveremos a utilizar.
Cómo crear el código para cambiar la visibilidad de módulos en Divi al pulsar un botón
Primero plantearemos el problema para luego resolverlo. Quiero cambiar unos precios creados con módulos individuales de texto, que se muestran sin impuestos, por precios con impuestos cuando se pulsa un botón. Y que la acción se repita a la inversa cuando se vuelva a presionar el mismo botón.
Como podéis ver, la configuración de los módulos de Divi no puede ser más sencilla. Y en cuestión de minutos tengo configurados unos Packs de precios sin haber programado nada. Si quieres hacer lo mismo, te recomiendo que adquieras el tema Divi suscribiéndote a Elegant Themes, y si puedes hacerlo de por vida (lifetime), mejor porque te olvidas de los pagos recurrentes.
La inteligencia artificial de ChatGPT
Hay que perder el miedo a la IA, muchos se asustan de lo que pueda llegar a hacer en un futuro, pero no deja de ser una herramienta más a nuestra disposición, y usada correctamente es una gran ayuda.
ChatGPT es una aplicación que ha recopilado toda la información que hay en internet, y la gestiona de forma que puede responder casi a cualquier consulta, pero hay que saber realizar las preguntas de forma correcta, concretando poco a poco lo que necesitamos. Pocas veces he conseguido un buen resultado a la primera.
Para este caso las preguntas y situaciones a las que he expuesto a ChatGPT han sido las siguientes:
- Compórtate como un diseñador de páginas web que utiliza el constructor Divi para crear sitios.
- Crea un código que permita cambiar la visibilidad de tres módulos de Divi por otros tres diferentes y que esta acción se pueda repetir en bucle al presionar un botón.
- El motivo es conseguir que unos productos que muestran el precio sin impuestos, al pulsar el botón muestre los precios con impuestos.
- El código debe cumplir con las siguientes condiciones:
- 1) Serán tres módulos individuales diferentes los que tienen que cambiar por otros tres distintos simultáneamente
- 2) Al cargar la página solo se mostrarán los precios sin impuestos
- 3) El botón debe cambiar el texto inicial que es "Mostrar precios con impuestos" por otro cada vez que se pulse que será "Mostrar precios sin impuestos".
- 4) La página no debe recargarse ni refrescarse al pulsar el botón
- 5) Quiero el código en JavaScript y jQuery junto con el módulo de código de Divi
El resultado obtenido me indicó los cambios que debía realizar y el código que tenía que añadir en la página que estoy creando.
Si habéis visto el video, comprobaréis que el resultado arrojado es algo diferente al que está publicado en este artículo, y eso es porque ChatGPT hace lo que quiere con la información que tiene, y esperar el mismo resultado dos veces puede ser complicado.
El caso es que las dos opciones son casi parecidas y funcionan igual.
Cambios en los módulos de Divi
Hay que crear los módulos que sustituirán a los iniciales cuando estos se oculten al presionar el botón, y añadir un identificador "id" diferente en cada módulo desde la pestaña "Avanzado".
Los id CSS que he añadido a cada módulo son los siguientes:
- Para los módulos de precio sin impuestos: "precio1_sin", "precio2_sin", "precio3_sin".
- Para los módulos de precio con impuestos: "precio1_con", "precio2_con", "precio3_con".
En el botón también hay que añadir un id CSS propio para poder conectar luego con el código el cambio de los módulos:
Para el módulo del botón el id es: "togglePrecios".
Colocar el código del script que crea la acción
Aunque es un código muy corto, lo mejor es habituarnos a colocar todo lo que no se ve al final de la página, así garantizamos que la carga sea más rápida para los elementos visibles y no tengan que esperar a que el script se cargue para continuar mostrando elementos.
Creamos una sección con una fila y un módulo de código a los que eliminamos todos los márgenes para que no ocupe sitio. Y dentro pegamos el código que debe estar encerrado entre las etiquetas "script".
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <script> jQuery(document).ready(function($){ // Ocultar los precios con impuestos al cargar la página $('#precio1_con, #precio2_con, #precio3_con').hide(); // Añadir evento de clic al botón $('#togglePrecios').on('click', function(event) { // Prevenir el comportamiento predeterminado del botón event.preventDefault(); // Alternar la visibilidad de los precios $('#precio1_sin, #precio2_sin, #precio3_sin').toggle(); $('#precio1_con, #precio2_con, #precio3_con').toggle(); // Cambiar el texto del botón if ($(this).text() === 'Mostrar precios con impuestos') { $(this).text('Mostrar precios sin impuestos'); } else { $(this).text('Mostrar precios con impuestos'); } }); }); </script> |
Guardamos todos los cambios y salimos del constructor para comprobar que funciona, como veréis, y si no tenéis bloqueado la carga de JavaScript, funciona perfectamente.
Únete a los más de 970.000 usuarios y obtén acceso a Divi, Extra, Bloom, Monarch y más. Cree sitios web ilimitados. Forma parte de la comunidad de WordPress más poderosa de internet
¿Todavía no eres miembro?
Disfruta de una garantía de devolución de 30 para recuperar tu dinero,
¡unirse hoy a Divi no supone ningún riesgo!
Descargo de responsabilidad : Existe una relación publicitaria con y Elegant Themes por la que genero una pequeña comisión si adquieres el/los producto/-os por medio de los enlaces de esta página. Gracias a ello puedo ofrecerte ofertas como estas, a ti no te supone ninguna carga adicional económica ni compromiso alguno y a mí me sirve para tomarme un café. MUCHAS GRACIAS
Tal vez te interese...
Carrusel a pantalla completa en WordPress con Divi
Comprar Divi con Descuento en Cyber Monday: La Oferta del Año en Elegant Themes
Añadir deslizador de diapositivas en DIVI adaptable
La mejor forma de personalizar la página de producto de Woocommerce con Divi Builder
3 opciones para corregir WordPress instalado en una carpeta
0 comentarios