Issue with Custom Content Loop in Astra Pro Theme

  • Good morning,

    I am currently in the process of developing an Ajax Post Filter for a client, with the objective of dynamically displaying results via Ajax. This involves utilizing a dropdown category and three keyword dropdowns for filtering. However, I have encountered an issue as the client is utilizing Astra Pro and wishes to have the results presented in a three-column grid layout, a feature exclusive to Astra Pro.

    Upon consulting the documentation, I came across the following code snippet: [Link to the documentation: https://wpastra.com/docs/restrict-search-results-post/]

    Nevertheless, the results I am currently obtaining are being displayed in a vertical, one-after-the-other format, rather than the desired three-column grid layout. How can I go about achieving the layout specified in Astra Pro?

    add_action('wp_ajax_nopriv_filter_results', 'filter_results');
add_action('wp_ajax_filter_results', 'filter_results');

function filter_results() {
// Retrieve data from POST
$category = $_POST['category'];
$tags = json_decode(stripslashes($_POST['tags']));

$args = array(
    'category_name' => $category,
    'tag_slug__and' => $tags,
    'posts_per_page' => 10
);

$query = new WP_Query($args);

// Temporarily replace the main query
global $wp_query;
$original_query = $wp_query;
$wp_query = $query;

// Use the modified Astra's loop structure
astra_redo_loop_markup();

$wp_query = $original_query;
wp_reset_postdata();

wp_die();
}
    function astra_redo_loop_markup() {
global $post;

?>
<main id="main" class="site-main" role="main">




    <?php if ( have_posts() ) : ?>
    <?php do_action( 'astra_template_parts_content_top' ); ?>

        <?php
        while ( have_posts() ) :
            the_post();

            if ( is_search() && ( 'page' == $post->post_type ) ) {
                continue;
            }

            do_action( 'astra_template_parts_content' );

        endwhile;
    else :
        echo 'No results found.';

    endif; ?>

</main><!-- #main -->
<?php
}

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter korgaltvde

    (@korgaltvde)

    Reminder: the Results showing on DIV ID “ajax-results”:

    function dropdown_filter() {
$categories = get_categories();

if ( ! empty( $categories ) ) {
    // Begin form
    echo '<div style="text-align: center; padding: 10px;">'; // Zentriert das Formular und fügt 10px Abstand hinzu
    echo '<form id="custom-filter-form">';

    // Categories Dropdown
    echo '<select name="category-dropdown" id="category-dropdown">';
    echo '<option value="#">Select Categorie...</option>';

    foreach ( $categories as $category ) {
        $link = get_category_link( $category->term_id );
        $name = $category->name;
        echo '<option value="' . esc_url( $link ) . '">' . esc_html( $name ) . '</option>';
    }

    echo '</select>';

    // Additional Dropdowns for Tags with distinct names
    echo_tags_dropdown(['Docent', 'Equip directiu', 'Orientador', 'Tutor'], 'Select Rol...');
    echo_tags_dropdown(['Adults', 'Batxillerat', 'FP', 'Infantil', 'Primària', 'Secundària'], 'Select Etapa...');
    echo_tags_dropdown(['Altres', 'Bibliografia', 'Bones pràctiques', 'Campanya', 'Document', 'Enlla?', 'Formació', 'Guia', 'Normativa', 'Recurs pedagògic'], 'Select Format...');

    // Add the apply filter button
    echo '<button type="button" id="apply-filter">Apply Filter</button>';

    // End form
    echo '</form>';
    echo '</div>'; // Schlie?t die zentrierte Container-Div

    // Area to display Ajax results
    echo '<div id="ajax-results"></div>';
 }
}

    Thread Starter korgaltvde

    (@korgaltvde)

    second reminder: when I open the Developer Console in Chrome, the grid layout is shown to me correctly

    Hi @korgaltvde,

    In case you are not aware, discussing anything related to the pro version is not allowed in this forum, as mentioned in the Forum Guidelines. Please reach out to us thru our Support Portal and mark this topic as Resolved.

    Kind regards,
    Herman ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Issue with Custom Content Loop in Astra Pro Theme’ is closed to new replies.