Develop Reference

I want to show product categories and not product directly on Dokan store page

I am using Dokan for a Multipurpose store. I have already set up 2 vendors with their individual products. When I click on each vendor, I want to see the categories of products and not the products directly. I need guidance on how to go about it.
Here is the link to the website: https://entertainers.vipclubguest.com/
Thank you.
SO, after contacting the plugin owner, he could not help as the edit I need is out of their support scope. However, he gave me a pointer of where to look and below is the code that is in the file:
<?php
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
$store_user = dokan()->vendor->get( get_query_var( 'author' ) );
$store_info = $store_user->get_shop_info();
$map_location = $store_user->get_location();
$layout = get_theme_mod( 'store_layout', 'left' );
get_header( 'shop' );
if ( function_exists( 'yoast_breadcrumb' ) ) {
yoast_breadcrumb( '<p id="breadcrumbs">', '</p>' );
}
?>
<?php do_action( 'woocommerce_before_main_content' ); ?>
<div class="dokan-store-wrap layout-<?php echo esc_attr( $layout ); ?>">
<?php if ( 'left' === $layout ) { ?>
<?php dokan_get_template_part( 'store', 'sidebar', array( 'store_user' => $store_user, 'store_info' => $store_info, 'map_location' => $map_location ) ); ?>
<?php } ?>
<div id="dokan-primary" class="dokan-single-store">
<div id="dokan-content" class="store-page-wrap woocommerce" role="main">
<?php dokan_get_template_part( 'store-header' ); ?>
<?php do_action( 'dokan_store_profile_frame_after', $store_user->data, $store_info ); ?>
<?php if ( have_posts() ) { ?>
<div class="seller-items">
<?php woocommerce_product_loop_start(); ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php wc_get_template_part( 'content', 'product' ); ?>
<?php endwhile; // end of the loop. ?>
<?php woocommerce_product_loop_end(); ?>
</div>
<?php dokan_content_nav( 'nav-below' ); ?>
<?php } else { ?>
<p class="dokan-info"><?php esc_html_e( 'No products were found of this vendor!', 'dokan-lite' ); ?></p>
<?php } ?>
</div>
</div><!-- .dokan-single-store -->
<?php if ( 'right' === $layout ) { ?>
<?php dokan_get_template_part( 'store', 'sidebar', array( 'store_user' => $store_user, 'store_info' => $store_info, 'map_location' => $map_location ) ); ?>
<?php } ?>
</div><!-- .dokan-store-wrap -->
<?php do_action( 'woocommerce_after_main_content' ); ?>
<?php get_footer( 'shop' ); ?>

How can I create an infinite scroll (lazy loading) grouped per day and showing date?

Situation
I'm creating a custom Wordpress website where I want to show the most recent articles grouped by day and have it scroll infinitely when you've reached the bottom of your screen.
Problem
I don't know how to continue with the date you were on without breaking the layout.
I've seen many code that involve having infinite scroll, but none of them really worked for me since it also needs to match the design.
Here is the design:
The image pretty much explains what I need to create and so I've written the following code:
<div class="recent">
<?php
$args = array(
'posts_per_page' => -1,
'orderby' => 'date'
);
$myQuery = new WP_Query($args);
$date = '';
$postCount = 0;
$newDay = false;
if ( $myQuery->have_posts() ) : while ( $myQuery->have_posts() ) : $myQuery->the_post();
$postCount++;
if ( $date != get_the_date() ) {
if ( $postCount != 1 ) {
$newDay = false;
if (!$newDay) {
?></div><?php
}
?>
</div>
<?php
}
?>
<div class="recent__articles">
<?php
$newDay = true;
$date = get_the_date();
?>
<div class="recent__header">
<img class="header__icon" src="<?php echo get_home_url() ?>/wp-content/themes/insane/assets/images/time.svg" alt="time-icon">
<?php echo $date; ?>
</div>
<?php
if ($newDay) {
?>
<div class="articles__wrapper"><?php
}
}
?>
<div class="recent__article">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<figure class="article__image">
<?php if ( has_post_thumbnail() ) :
the_post_thumbnail();
else : ?>
<img src="<?php echo get_home_url() ?>/wp-content/themes/insane/assets/images/article-placeholder.png" alt="image-placeholder">
<?php endif ?>
</figure>
<div class="article__meta">
<span class="article__cat">
<?php
foreach((get_the_category()) as $category){
echo $category->name;
}
?>
</span>
<h2 class="article__title"><?php echo get_the_title() ?></h2>
<div class="article__date">
<?php echo esc_html( time_difference( get_the_time('U'), current_time('timestamp') ) ); ?>
</div>
</div>
</a>
</div>
<?php
endwhile; endif;
wp_reset_postdata();
?>
</div>
Top part where I check the date and increment the postCount is so I can group the articles of that day in separate div and style it accordingly.
Now all I need is to check wether I've reached the bottom and continue with where I left off.
Any help with the directions I need to be going is much appreciated.
Thank you!

