Mostrar unos campos u otros en el formulario de contacto de prestashop dependiendo del asunto que se elija

El formulario de contacto de Prestashop por defecto muestra los campos de referencia del pedido (estés o no logueado) y de Producto (sólo si estás logueado). Estos campos son muy útiles si el destinatario es "Atención al cliente", por ejemplo. Pero si has creado otro asunto o destinatario de contacto, como por ejemplo "Colabora con nosotros", no tiene tanto sentido que se muestren estos campos.
En este post os enseñamos a crear nuevos asuntos (o destinatarios del contacto) y a mostrar unos campos del formulario u otros dependiendo del asunto que elija el usuario.

Para crear nuevos contactos en vuestra tienda de Prestashop desde el panel de administración, dirigiros a Clientes > Contacto. Aparecerá una lista con los contactos ya existentes. Suelen estar por defecto el de Atención al cliente y el de Soporte técnico. Podéis crear otros como "Colabora con nosotros", "Servicio Post-venta", etc. Además, se puede asignar una dirección de correo electrónico destinataria distinta en cada caso: unas consultas podrán llegar al departamento comercial, otras al de facturación, otras al servicio técnico, etc.

Ahora deberemos definir qué campos queremos que se muestren en qué formularios. Por ejemplo, no nos interesa que se muestren los campos de Referencia del pedido y Producto en el formulario "Colabora con nosotros". Ocultaremos o mostraremos estos campos con css y javascript dependiendo de nuestros intereses.

1. El primer paso es ir a nuestra plantilla, al archivo contact-form.tpl y buscar en el formulario el campo referente a la referencia del pedido (Order reference):
<p class="text select">
                <label for="id_order">{l s='Order reference'}</label>
Lo sustituiremos por:
<p id="p_order" class="text select hide">
                <label for="id_order">{l s='Order reference'}</label>

Lo que hemos hecho es asignarle un id al párrafo para poderlo referenciar luego mediante javascript. También le hemos añadido la clase "hide" para que sea un campo que esté oculto por defecto.

2. Ahora iremos al archivo contact-form.css de nuestra plantilla para darle estilo a las clases hide y show:
.hide {
    display: none;
}

.show {
    display: inline-block;
}
3. Por último, en la carpeta /js/ de nuestra plantilla buscaremos el archivo contact-form.js y añadiremos la función cambia() para que nos muestre o oculte el párrado con id="p_order" en función del campo de asunto que se haya elegido. En función del asunto que se haya elegido, es decir, del destinatario de nustro formulario de contacto, cambiará el valor de #id_contact. Si, por ejemplo, el id de contacto de "Atención al cliente" es 2, querremos que para ese valor se muestre el campo (show). En nuestro ejemplo, si es para cualquier otro destintario querremos que se oculte (hide). Añadiremos el siguiente código:

function cambia(){
    if($('#id_contact').val()!=2){
        $('#p_order').removeClass("show");
        $('#p_order').addClass("hide");
    }
    else{
        $('#p_order').removeClass("hide");
        $('#p_order').addClass("show");
    }
}

¿Cómo saber el id_contact de nuestros distintos destinatarios de contacto? Lo podemos ver en  Clientes > Contacto. En la tabla de contactos ya creados la primera columna hace referencia al id del contacto.