Menu con Ajax ComboBox

[gmb]

Hola.

Hemos tenido que realizar para un cliente de la rama de la alimentación un menú un poco diferente. Se trata de un triple select que va cambiando dependiendo de la selección anterior. He puesto que es AJAX, para que la gente lo entienda, pero realmente, es con Json.

Requisitos:
Tener puesto Jquery. Puedes añadirlo a tu plantilla, modificando el head.phtml

<!-- añadir jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script type="text/javascript">
//<![CDATA[
     var $j = jQuery.noConflict();
//]]>
</script> 

Instalar:
Copiar el fichero a tu plantilla, dentro de /template/catalog/navigation/

Limitaciones:
La "extensión" (solo es un ficherito ), solo funciona con 3 niveles de categorías. Se puede ampliar "facilmente".

Ejemplos:
http://www.elcorteingles.es/supermercado/default1.asp ->Introduce un código postal, por ejemplo el 38200 y puedes comprobar el funcionamiento.

Captura:
menu-combo..jpg

Descargar:
top.phtml..zip

Espero que os sirva a alguno y si lo mejorais, que puede que me haya liado un poco con el código, subirlo y compartirlo (si quereis).

Notas:

En la linea 36  y 37

            <?php if ($_category->parent_id>1): // Asi evito el root?>
                <?php if ($_category->parent_id == 2):?>

Indicar cual es el ID de la categória root. En este caso es el 2.

Saludos.

[Xarlie]

Gracias gmb!
Hace poco yo desarrollé otro parecido pero no era para Magento sino para una administración

Lo he mirado por encima, y sólo comentar que para codificar en JSON dentro de PHP (o decodificar) existen las funciones json_encode y json_decode, por lo que basta con tener un array con los valores y la propia función te los convierte ahorrándote unas líneas de código

Y por último, si se quiere utilizar una petición externa vía AJAX para rellenar los campos con jQuery se puede hacer muy fácilmente:

		$.ajax({
			type: 'get',
			dataType: 'json',
			url: '<la_url_donde_se_sacan_los_datos_y_los_devuelve_en_formato_json>',
			timeout: 10000,
			success: function(json){
			    // aqui podemos poner funciones que se llaman para rellenar los datos o cualquier cosa en js
			},
			error: function(){
            }
		});

(Creo que en el ejemplo anterior al quitar mi código no me he cargado nada)

Y luego para el efecto de "loading" que tan acostumbrados estamos en Magento lo podemos hacer muy fácilmente.
Yo utilizo BlockUI que es otra librería para jQuery, y después basta con poner:

        $.blockUI.defaults.message = "<?php echo $this->__('Espere un momento...') ?>";
        $.blockUI.defaults.css = {}; 
        $(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);

Y la capa de carga

<img id="displayBox" src="/public_html/images/loading.gif" style="display:none" />

Para que cuando se realiza CUALQUIER petición en AJAX siempre aparezca el efecto (se oscurece la pantalla y aparece la capa por encima con el mensaje).

He ido copiando y pegando trozos de código ya que tengo un montón de código, quizás se me ha olvidado algo, pero la idea está plasmada


PD: Me gusta esto de poner nuestros pequeños trozos de código.

[gmb]

Hola Xarlie.

Gracias por los tips. Lo de json encode y decode, si lo sabía pero era por si en algun server alguien tuviera php 5.2 compilado con json deshabilitado, aunque me extraña que fuera así.

Efecto loading apuntado, thx.

Respecto a poner porciones de código, sería perfecto para todos. Estoy seguro que algún día lo necesitaremos, sin tener que implementarlo y así poder usarlo como base. Por cierto, si algun usuario de la comunidad tiene alguna extensión, código, modulo interesante, que no se corte y lo publique...

Saludos.