formularios – danisanchez.net

Crear un select con buscador integrado, gracias a select2

dani.sanchez — Fri, 22 Mar 2019 09:16:13 +0000

Cuántas veces hemos generado formularios con campos selects interminables (por ejemplo un listado de clientes, de países, de productos…). Navegar a través de un select de varios cientos de elementos es algo tedioso que seguramente tu cliente o empresa te pedirá solucionar.

Lo más óptimo sería ofrecer un campo de búsqueda dentro del propio select aprovechando jQuery y algo de CSS, lo que nos tocaría unas cuantas horas de investigar y programar.

Afortunadamente existe Select2, una librería pensada precisamente para esto, insertar un campo de búsqueda dentro del campo select que deseemos y que además sea sencillo de implementar.

Instalación de select2

Para empezar vamos a llamar a los dos archivos (css y js) necesarios para ejecutar el script y que tendrán que llamarse dentro del de nuestra página.

Para WordPress tendremos que integrarlos a través de una función que podemos llamar en nuestro archivo de funciones (functions.php):

function buscador_en_select(){
    wp_enqueue_style('estilos-select', 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css', array(),'1.0');
    wp_enqueue_script('jquery'); 
    wp_enqueue_script('script-select', 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js', array('jquery'), '1.0');
    wp_enqueue_script('mi-script', get_template_directory_uri().'/js/mi-script.js', array('script-select'),'1.0');
}
add_action('wp_enqueue_scripts', 'buscador_en_select');

Como véis, hemos llamado también a jQuery, por si no está ya implementado en el tema y además hemos llamado a mi-script, que es un archivo que crearemos y subiremos al directorio del tema activo en la carpeta js (la crearemos si no existe).

Mi Script

Para integrar select2 crearemos un pequeño script en un archivo al que llamaremos mi-script.js y que guardaremos en la ruta /wp-content/themes/tema-activo/js/mi-script.js.

En él insertaremos el siguiente código:

jQuery(document).ready(function($){
    $(document).ready(function() {
        $('.mi-selector').select2();
    });
});

La línea $(‘mi-selector’).select2() indica que a todos los select que especifiquemos con la clase ‘mi-selector’, se les aplicará la funcionalidad de integrar un buscador.

Por ejemplo:

Se vería así:

También funciona perfecto con campos de selección múltiple, solo tenemos que especificarlo en el select, nombrándolo con corchetes (array) y especificando:

multiple="multiple"

, como puedes ver en el siguiente campo:



Selecciona una fecha: 



Cada navegador tiene su particular calendario, que como base, ayuda a que el usuario inserte una fecha correctamente, aunque de cara a funcionalidades más avanzadas están muy limitados.



Por ejemplo, no podemos enlazar dos campos de tipo fecha para que se comuniquen entre sí. Imagina que quieres incorporar un sistema de reserva de apartamentos en tu web, y quieres que cuando el usuario inserte la fecha de entrada, automáticamente la fecha de salida parta del día siguiente a la fecha de entrada, o que no se pueda escoger como fecha de salida, una fecha anterior a la de entrada. Con los calendarios basícos integrados por los navegadores actuales esto no es posible.



Pero con Datepicker si.



Para todo lo que requiera de una avanzada programación de fechas, Datepicker sigue siendo una excelente herramienta, y en este post vamos a ver cómo integrarlo en WordPress y cómo hacer las configuraciones más útiles dentro de cualquier sistema de reservas.



1. Descargar Datepicker



El primer paso es acudir a la web de descarga de Datepicker y descargar la última versión estable, que en el momento de escribir este post es la 1.12.1.



Tras descomprimir el ZIP, los archivos que nos interesa son:



jquery-ui.css
jquery-ui.structure.css
jquery-ui.theme.css
jquery-ui.js
Además, crearemos un archivo .js para nuestras propias funciones JavasScript, al que llamaremos funciones.js.



Y la carpeta images que tendremos que subir al mismo directorio que los archivos CSS.







Mi recomendación es subirlos a la misma carpeta donde se encuentra el tema activo de WordPress, es decir /wp-content/themes/tema_activo/



Y dentro crear, si no existen, dos subdirectorios, css y js.



/wp-content/themes/tema_activo/css/ donde subiremos los archivos CSS y la carpeta images de Datepicker.



/wp-content/themes/tema_activo/js/ donde subiremos el archivo .js de Datepicker y nuestro archivo funciones.js.



De tal forma que la estructura de archivos de Datepicker quede así en nuestro proyecto:



wp-content/themes/tema_activo/css/jquery-ui.css
wp-content/themes/tema_activo/css/jquery-ui-theme.css
wp-content/themes/tema_activo/css/jquery-ui.structure.css
wp-content/themes/tema_activo/css/images/
wp-content/themes/tema_activo/js/jquery-ui.js
wp-content/themes/tema_activo/js/funciones.js



2. Declarar los archivos de Datepicker en WordPress



Una vez subidos todos los archivos, necesitamos declararlos en WordPress para que este los reconozca. Lo normal es hacerlo dentro del archivo de funciones (functions.php) del tema activo, pero si es un tema que se actualiza con frecuencia, también podemos crear nuestro propio plugin de funciones y declararlo ahí de la misma forma:







3. Configuraciones básicas de Datepicker



Para personalizar nuestro calendario, nos vamos a dirigir a nuestro archivo funciones.js y escribimos:



$ = jQuery.noConflict();
$(document).ready(function(){
    $(function(){
        $("#datepicker1").datepicker();
    });
});



El identificador #datepicker1 es el que tenemos que usar en el campo input donde queremos que aparezca el calendario, por ejemplo:







Imprimiría:







Hasta aquí no difiere mucho de la funcionalidad del calendario integrado por los propios navegadores, además por defecto está inglés, tanto las cadenas de texto como el hecho de que la semana comienza en Domingo.



Vamos a comenzar definiendo las etiquetas para que aparezca en español. Para ello tenemos que añadir una serie de parámetros a la función datepicker(), tal y como se muestra en el siguiente código:



$("#datepicker1").datepicker({
   closeText: 'Cerrar',
   prevText: '< Ant',
   nextText: 'Sig >',
   currentText: 'Hoy',
   monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
   monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
   dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
   dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
   dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'], 
});



Así conseguimos que nuestro calendario ahora se vea en español:







Pero nos falta un detalle más, y es hacer que la semana comience en Lunes en lugar de Domingo, para ello añadimos el parámetro:



firstDay: 1



$("#datepicker1").datepicker({
closeText: 'Cerrar',
   prevText: '< Ant',
   nextText: 'Sig >',
   currentText: 'Hoy',
   monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
   monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
   dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
   dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
   dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'], 
   firstDay: 1, //Hace que la semana comience en Lunes
});



Y aquí el resultado:







Otra opción interesante es que no se pueda seleccionar un día anterior a la fecha actual, es decir, si hoy estamos a 10 de Diciembre de 2018, el calendario no nos va a permitir seleccionar una fecha anterior, para ello añadimos el parámetro:



minDate: 0



$("#datepicker1").datepicker({
closeText: 'Cerrar',
   prevText: '< Ant',
   nextText: 'Sig >',
   currentText: 'Hoy',
   monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
   monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
   dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
   dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
   dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'], 
   firstDay: 1, //Hace que la semana comience en Lunes
   minDate: 0, //Hace que no se puedan seleccionar fechas pasadas
});



Fijaos cómo los días anteriores aparecen en un color más transparente, indicando que no se pueden seleccionar:







Respecto al formato actual de la fecha, si seleccionamos un día en concreto veremos que el formato está definido en «mes/dia/año»:







Si queremos modificar el formato de fecha usamos el parámetro:



dateFormat: «dd/mm/yy»



$("#datepicker1").datepicker({
closeText: 'Cerrar',
   prevText: '< Ant',
   nextText: 'Sig >',
   currentText: 'Hoy',
   monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
   monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
   dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
   dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
   dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'], 
   firstDay: 1, //Hace que la semana comience en Lunes
   minDate: 0, //Hace que no se puedan seleccionar fechas pasadas
   dateFormat: "dd/mm/yy", //Establece el formato de fecha
});



Cuyo resultado sería:







Otra opción que podría resultarnos de interés es la posibilidad de cambiar el mes y el año directamente, para ello usaríamos los parámetros:



changeMonth: true,
changeYear: true,



$("#datepicker1").datepicker({
closeText: 'Cerrar',
   prevText: '< Ant',
   nextText: 'Sig >',
   currentText: 'Hoy',
   monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
   monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
   dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
   dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
   dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'], 
   firstDay: 1, //Hace que la semana comience en Lunes
   minDate: 0, //Hace que no se puedan seleccionar fechas pasadas
   dateFormat: "dd/mm/yy", //Establece el formato de fecha
   changeMonth: true, //Permite seleccionar el mes directamente
   changeYear: true, //Permite seleccionar el año directamente
});



El resultado:







4. Enlazando dos Datepickers



Hasta aquí hemos realizado configuraciones básicas, sobre todo para adaptar Datepicker al sistema de calendario español. Ahora veremos algo realmente interesante que consiste en enlazar dos calendarios Datepicker, de forma que cuando se seleccione una fecha en el Datepicker1, el Datepicker2 impida seleccionar una fecha anterior, muy interesante para sistemas de reservas.



Para ello vamos a declarar un segundo Datepicker al que llamaremos #datepicker2, con los mismos parámetros que el #datepicker1.



$("#datepicker2").datepicker({
closeText: 'Cerrar',
   prevText: '< Ant',
   nextText: 'Sig >',
   currentText: 'Hoy',
   monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
   monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
   dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
   dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
   dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'], 
   firstDay: 1, //Hace que la semana comience en Lunes
   minDate: 0, //Hace que no se puedan seleccionar fechas pasadas
   dateFormat: "dd/mm/yy", //Establece el formato de fecha
   changeMonth: true, //Permite seleccionar el mes directamente
   changeYear: true, //Permite seleccionar el año directamente
});



Ahora añadimos como parámetro al #datepicker1 el siguiente código:



onClose: function (selectedDate){
    $("#datepicker2").datepicker("option", "minDate", selectedDate);
}



Y como parámetro del #datepicker2 el siguiente código:



onClose: function (selectedDate){
    $("#datepicker1").datepicker("option", "maxDate", selectedDate);
}



Recuerda añadir una coma (,) al final si vas a seguir añadiendo parámetros.



Creamos un nuevo input:







Y aquí el resultado, si seleccionamos como fecha de entrada el 25 de Diciembre, veremos que en fecha de salida no podemos seleccionar días anteriores al 25 de Diciembre:







Y ya para finalizar veremos una función para deshabilitar rangos de fechas, es decir, imagina que en tu web de reserva de apartamentos quieres que cuando el usuario despligue el calendario aparezcan bloqueados todos los días que esté reservado.



Para ello, previamente, tendríamos que hacer una consulta a la base de datos para traernos las fechas de entrada y salida de cada reserva y guardarlas en un vector o array:



Para la función siguiente necesitamos recoger las fechas de la base de datos y pasarlas a formato «mes/día/año».



En PHP es fácil:



format('m/d/Y');
?>



Cada grupo de fechas entrecomilladas representa un rango (fecha de entrada y fecha de salida), añadimos tantos rangos como reservas haya en la base de datos:



var RangeDates = ["01/10/2019,01/15/2019","01/17/2019,01/24/2019"];
var RangeDatesIsDisable = true;



Este ejemplo tomaría 2 rangos de fechas, compuestos por:



Del 10 de Enero de 2019 al 15 de Enero de 2019.
Del 17 de Enero de 2019 al 24 de Enero de 2019



Pasamos la siguiente función que hará las comprobaciones, desglosando los meses, días y años de cada fecha:



function DisableDays(date){
    var isd = RangeDatesIsDisable;
    var rd = RangeDates;
    var m = date.getMonth();
    var d = date.getDate();
    var y = date.getFullYear();
    for (i = 0; i < rd.length; i++){
        var ds = rd[i].split(',');
        var di, df;
        var m1, d1, y1, m2, d2, y2;
        if(ds.length == 1){
            di = ds[0].split('/');
            m1 = parseInt(di[0]);
            d1 = parseInt(di[1]);
            y1 = parseInt(di[2]);
            if (y1 == y && m1 == (m + 1) && d1 == d) return [!isd];
        }
 else if (ds.length > 1){
            di = ds[0].split('/');
            df = ds[1].split('/');
            m1 = parseInt(di[0]);
            d1 = parseInt(di[1]);
            y1 = parseInt(di[2]);
            m2 = parseInt(df[0]);
            d2 = parseInt(df[1]);
            y2 = parseInt(df[2]);
          if(y1 >= y || y <= y2){
              if ((m + 1) >= m1 && (m + 1) <= m2){
             if (m1 == m2){
                 if (d >= d1 && d <= d2) return [!isd];
                }
 else if(m1 == (m + 1)){
                    if (d >= d1) return [!isd];
                }
 else if(m2 == (m + 1)){
                    if (d <= d2) return [!isd];
                }
 else return [!isd];
              }
          }
        }
    }
    return [isd];
}



Y por último añadimos el parámetro: beforeShowDay: DisableDays, a los dos Datepicker, quedando finalmente ambos así:



$("#datepicker1").datepicker({
    closeText: 'Cerrar',
    prevText: '< Ant',
    nextText: 'Sig >',
    currentText: 'Hoy',
    monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
    monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
    dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
    dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
    dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
    firstDay: 1,
    minDate: 0,
    dateFormat: "dd/mm/yy",
    changeMonth: true,
    changeYear: true,
    beforeShowDay: DisableDays,
    onClose: function (selectedDate){
        $("#datepicker2").datepicker("option", "minDate", selectedDate); 
    }
});
$("#datepicker2").datepicker({
    closeText: 'Cerrar',
    prevText: '< Ant',
    nextText: 'Sig >',
    currentText: 'Hoy',
    monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
    monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
    dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
    dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
    dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
    firstDay: 1,
    minDate: 0,
    dateFormat: "dd/mm/yy",
    changeMonth: true,
    changeYear: true,
    beforeShowDay: DisableDays,
    onClose: function (selectedDate){
        $("#datepicker1").datepicker("option", "minDate", selectedDate);
    }
});



Como se aprecia al desplegar el calendario de fecha de entrada, ambos rangos aparecen deshabilitados:







Esto es solo un extracto de lo que considero es más importante y habitual configurar en cualquier sistema de reservas, pero en la documentación oficial de Datepicker encontrarás más funcionalidades, métodos y parámetros de configuración:







Espero que este post te haya sido de interés y utilidad, si es así no dudes en compartirlo o guardarlo en tus favoritos para futuras consultas.



Nos vemos en el siguiente post!



Cómo añadir un checkbox en el formulario de registro de WordPress para aceptar la política de privacidad
dani.sanchez — Mon, 20 Aug 2018 17:02:34 +0000

Si queremos permitir que cualquier usuario se registre en nuestro sitio web con WordPress, tenemos que añadir de alguna forma el «check» que valide que nuestro usuario ha aceptado los términos y condiciones de la política de privacidad de nuestro sitio web, tal y como obliga el actual RGPD.



Esta casilla de verificación (checkbox) no se encuentra por defecto en el formulario de registro de WordPress.



Lo primero que tenemos que hacer es habilitar el registro de usuarios en los ajustes generales de WordPress, habilitando la casilla Cualquiera puede registrarse.







Luego podemos crear un enlace hacia el formulario de registro utilizando el slug: www.tuweb.com/wp-login.php?action=register



WordPress también ofrece el enlace de registro en el formulario de inicio de sesión:







Una vez accedemos al formulario de registro por defecto de WordPress tenemos los campos para nombre de usuario y dirección de e-mail. Aquí necesitamos añadir la casilla de validación (checkbox) para asegurarnos del consentimiento de políticas de privacidad de nuestro nuevo usuario.







Para añadirla vamos a insertar una nueva función en el archivo functions.php de nuestro tema:



function aceptacion_terminos_registro_wordpress() {
    echo  Acepto los términos y condiciones de la política de protección de datos.";
}
add_action('register_form', 'aceptacion_terminos_registro_wordpress');



Dentro del  sustituimos la almohadilla (#) por la URL donde se encuentre nuestro aviso legal.








Ahora solo nos queda validar que la casilla haya sido activada, por lo que agregamos la siguiente función:



function validar_aceptacion($errors, $sanitized_user_login, $user_email){
    if(empty($_POST['acepto'])){
        $errors->add('acepto_error', __('ERROR: Debes marcar la casilla de aceptación de privacidad.', 'gestionatuweb'));
    }
    return $errors;
}
add_filter('registration_errors', 'validar_aceptacion', 10, 3);



Ahora si intentamos registrarnos sin haber marcado la casilla de aceptación, aparecerá un error que no nos permitirá finalizar el registro y cumpliremos perfectamente con el nuevo RGPD.







Si te ha gustado el artículo, compártelo y ayúdame a difundirlo. Hasta el siguiente post 



Crear un sistema de reservas on-line para WordPress
dani.sanchez — Wed, 19 Jul 2017 12:09:25 +0000





Si tienes que desarrollar una web donde los clientes puedan solicitar una reserva en un día o período de tiempo determinado, necesitas implementar un sistema de reservas. En este artículo veremos un plugin sencillo que te hará la vida más fácil.



Se llama Booking Calendar del desarrollador WpDevArt.







Una vez instalado se nos añadirá un nuevo menú al menú principal de WordPress, Booking Calendar con algunos apartados.



Booking Calendar tiene una versión FREE suficiente para implementar sistemas básicos de reservas, y una versión PREMIUM con algunas funcionalidades más, como la posibilidad de editar el diseño, editar reservas a mano o implementar sistemas de pago on-line. La licencia para un sitio cuesta a día de hoy (17-07-2017) unos 60$, por si os interesa para vuestra web o tenéis que presupuestar el trabajo a un cliente.







El procedimiento es muy sencillo, desde la pantalla principal de Booking Calendar podemos crear nuestros calendarios. Por defecto ya tenemos uno de ejemplo con un shortcode que es lo que tenemos que pegar en la página donde queremos que aparezca el calendario.



Añadir un nuevo calendario.



Vamos a añadir un nuevo calendario haciendo clic en Add Calendar. Vamos a imaginar que estamos desarrollando la web para un Hotel u Hostal y queremos agregar un Calendario de Reservas en la página de habitaciones dobles.



Le damos un título al calendario, seleccionamos el tema (al ser versión FREE solo nos va a dejar usar el tema por defecto), seleccionamos si queremos mostrar  o no un formulario de solicitud de reserva (por defecto a parece el formulario de ejemplo que integra el plugin), y si queremos seleccionar algún extra que podemos configurar más adelante.







Si interactuamos con el calendario, seleccionando por ejemplo un día o un rango de días, aparecerán unas opciones a la derecha:







Set days availability



Desde aquí podemos habilitar o deshabilitar fechas en función de si queremos que estén disponibles para reservar, o indicar que ya están reservas o simplemente indicar que no están disponibles.



Start date y End Date nos marca las fechas que tenemos seleccionadas en el calendario.
Number Available: Podemos indicar cuántas reservas se pueden realizar para los días señalados. (Por ejemplo, podemos tener cinco habitaciones dobles en el hotel y no tenemos que crear un calendario para cada una de ellas, solo indicar cuántas hay disponibles).
Price: Aparecerá el precio para día del calendario.
Las demás opciones se habilitan actualizando a la versión PRO, que no veremos en esta guía.



Para nuestro ejemplo, vamos a indicar que los días señalados están disponibles para reservar y que el coste es de 30,00€ cada uno, quedando el calendario así:







No olvidéis salvar los cambios si abandonáis esta página.



Si queremos hacer alguna modificación en los días editados, como por ejemplo, aumentar el precio de la habitación en fin de semana, o marcar que un día está ocupado porque nos ha entrado un huésped, solo tenemos que marcar el día a modificar y aparecerán de nuevo las opciones para editarlo.



Por ejemplo, marcamos que el día 27 está reservado, y que el precio de las habitaciones en fin de semana es de 40,00€:











Nuestro calendario quedará así:







Apartado Forms



Bien, vamos a pasar a otro apartado dentro de Booking Calendar,  Forms.







Aquí podemos configurar que nuestros calendarios incluyan un formulario de solicitud de reservas para que el cliente pueda marcar las fechas que desea reservar y que sus datos de contacto sean guardados en la solicitud.



Podemos añadir un nuevo formulario o editar el existente:







Los campos por defecto son: nombre, apellido, e-mail, teléfono y mensaje. Podemos expandir las opciones de cada campo dando a la flechita, como por ejemplo cambiar la etiqueta de cada campo por una en español, así como indicar si el campo es obligatorio o no rellenarlo. Si necesitamos crear algún campo más podemos hacer clic en el icono  y añadir el tipo de campo que deseemos. Así quedaría el formulario con las etiquetas de los campos cambiadas:







Otro apartado muy interesante son los Extras, donde podemos configurar servicios adicionales que pueden repercutir en el coste final de la habitación, por ejemplo, un cargo por niño o adulto adicional, por un suplemento de cuna, por conexión WIFI, etc.



Para configurarlo nos dirigimos al apartado Extras:







Por defecto tenemos configurados los extras: Adultos y Niños.



Si desplegamos el extra Adultos, podemos configurar hasta cuántos adultos adicionales permitiría la habitación y el sobrecoste que ocasionaría:







Si no nos interesa añadir tantos, podemos eliminar campos hasta adaptarlo a nuestras necesidades. Lo mismo podemos hacer con la opción de niños.



Aunque si no vamos a permitir alojar a más visitantes de los establecidos en la habitación, podemos eliminar ambos extras y crear uno propio, como por ejemplo, una cuna opcional en caso de que se hospeden una pareja con un bebé.



Añadimos un nuevo extra haciendo clic en el icono y lo llamamos, por ejemplo, cuna opcional:







Indicamos que si se añade una cuna a la habitación, el precio de esta se incrementará en 10,00€, todo esto configurado conforme a nuestras necesidades.



Temas



En el apartado Themes, donde podemos personalizar algunos ajustes de nuestros calendarios:







Hacemos clic en editar el tema. Los ajustes se dividen en varios apartados que veremos a continuación:



Ajuste General







Algunas opciones solo están disponibles si contamos con la versión Pro del plugin. Pero para la versión FREE, entre otras opciones podemos ajustar el formado de fecha que aparecerá en los calendarios, el formato de los días de la semana (completo o abreviado), seleccionar el día en el que comienza la semana (en algunos países la semana comienza en Domingo).



Otra opción interesante es poder deshabilitar días fijos en la semana. Por ejemplo, si nuestro establecimiento cierra los Domingos, podemos hacer que todos los domingos se establezcan por defecto en «No disponible».



Seleccionar múltiples días o un único día. Si el propósito del calendario de reservas es para alojamiento (hoteles, casas rurales, hostales…), es conveniente permitir al usuario poder seleccionar un rango de días, tantos como días quiera hospedarse. Pero si nuestro establecimiento es una peluquería, lo que nos interesa es que el cliente solo escoja un día en concreto.







Establecemos el nombre que queramos darle a los 3 estados posibles dentro del calendario: disponible, reservado y no disponible.







Entre otros ajustes generales, podemos especificar el tipo de moneda con el que trabajaremos:







Notificaciones



En este apartado podremos configurar las notificaciones que serán enviadas por correo electrónico, tanto al administrador del sitio web, como al usuario que está realizando la reserva. Para ello es importante habilitar la opción PHPMailer en caso de que no tengamos configurado un sistema de envío de correo alternativo dentro de nuestro sitio web.



Las notificaciones podrían clasificarse:



– Notificaciones al administrador:



Mensaje de solicitud de reserva recibida.
Mensaje de solicitud de reserva aprobada.



– Notificaciones al usuario:



Mensaje de solicitud de reserva recibida.
Mensaje de solicitud de reserva aprobada.
Mensaje de solicitud de reserva cancelada.



Por ejemplo, si queremos crear una notificación cada vez que un usuario envíe una solicitud de reserva podemos configurarla así de fácil (importante que Notify on book request esté activado):







O si queremos enviar una notificación para informar de que hemos aprobado su solicitud de reserva: (importante que Notify when reservation is approved esté activada):







Textos por defecto



En este apartado podemos cambiar alguno de los textos por defecto del plugin para adaptarlos a nuestro idioma y necesidades. También nos da a elegir usar directamente el archivo de traducción .mo en caso de estar disponible (si no sabéis traducir archivos .mo, aconsejo modificar los textos directamente en este apartado).







Terminando nuestro sistema de reservas.



Para insertar el calendario en una página de nuestro sitio web, primero nos dirigimos al listado de calendarios que tenemos creados y copiamos su Shortcode:







Nos dirigimos a la página donde queremos insertarlo y lo pegamos:







Y aquí tenemos el resultado:







Ahora si un usuario desea reservar por ejemplo el fin de semana del 29-30 de Julio, solo tiene que seleccionar los días en el calendario y rellenar el formulario con sus datos:







En el momento que pulse en Reservar ahora, si hemos activado las notificaciones, se enviará un aviso al administrador para que compruebe el panel de control de reservas y decida si aprueba o cancela la solicitud. Así mismo también se enviará una notificación al usuario si la hemos configurado previamente.



Vamos al apartado Reservations dentro de Booking Calendar y veremos que tenemos una nueva solicitud para el calendario de Habitación doble:







Para ver los detalles de la reserva seleccionamos el calendario Habitación doble y expandimos la pestaña de Details dentro de Reservation information:







Desde aquí podemos aprobar o rechazar la solicitud.



Si todo es correcto le datos a Approve y en ese momento, si hemos configurado las notificaciones, se enviará un e-mail al cliente confirmando su solicitud y automáticamente los días reservados se reflejarán en el calendario en rojo:







Como nota final, decir que hay algunos aspectos que no se han podido configurar desde las opciones del plugin, como por ejemplo, el nombre de los meses del año o los días de la semana que siguen apareciendo en inglés (o yo no he dado con la opción).



Para cambiar esto, os aconsejo editar directamente el archivo de traducción del plugin. Podéis echar un vistazo a un artículo que escribí hace tiempo sobre Loco Translate, que permite traducir fácilmente plugins y temas de WordPress.



Espero que os haya resultado interesante y si os ha gustado lo compartáis y dejéis vuestros comentarios.



¡Un saludo!



Evita el SPAM en tus formularios web con reCAPTCHA y Ninja Forms
dani.sanchez — Tue, 21 Jun 2016 06:40:12 +0000

Siempre estaremos expuestos a los molestos robots de SPAM que se dedican a rastrear formularios por toda la RED para enviar su publicidad a través de nuestros formularios web.



Peores son los que atacan formularios de registro intentando los temidos ataques de SQL Injection, intentando inyectar código malicioso, ya que los formularios de registro suelen conectar con la base de datos para guardar la información.



La Captcha surgió como una capa de seguridad para intentar que los robots no pudieran enviar formularios por si mismos, y requerían que el usuario realizara una acción intermedia, como escribir un texto o número visual que los robots no son capaces de descifrar. A veces ni nosotros somos capaces de descifrar.







Para ello Google ha sacado su propio sistema de Captcha, al que llama reCaptcha, consistente en activar una única casilla «Check». Tras activar dicha casilla, reCaptcha hará las comprobaciones oportunas para asegurarse de que ha sido una persona humana la que está intentando enviar el formulario.







Vamos a ver cómo integrar reCapcha en nuestros formularios creados con Ninja Forms, el plugins para formularios que usamos en nuestro Curso de WordPress.



Lo primero que haremos es registrarnos en la web de reCaptcha con una cuenta de Google:







Hacemos clic en Get reCAPCHA y aparecerá el formulario para registrar una nueva web:







Introducimos un nombre para la cuenta y la url de la web que queremos enlazar con reCAPTCHA:







Y pulsamos en registro. Lo que nos interesa es conocer las claves que reCAPTCHA nos ha generado para asociar nuestros formularios, por lo que desplegamos el menú de Claves para acceder a ellas:







Necesitamos tener a mano la Clave del sitio y la Clave secreta, que usaremos para configurar el plugin de reCAPTCHA para Ninja Forms.







Vamos a plugins de WordPress y buscamos Ninja Forms reCAPCHA:







Instalamos y activamos el plugins y ahora en el menú Formularios aparecerá una nueva opción para configurar reCAPTCHA:







Accedemos al menú reCAPTCHA, y rellenamos la clave de sitio y clave secreta que nos generó la web de reCAPTCHA. También podemos especificar el código de lenguaje para que muestra el texto «No soy un robot» en el idioma deseado. El código para que aparezca en español: «es», y para inglés: «en».







Guardamos los cambios y vamos a la configuración de nuestro formulario para añadir el nuevo campo reCAPTCHA.



Añadimos el campo reCAPTCHA y lo colocamos justo antes del botón de enviar el formulario. En Etiqueta podemos personalizar el texto, por ejemplo «Activa la casilla de seguridad».







Guardamos el formulario y ¡listo!