I’m trying to display a list of "hot" products on the main page. by default, 4 products are displayed and 2 new products must be loaded using the "load more" button. when you click on the button, the first line is duplicated with the first two products instead of two new ones.
link to the website
front-page.php
<div class="hot__items" id="ajax-container">
<?php
$args = array(
'post_type' => 'product',
'posts_per_page' => 4,
'post_status' => 'publish',
'meta_key' => 'hot',
'meta_value' => true
);
$products = new WP_Query($args);
$max_pages = $products->max_num_pages;
if($products->have_posts()) : ?>
<?php
$pcount = count( $products->posts );
while($products->have_posts()): $products->the_post();
$mainphoto = get_field("main_foto");
$get_image_id = $mainphoto[id];
$image_link = wp_get_attachment_image_url($get_image_id, "full");
$logo = get_field("logo_tovar");
$get_logo_id = $logo[id];
$logo_link = wp_get_attachment_image_url($get_logo_id, "full");
?>
<div class="hot__item">
<a href="<?php the_permalink( $post ); ?>" title="<?php the_title(); ?>">
<?php if( get_field("hot_comment") ): ?>
<div class="hot_comment red-color"> <span></span> <?php the_field( "hot_comment" ); ?> </div>
<?php endif; ?>
<div class="hot__imgs">
<!--<img src="<?php echo $image_link;?>" alt="" class="hot__img">-->
<!--<img src="<?php echo $logo_link;?>" alt="" class="hot__logo">-->
<div class="item-fix-height fix-height_on-front">
<div class="scale_block_animate csomor-image-zoom" style="background-image: url('<?php echo $image_link;?>');"></div>
</div>
</div>
<div class="hot__text">
<div class="hot__text_title">
<p class="hot__name"><?php the_title(); ?></p>
<?php if( get_field("model") ): ?>
</div>
<div class="hot__text_about">
<p class="hot__model"><b>Модель: </b><span class="red-color"><?php the_field( "model" ); ?></span></p>
<?php endif; ?>
<div class="hot__descr">
<?php if( have_rows('harakteristiki_small') ):?>
<div class="subsection__chtitle">Характеристики</div>
<ul class="subsection__chlist">
<?php while( have_rows('harakteristiki_small')): the_row();?>
<li class="subsection__chitem__on_front_page">
<span class="subsection__chvar"><?php the_sub_field('har_title');?> </span>
<span class="subsection__chval"><?php the_sub_field('har_value');?></span>
</li>
<?php endwhile;?>
</ul>
<?php endif; ?>
</div>
<div class="hot__bottom">
<!--<a href="#recall" data-topic="Горячее предложение(<?php the_title(); ?>)" class="popup-js hot__btn">Отправить запрос</a>-->
<ul class="hot__infos">
<!-- <?php if( get_field("nalichie") ): ?>
<li class="hot__info">
Наличие:
<span class="red-color"><?php the_field( "nalichie" ); ?></span>
</li>
<?php endif; ?>
<?php if( get_field("garantiya") ): ?>
<li class="hot__info">
Гарантия:
<span class="red-color"><?php the_field( "garantiya" ); ?></span>
</li>
<?php endif; ?> -->
<?php if( get_field("cena") ): ?>
<li class="hot__info hot__price">
Цена:
<span class="red-color hot-price"><?php the_field( "cena" ); ?></span>
</li>
<?php endif; ?>
</ul>
</div>
</div>
</div>
</a>
</div>
<?php
endwhile;?>
<?php
if($max_pages > 1){ ?>
<a id="load-more-products" href="#" class="good__btn" data-page="2">Смотреть еще</a>
<?php }?>
<?php wp_reset_postdata();
endif;?>
</div>
functions.php
function get_hot_products() {
global $post;
$paged = $_POST['paged'] ? $_POST['paged'] : 1;
$return_html = '';
$args = array(
'post_type' => 'product',
'posts_per_page' => 2,
'post_status' => 'publish',
'meta_key' => 'hot',
'meta_value' => true
);
$products = new WP_Query($args);
$max_pages = $products->max_num_pages;
if ($products->have_posts()):
while ($products->have_posts()): $products->the_post();
$mainphoto = get_field("main_foto");
$get_image_id = $mainphoto[id];
$image_link = wp_get_attachment_image_url($get_image_id, "full");
$logo = get_field("logo_tovar");
$get_logo_id = $logo[id];
$logo_link = wp_get_attachment_image_url($get_logo_id, "full");
$title = get_the_title();
$permalink = get_the_permalink();
$cena = get_field("cena");
$return_html .= '<div class="hot__item"><a href="' . $permalink . '" title="' . title . '">';
if( get_field("hot_comment") ):
$hot_comment = get_field( "hot_comment" );
$return_html .= '<div class="hot_comment red-color"> <span></span>' . $hot_comment . '</div> ';
endif;
$return_html .='<div class="hot__imgs"><div class="item-fix-height fix-height_on-front"><div class="scale_block_animate csomor-image-zoom" style="background-image: url(' . $image_link . ');"></div></div></div>';
$return_html .='<div class="hot__text">';
$return_html .='<div class="hot__text_title"><p class="hot__name">' . $title . '</p></div>';
$return_html .='<div class="hot__text_about">';
if( get_field("model") ):
$model = get_field( "model" );
$return_html .= '<p class="hot__model"><b>Модель: </b><span class="red-color">' . $model . '</span></p>';
endif;
$return_html .='<div class="hot__descr">';
if( have_rows('harakteristiki_small') ):
$return_html .='<div class="subsection__chtitle">Характеристики</div><ul class="subsection__chlist">';
while( have_rows('harakteristiki_small')): the_row();
$har_title = get_sub_field( "har_title" );
$har_value = get_sub_field( "har_value" );
$return_html .='<li class="subsection__chitem__on_front_page"><span class="subsection__chvar">' . $har_title . '</span><span class="subsection__chval">' . $har_value . '</span></li>';
endwhile;
$return_html .='</ul>';
endif;
$return_html .='<div class="hot__bottom"><ul class="hot__infos"><li class="hot__info hot__price">Цена:<span class="red-color hot-price">' . $cena . '</span></li></ul></div>';
$return_html .='</div>';
$return_html .= '</div></div></a></div>';
endwhile;
endif;
if ($paged < $max_pages) { // if the current page is less than the total number of pages, then we display the button for loading
$next_page = $paged + 1; // in the date attributes of the button, we pass the number of the next page and the id of the current terms
$return_html .= '<a id="load-more-products" href="#" class="good__btn grey-bg" data-page="'. $next_page .'">Смотреть ещё</a>';
}
wp_reset_postdata();
echo $return_html; // returning the html code
wp_die(); // "die"
}
add_action('wp_ajax_get_hot_products', 'get_hot_products');
add_action('wp_ajax_nopriv_get_hot_products', 'get_hot_products');
2
Answers
I solved the problem by putting the output of 4 products instead of 2. But this is not quite the right decision. At the moment it is suitable, since I have only 8 "hot products" on the site
You are getting the
paged
value from the query string, but you’re not passing it into the WP_Query args, so it’s always grabbing the first ones.