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...