Htykuut

I'm building an e-commerce site based on WooCommerce and use Timber (Twig) for templating. I'm now trying to build a page (e.g. domain.com/sale) which lists all my Products, that are on sale. Since I totally customized the entire WooCommerce template structure (because I'm templating in Twig), shortcodes are not an option.

My Problem:

I managed to build a custom query showing my products on sale, but it seems I'm missing something, since no pagination is shown in the bottom, neither my AJAX Filters are working.. and so on.. Probably because I'm not calling the default query? Even if I go the non-AJAX-way: domain.com/sale/page/2 it will return me the same results I already get on the first page. literally not changing anything...

What I did:

I created a page in my Wordpress named "Sale". Went to my index.php and added the following code:

<!-- index.php -->



$products = Timber::get_posts(

    array(

        'post_type'      => 'product',

        'nopaging'               => false,

        'posts_per_archive_page' => '24',

        'meta_query'     => array(

            'relation' => 'OR',

            array( // Simple products type

                'key'           => '_sale_price',

                'value'         => 0,

                'compare'       => '>',

                'type'          => 'numeric'

            ),

            array( // Variable products type

                'key'           => '_min_variation_sale_price',

                'value'         => 0,

                'compare'       => '>',

                'type'          => 'numeric'

            )

        )

    )

);



$context['products'] = $products;



Timber::render( '/pages/landingpages/sale.twig', $context );

In my option this totally works fine. And of corse this is surrounded with correct if clauses to call when domain.com/sale is requested. I now went to my sale.twig file and added following code:

sale.twig

$context = Timber::get_context();



{% block content %}

<div id="product_list" class="product_listing grid">



    {{ fn('woocommerce_breadcrumb', breadcrumb_settings) }}

    <h1>Sale</h1>



    <div id="product_list" class="product_listing grid">



        {# Filters #}

        <div class="product_filter">

            {{ fn('do_shortcode', '[br_filters_group group_id=7861]') }}

        </div>



        {# Order by #}

        <div class="product_sorting">

            <label for="orderby">Order by:</label>

            {{ fn('woocommerce_catalog_ordering') }}

        </div>



        {# Products #}

        <div class="product_listing-content">

            <ul class="product_results products">

                {% for product in products %}

                    {% include ('partials/loop-product.twig') %}

                {% endfor %}

            </ul>

            <div class="products-footer">

                {% include 'partials/pagination.twig' %}

            </div>

        </div>



    </div>

</div>

{% endblock content %}

At this point I must say that I'm using BeRocket AJAX Filters for my Filters. The included files loop-product.twig and pagination.twig look like this:

loop-product.twig // deleted some lines for simplicity

<li id="{{ 'product-' ~ product._sku }}" class="product-item {{ product._stock_status }}">

    {{ product.name }}

</li>

pagination.twig

<ul class="pagination clearfix">

    {% if posts.pagination.prev %}

        <li class="prev-item">

            <a href="{{posts.pagination.prev.link}}" class="prev {{posts.pagination.prev.link|length ? '' : 'invisible'}}">

                <span class="sr-only">Prev</span>

            </a>

        </li>

    {% endif %}

    {% for page in posts.pagination.pages %}

        <li class="page">

            {% if page.link %}

                <a href="{{page.link}}" class="{{page.class}}">{{page.title}}</a>

            {% else %}

                <span class="{{page.class}}">{{page.title}}</span>

            {% endif %}

        </li>

    {% endfor %}

    {% if posts.pagination.next %}

        <li class="next-item">

            <a href="{{posts.pagination.next.link}}" class="next {{posts.pagination.next.link|length ? '' : 'invisible'}}">

                <span class="sr-only">Next</span>

            </a>

        </li>

    {% endif %}

</ul>

Again to not get me wrong: I'm receiving all my products in a correct way. My problem is that it is not behaving like an archive page. Pagination, Filters etc.

Maybe there is total different approach to this topic, but it seems it is the only one. I found tuns of code snippets online with similar problems, but non of them suited for me...

Any help appreciated!

Edit:

For testing only I tried to add the common WooCommerce shortcode [sale_products] and at-least my filters work again. My Pagination still does not appear...

I am going to take a stab at helping. Please forgive me if I am off base. The gutenburg blocks is still very hard for me to grasp.

Your sale.twig is dynamically pulling data and using JS to fill content via a php include but it never actually writes the content via the WP hooks to the database that the /sale page or post is pulling the data from. Is that intentional?

Also note the twig js that is supposed to provide you the pagenation from the dom does not match the dom created via link_template.php
have a look

I kind of think you will have to call this

<?php previous_post_link( '<strong>%link</strong>' ); ?> 

link_template