I've fixed my problem in combination with the Ajax Load More plugin.
I hope this will help others facing the same problem as I did.
If anybody sees improvement in my code, I'd much appreciate it.
Tested on: MacOS - Chrome/Safari/Firefox & iOS - Chrome/Safari
I've installed the Ajax Load More plugin
They have a Repeat Templates section which is basically the while loop in php and I've added the following code (a bit stripped from what I've showed here above).
<?php $postCount++;
if ( $date != get_the_date() ) {
if ( $postCount != 1 ) {
$newDay = false;
if (!$newDay) {
?></div><?php
}
?>
</div>
<?php
}
?>
<div class="recent__articles">
<?php
$newDay = true;
$date = get_the_date();
?>
<div class="recent__header">
<img class="header__icon" src="<?php echo get_home_url() ?>/wp-content/themes/insane/assets/images/time.svg" alt="time-icon">
<?php echo $date; ?>
</div>
<?php
if ($newDay) {
?>
<div class="articles__wrapper"><?php
}
}
?>
<div class="recent__article">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<figure class="article__image">
<?php if ( has_post_thumbnail() ) :
the_post_thumbnail();
else : ?>
<img src="<?php echo get_home_url() ?>/wp-content/themes/insane/assets/images/article-placeholder.png" alt="image-placeholder">
<?php endif ?>
</figure>
<div class="article__meta">
<span class="article__cat">
<?php
foreach((get_the_category()) as $category){
echo $category->name;
}
?>
</span>
<h2 class="article__title"><?php echo get_the_title() ?></h2>
<div class="article__date">
<?php echo esc_html( time_difference( get_the_time('U'), current_time('timestamp') ) ); ?>
</div>
</div>
</a>
</div>
I've a .php file that I load in somewhere els that looks like this:
<div class="recent">
<?php
$date = '';
$postCount = 0;
$newDay = false;
echo do_shortcode("[ajax_load_more post_type='post' posts_per_page='2' scroll_distance='0']");
?>
</div>
Now for the last part I've written the following in jQuery:
// Ajax load more fix
function ajaxShowMore() {
var oldXHR = window.XMLHttpRequest;
function newXHR() {
var realXHR = new oldXHR();
realXHR.addEventListener("readystatechange", function() {
if (realXHR.readyState === 4) { // When the Ajax call is finished new content is loaded
var oldRecentHeaders = $('.recent__header'); // Store all previous recent headers in variable
setTimeout(function() { // Set a timeout, since it goes a bit to fast to store the data
var newRecentHeaders = $('.recent__header'); // Store all the headers in a variable
newRecentHeaders.splice(0, oldRecentHeaders.length); // Splice it, so you only get the new added headers
if (newRecentHeaders.first().text() === oldRecentHeaders.last().text()) { // Check if the first of new header date is the same as the last of the old header date
var newArticles = newRecentHeaders.first().parent().find('.articles__wrapper').children(); // Store all the articles
newRecentHeaders.first().parent().remove(); // Remove the first new added articles
oldRecentHeaders.last().parent().find('.articles__wrapper').append(newArticles); // Add them here
}
}, 10);
}
}, false);
return realXHR;
}
window.XMLHttpRequest = newXHR;
}
So for me this specific solution works, based on the classes and structure of my project I've set.
I hope this helps

