How to change number of products shown on Featured Products on HomePage?

[Dziub3k]

ps_featuredproducts.tpl

 

{**
 * 2007-2017 PrestaShop
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * https://opensource.org/licenses/AFL-3.0
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to [email protected] so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
 * versions in the future. If you wish to customize PrestaShop for your
 * needs please refer to http://www.prestashop.com for more information.
 *
 * @author    PrestaShop SA <contact@prestashop.com>
 * @copyright 2007-2017 PrestaShop SA
 * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
 * International Registered Trademark & Property of PrestaShop SA
 *}
<section class="featured-products clearfix">
  <h1 class="h1 products-section-title text-uppercase">
    <!--{l s='Featured Products' d='Shop.Theme.Catalog'}-->
    Polecane Produkty
  </h1>
  <div class="products">
    {foreach from=$products item="product" }
      {include file="catalog/_partials/miniatures/product.tpl" product=$product}
    {/foreach}
  </div>
   <div class="all-product-link  h4" onclick="loadmore()" style="cursor: pointer;text-align: center;">
    {l s='Load more' d='Shop.Theme.Catalog'}<i class="material-icons">autorenew</i>
  </div>
  <a class="all-product-link float-xs-left float-md-right h4" href="{$allProductsLink}">
    {l s='All products' d='Shop.Theme.Catalog'}<i class="material-icons"></i>
  </a>
</section>
<script>
function loadmore(){
     $.ajax({
      url: 'https://xxx.pl/loadmore.php',
      type: 'POST',
      data: 'more=true',
        success: function(data) {
        }
      });
}
  </script>

 

  Featuered Products Module shows  20 products i want to make that if i click on div then it will show 20 more without deleting others  and reloading page. 

What exacly i need to put inside loadmore.php to make button working?:)   
 

[Dziub3k]

Fixed by myself.

 

My ps_featuredproducts.tpl file:

Your welcome:)

<section class="featured-products clearfix">
  <h1 class="h1 products-section-title text-uppercase">
    <!--{l s='Featured Products' d='Shop.Theme.Catalog'}-->
    Polecane Produkty
  </h1>
  <div class="products" id="productslist">
    {foreach from=$products item="product" } 

      {include file="catalog/_partials/miniatures/product.tpl" product=$product}
        
    {/foreach}
  </div>
   <div class="all-product-link  h4" id="loadmorebutton" onclick="zaladujwiecej()" style="cursor: pointer;text-align: center;">
    {l s='Załaduj więcej' d='Shop.Theme.Catalog'}<i class="material-icons"  id="animation-roll">autorenew</i>
  </div>
  <a class="all-product-link float-xs-left float-md-right h4" href="{$allProductsLink}">
    {l s='All products' d='Shop.Theme.Catalog'}<i class="material-icons">&#xE315;</i>
  </a>
</section>

<section class="featured-products clearfix">
  <h1 class="h1 products-section-title text-uppercase">
    <!--{l s='Featured Products' d='Shop.Theme.Catalog'}-->
    Polecane Produkty
  </h1>
  <div class="products" id="productslist">
    {foreach from=$products item="product" } 

      {include file="catalog/_partials/miniatures/product.tpl" product=$product}
        
    {/foreach}
  </div>
   <div class="all-product-link  h4" id="loadmorebutton" onclick="loadmore()" style="cursor: pointer;text-align: center;">
    {l s='Load More' d='Shop.Theme.Catalog'}<i class="material-icons"  id="animation-roll">autorenew</i>
  </div>
  <a class="all-product-link float-xs-left float-md-right h4" href="{$allProductsLink}">
    {l s='All products' d='Shop.Theme.Catalog'}<i class="material-icons">&#xE315;</i>
  </a>
</section>
<script>
$(document).ready(function () {
    size_li = $("#productslist article").size();
    x=100;
    $('#productslist article:lt('+x+')').show();

});
    function loadmore(){
        x= (x+20 <= size_li) ? x+20 : size_li;
        $('#productslist article:lt('+x+')').show();
      }
</script>