by

Koustav

18 Feb 2015, 06:51 am

about the author

A passionate back-end developer, he has a flair for writing as well. He loves reading in his pass time. A good sportsman, he loves playing soccer. He is as much dedicated a player as a web-developer. He also has an inclination for photography.

About Koustav

Lazy Loader In WordPress WooCommerce Product Listing Page

WooCommerce Product Listing Page

When we create a WooCommerce product listing page, we can see pagination automatically. Recently we came across a project which had the requirement of having lazy loader in the product listing page. We make it easily using few jQuery Script and Ajax.

 

Most WordPress developers use only jQuery lazy loader for loading more products or content. When we use this all the products and content load at a time. Here Ajax concept came up, because Ajax loads content part by part as you configure it.

Also Read: Where To Outsource Web Design Projects – India Or Philippines?

To create Ajax lazy loader in WooCommerce product listing page….

1.        Copy WooCommerce templates from your plug-in folder and paste it in your custom themes folder.

2.        Find ‘archive-product.php’ in WooCommerce templates . Add your product listing page HTML here and a loader .gif image at the bottom of this HTML see below:


2.1.      <div class="list-page-right-inner" id="k_test">

2.2.       <?php //do_action( 'woocommerce_archive_description' );?>

2.3.      <?php   if ( have_posts() ) :

2.4.                    woocommerce_product_loop_start();

2.5.                    while ( have_posts() ) : the_post();

2.6.                    wc_get_template_part( 'content', 'product' );

2.7.                    endwhile;

2.8.      ?>

2.9.      <?php woocommerce_product_loop_end(); ?>

2.10.   <?php //do_action( 'woocommerce_after_shop_loop' ); ?>

2.11.   <?php elseif ( ! woocommerce_product_subcategories( array( 'before' => woocommerce_product_loop_start( false ), 'after' => woocommerce_product_loop_end( false ) ) ) ) : ?>

2.12.   <?php echo '<p class="no_product"><img src="'.esc_url( get_template_directory_uri() ).'/images/no-product-found.png" /></p>' ?>

2.13.   <?php endif; ?>

2.14.    </div>

2.15.   <div class="lazy_lode_img" style="text-align: center; display: none;"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/loading.gif"></div>

3.        Set flag variable equal to 1 and set page number  equal to 0.

4.        Write jQuery for window scroll function. Inside the function first calculate the total height of the website “$(window).height()”. Following this calculate the height of total document “$(document).height()”. Subtract window height from document height.

5.        Each time the scroll top value equals to window height deducted from the document height, the page number increases by 1. Now check if the flag value equals to 1 or not. If it is 1, configure Ajax.

6.        Send the page number to the Ajax page for calculation of pagination.


6.1.      <script>

6.2.      var flag=1;

6.3.      var limit=0;

6.4.      $(window).scroll(function(){

6.5.         var height=$('#k_test').height();

6.6.         if($(window).scrollTop() == $(document).height() - $(window).height()){

6.7.

6.8.          limit++;

6.9.          if(flag==1)

6.10.       {

6.11.         $(".lazy_lode_img").css('display','block');//display loading image

6.12.         $.ajax({

6.13.                                    url:"<?php bloginfo('template_url');?>/ajax/ajax_laziloder.php", // ajax page

6.14.                                                                   type:'POST',

6.15.                                                                   data:{ 'paged':limit}, // send page no

6.16.                                                                   dataType:"html",

6.17.                                                                   success: function(product_data){

6.18.                                                                   }

6.19.                                                                   });

6.20.    }

6.21.      }

6.22.     });

6.23.   </script>

7.        Now write a query for fetching the product by page limit. Check out the admin panel for the number of posts displayed in the product listing page.

7.1.

WordPress WooCommerce Product Listing Page

8.        Calculate the limit for query. You will find that I have set 4 posts per page so that each page contains 4 posts/products. Now, the page number is multiplied by the posts per page. Each time when I call Ajax in the previous window, the scrollTop function page number gets increased. Set the WP_Query array posts_per_page equal to predefined posts per page and offset equals to the calculated page number. After setting the query if no product is found, it will return only “0”.


8.1.      <?php

8.2.      $page_no=$_POST['paged']*4;

8.3.       $post_per_page=4;

8.4.      $args = array(

8.5.         'posts_per_page'   => $post_per_page,//set post per page

8.6.         'offset'           => $page_no,//set offset for limit

8.7.         'post_type' => 'product',

8.8.         'product_cat'=> $cat_id,

8.9.         'post_status'=>'publish',

8.10.       'meta_query' => array(

8.11.       'relation' => 'OR',

8.12.           array(

8.13.                 'key' => '_price',

8.14.                 'value' => array($smaillprice, $bigprice),

8.15.                 'type' => 'NUMERIC',

8.16.                 'compare' => 'BETWEEN'

8.17.                 )

8.18.       )

8.19.   );

8.20.   $query = new WP_Query( $args );

8.21.   if ( $query->have_posts() ) {

8.22.   while ( $query->have_posts() ) : $query->the_post();

8.23.   $price = get_post_meta( $query->post->ID, '_regular_price', true );

8.24.   $price=round($price,2);

8.25.   if ((int) $price == $price)

8.26.    {

8.27.      $price=$price.'.00';

8.28.   }

8.29.   echo '<li><a href="'.get_permalink( $query->post->ID ).'">'.get_the_post_thumbnail( $query->post->ID, 'thumbnail' ).'<p>'.$query->post->post_title.' </p><span class="price"><span class="amount">$'.$price.'</span></span><span class="view-details">View Detail</span></a></li>';

8.30.   endwhile;

8.31.   }

8.32.   else

8.33.   {

8.34.    echo ‘0’;

8.35.   }

8.36.   ?>

9.        Go back to the ‘archive-product.php’ Ajax success function. If the return id of product_data does not equal to ‘0’ then hide the loader image first and then append return product_data HTML in the product listing page. Else set flag equals to ‘0’.


9.1.      if(img_popup!=0)

9.2.       {

9.3.      $( ".products" ).append(img_popup);

9.4.       $(".lazy_lode_img").css('display','none');

9.5.      }

9.6.       else

9.7.      {

9.8.      flag=0;

9.9.      $('#k_test').append('<div class="news" id="no_news" style="text-align:center;">NO MORE PRODUCT</div>');

9.10.   $(".lazy_lode_img").css('display','none');

9.11.   }

It’s done now. You can see your page displaying the product using lazy load and through this process you can reduce your page loading time. This is because the product is loaded in parts depending on scroll-down.

by

Koustav

18 Feb 2015, 06:51 am

about the author

A passionate back-end developer, he has a flair for writing as well. He loves reading in his pass time. A good sportsman, he loves playing soccer. He is as much dedicated a player as a web-developer. He also has an inclination for photography.

About Koustav
Comment with Facebook

trending

Featured Posts

Editors Choice

Reviews