Wordpress AJAX Hide Load More Button

I've created a custom WP-Query with the possibility to load more posts on button click with AJAX. Everything works fine. Now I'd like to hide the button if there are less or exactly four posts. The button should also disappear if there are all posts loaded with AJAX.
I'd be very thankful if somebody could help me! Thank you in advance.
My PHP:
<div class="masonry category-single-magazin__inner entry-content">
<?php $args = array('category_name' => 'magazin', 'posts_per_page' => '4', 'paged' => 1, 'orderby'=> 'date', 'order' => 'DESC'); $custom_query = new WP_Query( $args ); while($custom_query->have_posts()) : $custom_query->the_post(); ?>
<article class="object <?php if ( get_field( 'beitragsfarbe' ) == 1 ) { echo 'object--blue'; } else { echo 'object--yellow'; } ?>" id="post-<?php the_ID(); ?>">
<a href="<?php the_permalink(); ?>">
<div class="lazy object__inner" data-src="<?php echo get_the_post_thumbnail_url(); ?>">
<div class="overline">
<h6>
<?php $posttags = get_the_tags(); if ($posttags) { foreach($posttags as $tag) { echo $tag->name . ' '; }}?>
</h6>
</div>
<div class="object__inner__text content-no-margin">
<h4>
<?php the_title(); ?>
</h4>
<p class="textlink" href="<?php the_permalink(); ?>">Mehr erfahren</p>
</div>
</div>
</a>
</article>
<?php endwhile ?>
</div>
<button class="load-more reload-masonry button-full button-full--yellow">
<div class="button-full__inner">Mehr anzeigen</div>
</button>
<script type="text/javascript">
jQuery(document).ready(function() {
var ajaxurl = "<?php echo admin_url( 'admin-ajax.php' ); ?>";
var page = 2;
var pageNumber = <?php echo count_cat_post('magazin')/4; ?>;
$('.load-more').on('click', function() {
var data = {
'action': 'load_posts_by_ajax',
'page': page,
'security': '<?php echo wp_create_nonce("load_more_posts"); ?>',
};
$.post(ajaxurl, data, function(response) {
$('.masonry').append(response);
page++;
});
});
if (page == (parseInt(pageNumber) - 1)) {
$('.load-more').hide();
}
});
</script>
My functions.php:
function load_posts_by_ajax_callback() {
check_ajax_referer('load_more_posts', 'security');
$paged = $_POST['page'];
$args = array(
'category_name' => 'magazin',
'posts_per_page' => '4',
'paged' => $paged,
'orderby'=> 'date',
'order' => 'DESC'
);
$custom_query = new WP_Query( $args ); while ( $custom_query->have_posts() ) : $custom_query->the_post() ?>
<article class="object <?php if ( get_field( 'beitragsfarbe' ) == 1 ) { echo 'object--blue'; } else { echo 'object--yellow'; } ?>" id="post-<?php the_ID(); ?>">
<a href="<?php the_permalink(); ?>">
<div class="lazy-ajax object__inner" style="background-image:url('<?php echo get_the_post_thumbnail_url(); ?>')">
<div class="overline"><h6><?php $posttags = get_the_tags(); if ($posttags) { foreach($posttags as $tag) { echo $tag->name . ' '; }}?></h6></div>
<div class="object__inner__text content-no-margin">
<h4><?php the_title(); ?></h4>
<p class="textlink" href="<?php the_permalink(); ?>">Mehr erfahren</p>
</div>
</div>
</a>
</article>
<?php endwhile ?>
<?php wp_die();}

