Desplegable con selección de categorías

7 oct 2014, 20:39:57
Vistas: 27.8K
Votos: 3

He creado un sitio web de directorio con menús desplegables que permiten al usuario navegar a través de las categorías y subcategorías. [Sitio web]

Estoy usando wp_dropdown_categories() para mostrar los menús y el JavaScript compartido aquí para permitir que el usuario seleccione una categoría y sea dirigido a esa página. Cuando se selecciona 'Todas las Categorías', no sucede nada. ¿Cómo se puede agregar esa funcionalidad?

$args = array(
    'show_option_all'    => 'Todas las Categorías',
    'show_option_none'   => 'EXPLORAR',
    'orderby'            => 'NAME', 
    'order'              => 'ASC',
    'show_count'         => 0,
    'hide_empty'         => 1, 
    'child_of'           => 0,
    'exclude'            => 1,
    'echo'               => 1,
    'selected'           => $cat_id2->term_id,
    'hierarchical'       => 1, 
    'name'               => 'cat',
    'id'                 => '',
    'class'              => 'postform',
    'depth'              => 1,
    'tab_index'          => 0,
    'taxonomy'           => 'category',
    'hide_if_empty'      => false,
);

wp_dropdown_categories( $args );

JS

<script type="text/javascript">
var dropdown = document.getElementById("cat");
function onCatChange() {
    if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
        location.href = "<?php echo get_option('home'); ?>/?cat="+dropdown.options[dropdown.selectedIndex].value;
    }
}
dropdown.onchange = onCatChange;

6
Comentarios

¿Estás utilizando el ejemplo 1 o 2 de Javascript del wp_dropdown_categories en el codex? ¿Podrías proporcionar también el Javascript?

RachieVee RachieVee
8 oct 2014 23:25:22

Ahora se ha proporcionado el JS arriba.

MF1 MF1
12 oct 2014 03:41:17

$cat_id2 no está definido. Y tu variable "dropdown" es nula al cargar la página. La función no se ejecuta cuando se cambia una opción en el menú desplegable, solo al cargar la página. Puede que necesites ayuda con JS para esto ya que no es mi especialidad. Parece que tu único problema con PHP es que $cat_id2 no está definido. Espero que eso ayude.

RachieVee RachieVee
23 oct 2014 19:10:43

¿Sería útil ver el enlace de mi sitio?

MF1 MF1
23 oct 2014 19:19:23

Claro. Cuanto más puedas proporcionar, mejor. Con suerte, alguien podrá ayudarte si yo no puedo. ¡Buena suerte! :-)

RachieVee RachieVee
23 oct 2014 19:28:11

Agregado arriba....

MF1 MF1
23 oct 2014 19:35:06
Mostrar los 1 comentarios restantes
Todas las respuestas a la pregunta 3
0

Aquí tienes una variación del código que utilizas. Estoy usando get_categories() aquí para lograr el mismo objetivo. Tuve que ajustar ligeramente mi código para que sea aceptable para tus necesidades.

Sin embargo, hay otras modificaciones que debes hacer para que esto funcione. Cuando seleccionas la opción Todas las Categorías, serás llevado a una página que mostrará lo que necesites mostrar. Esta página tendrás que crearla manualmente.

Como probablemente sabes, no hay páginas de archivo de índice en WordPress. (Mira esta publicación que hice sobre el mismo tema). Esto significa que dominio.com/categoria/ devuelve un error 404.

Así que, para que todo funcione, tendrás que hacer una copia de page.php, renombrarla a algo como page-category.php (consulta el codex sobre cómo crear plantillas de página personalizadas), abrirla y crear tu consulta personalizada para mostrar lo que quieras cuando se visite esta página.

Ahora necesitas crear tu página en el backend. Sugeriría que uses el slug categoria para que cuando visites dominio.com/categoria/, se muestre esta página. (Recuerda, no puedes crear páginas hijas para esta página, romperá la jerarquía). También he modificado el código para ir a dominio.com/categoria/ cuando se seleccione Todas las Categorías.

Aparte de eso, el código debería funcionar bien. Solo necesitas verificar las estructuras de URL quizás, y también configurar los parámetros en get_categories() para que se ajusten a tus necesidades. Aquí está el código del menú desplegable.

<select name="event-dropdown" onchange='document.location.href=this.options[this.selectedIndex].value;'> 
    <option value=""><?php echo esc_attr(__('Seleccionar Categoría')); ?></option> 

    <?php 
        $option = '<option value="' . get_option('home') . '/categoria/">Todas las Categorías</option>'; // cambia categoria por tu slug de página personalizado
        $categories = get_categories(); 
        foreach ($categories as $category) {
            $option .= '<option value="'.get_option('home').'/categoria/'.$category->slug.'">';
            $option .= $category->cat_name;
            $option .= ' ('.$category->category_count.')';
            $option .= '</option>';
        }
        echo $option;
    ?>
