/*Animacion Menu*/ $(document).ready(function() { /*Animacion del menu*/ $("#menu ul li").hover(function() { $(this).find('.submn').stop().css({ 'height': '', 'padding-top': '', 'padding-bottom': '' }).slideDown(200); }, function() { $(this).find('.submn').stop().slideUp(300); }); }); $(document).ready(function () { //pone el texto en el tipsy $('#cart div a').tipsy({ gravity: 'e' }); //esto actualiza el tipsy del carrito de arriba para que tenga los datos nuevos luego que le doy click a add to cart... $('.button').click(function () { $('#cart div a').tipsy({ gravity: 'e' }); }); //quita el 0.00 del price y le pone "Select options" if ($('#opu_price').length != 0) { if ($('#opu_price').text() == "$0.00") $('#opu_price').text("Select options first") } //pone el filtro del search by product... $("#search_by_product_list").searchable({ maxMultiMatch: 300, // how many matching entries should be displayed wildcards: true, // Support for wildcard characters (*, ?) ignoreCase: true, // Ignore case sensitivity warnMultiMatch: 'Top {0} matches ...', // string to append to a list of entries cut short by maxMultiMatch warnNoMatch: 'No matches...', // string to show in the list when no entries match zIndex: 'auto' // zIndex for elements generated by this plugin }); /*Para el search by products, cuando presione un producto, para que me envíe a la página de ese producto*/ $('#search_by_product_list').change(function () { //obtiene el valor seleccionado var valor_search_by_product = $('#search_by_product_list').val(); //0 es el valor del primer item, que es el de --seleccionar-- if (valor_search_by_product != "0") window.location.href = valor_search_by_product; }); filtra_opciones_producto(); //para el filtro de size, almacena todos los datos del dropdown list en estos arreglos... almacena_datos_dropdown(); //------------------------------------- //selecciona el primer radio button var id_radio = $('#' + opciones_id).find('input:first'); id_radio.trigger("click"); //------------------------------------- }); /* ==================================================================================================== ---------------------- Función que filtra las opciones de un producto -------------------------- ==================================================================================================== */ //Vars globales para esta funcion var opciones_id var medidas_id var color_id //estos son los titulos de las opciones, por medio de ellos obtengo el ID de las opciones/size/colores //esto esta en el archivo en el root: terminos_filtro.js //estos son los términos a filtrar. //Este término debe aparecer (aparecer, no que sea igual...) en las opciones (Radio buttons) y dentro de los dropdown, asi es que esto funciona... //Esto esta en el root en un js terminos_filtro.js //cuando el código encuentre uno de los siguientes terminos entre la opción seleccionada, entonces habilitará el dropdown de colores //Esto esta en el root en un js terminos_filtro.js function filtra_opciones_producto() { //verifica si hay opciones... if ($('.options').length != 0) { //--------------------------------------------------------- //OBTIENE LOS ID DE CADA DIV PADRE - Los ID son generados dinamicamente por eso tengo que obtenerlos //--------------------------------------------------------- //recorre todos los títulos de las opciones para así encontrar el ID de cada opción, por ejemplo, el ID de las opciones del //producto, que son por ejemplo, standard size, stripped border, custom wide, etc. //Para entender mejor este código debes leer el HTML de la página de producto y ver la parte de Opciones... Esto se basa en esa estructura... $.each($('.options').find('b'), function() { //obtiene el ID del div que tiene los radio buttons de las opciones del producto if ($(this).html() == titulo_opciones_del_producto) opciones_id = $(this).parent().attr('id'); //obtiene el ID del div que tiene el dropdown de las medidas del producto if ($(this).html() == titulo_medidas_del_producto) medidas_id = $(this).parent().attr('id'); //obtiene el ID del div que tiene eldropdown de los colores if ($(this).html() == titulo_colores) color_id = $(this).parent().attr('id'); }); //--------------------------------------------------------- //escondo las medidas y colores para habilitarlo de acuerdo a la opcion que elija el usuario $('#' + medidas_id).hide(); $('#' + color_id).hide(); //--------------------------------------------------------- //handler para el click de los radio buttons de las opciones del producto... //--------------------------------------------------------- $("input:radio[@name = 'option[" + opciones_id + "]']").click( function() { //esta funcion llena el dropdown con los items que tenia por defecto antes de filtrarlo, porque cuando se filtra, lo que se hace //es remover los tags object que no cumplan con el filtro... llena_dropdown(); var id_radio = $(this).val(); //Obtiene el texto que tiene el label del radio button seleccionado y lo manda a esta funcion para que filtre el textbox filtra_dropdown($.trim($("label[for = 'option-value-" + id_radio + "']").text())) } ); //--------------------------------------------------------- } } //Esta funcion filtra los datos de los textbox dependiendo del texto pasado como parametro y de las opciones de los arreglos declarados como //globales mas arriba.. function filtra_dropdown(texto) { $('#' + medidas_id).slideDown(); //En esta funcion, en el valor especificado en la variable 'texto', busco el termino especificado en cada posicion del //arreglo "filtros", si encuentra el valor filtra el textbox de size y deja //solo los elementos que contengan el término que tiene el arreglo en la posición que hace match con el texto pasado como parametro. //tambien chequea si el texto pasado como parametro contiene el texto especificado en la var global terminos_que_habilita_los_colores //para saber si habilita los colores o no... //Si la funcion no encuentra nada, entonces no hace nada, deja todo intacto... var i = 0; var encontro = false; for (i = 0; i < filtros.length; i++) { if ($.trim(texto).toLowerCase().indexOf($.trim(filtros[i]).toLowerCase()) != -1) { //filtra el textbox de size... $.each($('#' + medidas_id).find('select option'), function () { if ($.trim($(this).text()).toLowerCase().indexOf($.trim(filtros[i]).toLowerCase()) == -1) { if( $(this).val()!="") $(this).remove(); //para indicar que encontro un match encontro = true; } }); //muestra el dropdown de colores... if (filtros[i].indexOf(terminos_que_habilita_los_colores) != -1) { $('#' + color_id).find('option:first-child').attr('selected', 'selected'); $('#' + color_id).slideDown(); } else { $('#' + color_id).slideUp(); //selecciona el segundo child porque el primero es el --Seleccionar--, y debo seleccionar uno pq este campo es requerido $('#' + color_id).find('option:nth-child(2)').attr('selected', 'selected'); } break; } } //si no matchea nada, entonces muestra los dropdown, para que se puedan elegir las opciones... if (encontro == false) { $('#' + medidas_id).slideDown(); $('#' + color_id).slideDown(); } } //esta funcion almacena en un arreglo todos los items que tiene el dropdown de size function almacena_datos_dropdown() { var i = 0; //almacena el HTML que tiene el select por defecto, en un div, para usarlo luego // $('#' + medidas_id).append(""); $('#' + medidas_id).append(""); } //Función que llena el dropdown de size con sus valores predeterminados function llena_dropdown() { $('#' + medidas_id + " select").html(""); var temp = $('#datos_almacenados').val(); //coge los valores predeterminados del div de datos guardados que lo creé en la funcion almacena_Datos_Dropdown $('#' + medidas_id + " select").html(temp); }