0

I have a page that calls the template, I made filters using a data-filter.These filters sort out the ALU door and PVC doors. However when I click on the pagination and goes to page 2 to list the other 10 products the filter returns to me on ALL. So I came up with the idea to take a certain template at the click of the filter. How do I do that? I watched this Dynamically switch template on click however throw me error in console that can not find multiTemplateData. Or whether it is possible to save the filter and switch it further?

This are filter buttons.

<div class="container py-5">
        <div class="section-title position-relative text-center">
            <h6 class="text-uppercase text-primary mb-3" style="letter-spacing: 3px;">Was wir haben</h6>
            <h1 class="font-secondary display-4">Katalog</h1>
        </div>

        <!-- FILTERS -->
        <div class="category-title">
            <p>Kategorien:</p>
        </div>
        <div class="filters" id="productsDoorsSelect" onclick="activeFunction(event)">  
            <span class="filter btn btn-primary text-uppercase active-products" data-filter="all">ALL</span>
            <span class="filter btn btn-primary text-uppercase" data-filter="alu">alu</span>
            <span class="filter btn btn-primary text-uppercase" data-filter="pvc">pvc</span>
        </div>
        <!-- FILTERS -->    

    </div>

This are products:

<!-- PRODUCTS DOORS -->
    <div class="container py-5 projects">
        <div class="flex-products">
            <div class="row-products" id="doorsProducts" >
            <?php
                $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
                $productsQuery = new WP_Query (array(
                    'post_type' => 'products_catalog',
                    'posts_per_page' => 10,
                    'paged' => $paged
                ));
                if($productsQuery->have_posts()):
                    while($productsQuery->have_posts()):
                        $productsQuery->the_post();     
            ?>
                <div class="col-lg-4-products mb-3 project" data-filter="<?php the_field('doors_category_field') ?>">
                    <div class="product-item mb-2">
                        <div class="product-img">
                            <img class="img-fluid" src="<?php the_post_thumbnail_url() ?>" alt="">
                            <a type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong<?php the_title()?>">
                                <i class="fa fa-2x fa-plus text-white"></i>
                            </a>
                        </div>
                        <div class="bg-secondary text-center p-4">
                            <h3 class="m-0"><?php the_title() ?></h3>
                        </div>
                    </div>
                </div>
                <?php endwhile; ?>
            
            </div>
            
            <div class="products-paginate">
            <?php 
            echo paginate_links(array(
                'total' => $productsQuery->max_num_pages,
                'prev_text' => '« früher',
                'next_text' => 'Nächste »'
            )); 
            ?>
            </div>
            
            <?php endif; ?>
        </div>
    </div>
    <!-- PRODUCTS DOORS -->

This is modal on opening products to show more info

<!-- Modal -->
    <?php
        $productsQuery = new WP_Query (array(
            'post_type' => 'products_catalog',
            'posts_per_page' => 10,
            'paged' => $paged
        ));
        if($productsQuery->have_posts()):
            while($productsQuery->have_posts()):
                $productsQuery->the_post();     
    ?>
    <div class="modal fade" id="exampleModalLong<?php the_title() ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle"
        aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle"><?php the_title() ?></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                

                    <?php the_post_thumbnail('post-thumbnail', ['class' => 'img-fluid mb-4']); ?>
                    <?php the_content();?>
                </div>
            </div>
        </div>
    </div>
    <?php endwhile; endif; ?>
    <!-- Modal -->
New contributor
Emil Kramar is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

0

Your Answer

Emil Kramar is a new contributor. Be nice, and check out our Code of Conduct.

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.