I will not write whole code but here is the possible solution. First you need to know how many pages of post are there, you can get total number of post by using following Wordpress function
<?php
$count_posts = wp_count_posts();
/*this function only works with post type is post .
if you using for categories first you need to find how many
post are there in that categories.*/
?>
If you divide total count_post by number of post per page you will get total number of page.
Now you can simply check it in your javascript like this.
var pageNumber = <?php echo (wp_count_posts()/4); ?>
//make sure pageNumber is number not string can use javascript parseInt function
jQuery(document).ready(function() {
if(page==(parseInt(pageNumber)-1)){
//send ajax request to get last page post but hide the button
}
});
I hope this will help you. Let me know if anything is not clear.

Solved it by myself. Although thank you for guiding me to the solution!
I've created a function for this with jQuery counting the visible posts:
function hideButton(){
var poststotal = <?php echo count_cat_post('magazin'); ?>;
var postsvisible = $('.masonry > article').length;
if (poststotal == postsvisible) {
$('.load-more').addClass('hidden');
}
};

Wordpress Dynamic Posts with AJAX

I'm would like to make this code load using the post ID of the item clicked inside the internal UL. How can this be done?
Currently creates a side menu containing the specified categories.
After which it creates a ul sub menu within with each li being a post from the category. The post from the category is also inserted using ajax into the specified div.
I need for the posts that are shown in the div and side menu to also load into the div when they're clicked.
Currently I am using cat ids to create the menu and insert into the div. I need to have post ids working from the sub menu.
It's rather difficult to explain.
index.php
<?php
$args = array(
'include' => '4,5,7,8'
);
$categories = get_categories($args);
?>
<ul id="category-menu" class="nav nav-list">
<?php
foreach ( $categories as $cat ) { ?>
<?php $show = 'cat=' . $cat->term_id; ?>
<li id="cat-<?php echo $cat->term_id; ?>">
<a class="<?php echo $cat->slug; ?> ajax tree-toggle" onclick="cat_ajax_get('<?php echo $cat->term_id; ?>');" href="#">
<?php echo $cat->name; ?>
</a>
<ul class="nav nav-list tree" style="display: none">
<?php query_posts($show); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php $post_id = $wp_query->post->ID; echo $post_id; ?>
<li>
<a class="ajax" onclick="cat_ajax_get('<?php echo $post_id ?>');" href="#"><?php the_title(); ?></a>
</li>
<?php endwhile; endif; ?>
</ul>
</li>
header.php
<script>
function cat_ajax_get(catID) {
jQuery("a.ajax").removeClass("current");
jQuery("a.ajax").addClass("current"); //adds class current to the category menu item being displayed so you can style it with css
var ajaxurl = '<?php echo admin_url( 'admin-ajax.php' ); //must echo it ?';
jQuery.ajax({
type: 'POST',
url: ajaxurl,
data: {"action": "load-filter", cat: catID },
success: function(response) {
jQuery("#category-post-content").html(response);
return false;
}
});
}
</script>
functions.php
add_action( 'wp_ajax_nopriv_load-filter', 'prefix_load_cat_posts' );
add_action( 'wp_ajax_load-filter', 'prefix_load_cat_posts' );
function prefix_load_cat_posts () {
$cat_id = $_POST[ 'cat' ]; $args = array (
'cat' => $cat_id,
'posts_per_page' => 10,
'order' => 'DESC'
);
$posts = get_posts( $args );
ob_start ();
foreach ( $posts as $post ) {
setup_postdata( $post ); ?>
<div id="post-<?php echo $post->ID; ?> <?php post_class(); ?>">
<h1 class="post-title"><?php the_title(); ?></h1>
<div id="post-content">
<?php the_content(); ?>
</div>
</div>
<?php
}
wp_reset_postdata();
$response = ob_get_contents(); ob_end_clean();
echo $response;
die(1);
}

Changed POST to GET. Now Ajax is returning multiple posts

When I used POST instead of GET for the call, it was taking a really long time for the wait. So, since I wasn't actually sending any data, I tried switching to GET. The speed increased a bit but now instead of grabbing the one post I need, it returns several posts. I'm guessing I need to alter the loop somehow in the function but I'm not sure what to do. Can someone help me out?
Call
$.ajax({
type: 'get',
url: ajaxURL,
data: {'action': 'load-content', post_id: post_id },
success: function(response) {
// Wait until all images are loaded
$('#project-container').html(response).imagesLoaded().then(function() {
// Fire again to rearrange the slide in the DOM
resize();
// Remove all 'hover' classes
$('article.project').removeClass('hover-sticky grayscale-sticky');
$('article.project img').removeClass('nohover');
// Remove the loading icon
$('.loading-icon').remove();
// If the user has scrolled...
if ($(window).scrollTop() !== 0) {
// First scroll the page to the top
$('html, body').animate({
scrollTop : 0
},400, function() {
matchContainerHeight();
projectStyles();
});
// If the user has not scrolled...
} else {
matchContainerHeight();
projectStyles();
}
return false;
});
}
});
Function
<?php
/**
* Ajax functions
*/
// Return the post content to the AJAX call
function my_load_ajax_content () {
$args = array(
'p' => $_POST['post_id'],
'post_type' => 'projects'
);
$post_query = new WP_Query( $args );
while( $post_query->have_posts() ) : $post_query->the_post(); ?>
<div class="post-container">
<div id="project-left-content">
<?php
the_title( '<h1 class="entry-title">', '</h1>' );
the_content();
if( get_field('client') ): ?>
<div class="client">
Client(s): <?php the_field('client'); ?>
</div>
<?php endif; ?>
<div class="project-cats">
<?php
$cat_names = wp_list_pluck( get_the_category(), 'cat_name');
echo join( ', ', $cat_names );
?>
</div>
<?php if( get_field('url') ): ?>
<div class="project-link">
<a class="first after" href="http://<?php the_field('url'); ?>" target="_blank"><?php the_field('url'); ?></a>
</div>
<?php endif; ?>
</div>
<div id="project-right-content">
<?php if( have_rows('slides') ): ?>
<div id="slider">
<!-- Slider Setup -->
<?php if( have_rows('slides') ):
$slideNumber = 0;
while ( have_rows('slides') ) : the_row();
$slideNumber++;
?>
<input type="radio" name="slider" id="slide<?php echo $slideNumber; ?>">
<?php endwhile;endif; ?>
<!-- Slide -->
<?php if( have_rows('slides') ): ?>
<div id="slides">
<div id="overflow">
<div class="inner">
<?php if( have_rows('slides') ):
while ( have_rows('slides') ) : the_row();
$slideImage = get_sub_field('slide_image');
?>
<article>
<img src="<?php echo $slideImage; ?>" alt="<?php the_title(); ?>">
</article>
<?php endwhile;endif; ?>
</div><!-- #inner -->
</div><!-- #overflow -->
</div><!-- #slides -->
<?php endif; ?>
<!-- Controls -->
<?php if( have_rows('slides') ):
$slideNumber = 0;
?>
<div id="active">
<?php while ( have_rows('slides') ) : the_row();
$slideNumber++;
?>
<label for="slide<?php echo $slideNumber; ?>"></label>
<?php endwhile; ?>
</div><!-- #active -->
<?php endif; ?>
</div><!-- #slider -->
<?php endif; ?>
</div><!-- #project-right-content -->
</div><!-- .post-container -->
<?php
endwhile;
wp_reset_postdata();
wp_die();
}
add_action ( 'wp_ajax_nopriv_load-content', 'my_load_ajax_content' ); // when the user is logged in
add_action ( 'wp_ajax_load-content', 'my_load_ajax_content' ); // when the user is not logged in

Change
$args = array(
'p' => $_POST['post_id'],
'post_type' => 'projects'
);
To
$args = array(
'p' => $_GET['post_id'],
'post_type' => 'projects'
);
as your ajax is GET and not POST anymore!