</select>

EDITADO

De hecho, se me ocurrió una idea que será útil. Recientemente hice una respuesta sobre cómo mostrar todas las categorías en una lista con todos los títulos de publicaciones bajo cada categoría específica. Esta misma idea se puede usar en tu plantilla page-category.php.

Cuando un usuario selecciona la opción Todas las Categorías, será llevado a esta página que listará todas las categorías y los títulos de las publicaciones.

Aquí está el código completo: (para una explicación del código, mira mi publicación aquí)

En tu functions.php

add_action( 'transition_post_status', 'publish_new_post', 10, 3 );

function publish_new_post() {
   delete_transient( 'category_list' );
}

En tu plantilla donde necesites mostrar tu lista

<?php
if ( false === ( $q = get_transient( 'category_list' ) ) ) {

    $args = array( 
        'posts_per_page' => -1
    );

    $query = new WP_Query($args); 

    $q = array();

    while ( $query->have_posts() ) { 

        $query->the_post(); 

        $a = '<a href="'. get_permalink() .'">' . get_the_title() .'</a>';

        $categories = get_the_category();

        foreach ( $categories as $key=>$category ) {

            $b = '<a href="' . get_category_link( $category ) . '">' . $category->name . '</a>';    

        }

        $q[$b][] = $a; // Crea un array con los nombres de categoría y títulos de publicaciones
    }


    /* Restaurar los datos originales del Post */
    wp_reset_postdata();

set_transient( 'category_list', $q, 12 * HOUR_IN_SECONDS );
}

foreach ($q as $key=>$values) {
        echo $key;

        echo '<ul>';
            foreach ($values as $value){
                echo '<li>' . $value . '</li>';
            }
        echo '</ul>';
    }


?>
23 oct 2014 21:45:37
0

Probablemente podrías modificar el script anterior a esto:

var dropdown = document.getElementById("cat");
function onCatChange() {
    if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
        location.href = "<?php echo get_option('home'); ?>/?cat="+dropdown.options[dropdown.selectedIndex].value;
    }
    else if ( dropdown.options[dropdown.selectedIndex].value == 0 ) {
        location.href = "<?php echo get_option('home'); ?>";
    }
}
dropdown.onchange = onCatChange;

Si también quieres incluir -1 (EXPLORAR CATEGORÍAS) podrías cambiar el segundo condicional a: dropdown.options[dropdown.selectedIndex].value <= 0

23 oct 2014 22:03:25
0

Iba a agregar esto como un comentario, pero mis puntos de reputación aún no son lo suficientemente altos :)

Pasé unos 20 minutos probando y revisando lo que tienes. Mi primera prueba replicó el problema que describes, pero cuando configuré algunos puntos de interrupción (el evento change y una línea de código específica) y expresiones de seguimiento usando las herramientas de depuración integradas de Chrome, el problema parece haber dejado de ocurrir. Asumo que o bien has solucionado el problema, o hay algún cambio de estado que ha ocurrido en mi sesión al usar la herramienta Chrome Inspect que hace que ahora funcione.

Parece que tienes un error en tu JS: en cada lugar donde tienes el código:

dropdown(x).onchange = onCatChange(x);

(por ejemplo, líneas 567, 4840, 4851), este código lanza un error cuando el valor es 0 (la entrada 'All' seleccionada) y posiblemente también -1 (la entrada 'Browse' seleccionada), aunque sospecho que esto ocurre simplemente porque seleccionar BROWSE hace que la entrada All de nivel superior se establezca nuevamente por defecto (lo que a su vez desencadena el error).

¿Quizás en algunos casos, este error que se lanza hace que la ejecución se detenga dependiendo de la configuración del navegador para el manejo de errores de Java? ¿Y al activar las herramientas de depuración podría haber cambiado un modo de ejecución haciendo que el código continúe a pesar de este fallo? Solo es una idea.

Además, cuando selecciono "Activities" en Dropdown1, "Bowling" en Dropdown2, y luego cambio la selección de Dropdown2 a "All Activities", la URL permanece como:

http://www.mydetroitjewishdirectory.com/category/activities/bowling/

pero el contenido de la página cambia para mostrar solo el texto simple "category".

¡De todos modos, espero que esto te ayude!

Paul

23 oct 2014 20:46:19