En la tercera clase del curso de creación de plugins freemium para WordPress con ChatGPT vamos a bloquear la nueva opción de pago que hemos creado.
Lo haremos dándole un aspecto difuminado para que solo la puedan usar los usuarios premium, y también añadiremos el botón que enlazará al checkout. Ahora que tenemos la nueva funcionalidad operativa, vamos a bloquearla a través de código. Nuestro objetivo es que el usuario vea que la primera opción se puede usar sin restricción y que debajo hay otra opción que se muestra en gris y que, aunque hagamos clic en ella, no se activa.
Para que se entienda que esta herramienta es de pago, pondremos un botón azul justo debajo que ponga el nombre del plugin seguido de la palabra «Premium» haciendo entender que hay que hacer clic en él para desbloquearlo ¡Vamos a ver cómo se consigue todo esto!
¡Fantástico! Ya tenemos el diseño aplicado y funciona perfectamente. El bloqueo de la opción premium no solo se muestra, sino que también se ejecuta. Es decir, la opción está en gris y no funciona.
Vamos dando paso a paso para que nuestro asistente en programación ChatGPT no colapse y pueda seguir nuestras instrucciones. De esta forma vamos validando cada detalle y viendo en tiempo real que se aplica correctamente y que no rompemos nada por el camino.
Para conseguir que todos tengamos el plugin en el mismo punto, vamos a realizar los siguientes pasos. Primero, redactaremos el prompt siguiendo las indicaciones de la clase para bloquear la opción premium. Luego, copiaremos y pegaremos el código js en el lugar correspondiente y guardaremos los cambios realizados.
Después, añadiremos el nuevo archivo CSS y copiaremos el código necesario en él. A continuación, aplicaremos los cambios y veremos el resultado en la página de edición. Una vez realizado esto, redactaremos otro prompt para añadir el botón Premium. Finalmente, ajustaremos el JS y CSS a los nuevos cambios realizados.
Si todo ha ido bien deberíamos ver la opción de pago en gris y bloqueada y el botón para hacerse premium debajo y en azul. Una vez hayamos entendido el funcionamiento del código podemos hacer los reajustes necesarios para que quede a nuestro gusto.
Ya sabéis que si tenéis cualquier duda, podéis contactar con nosotros a través del formulario en la intranet. ¡Hasta la próxima clase!