Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Isotope and infinite scroll

Hello, I have a shop with products Isotope filters and products are on bdd (MySQL).

When I make a search, I would want "pagination" and not all the product loaded.

Can you help me to put isotope pagination?

Here my search page exemple (products loaded are on database): http://www.sxmdiscount.com/recherchePix.php?mots=lego

Thanks.

User Gravatar

mani

Posted Jun 1 2014 18:29 UTC

$100


  • Assigned To jawish2208
  • Solved
  • isotope
    infinitescroll
    isotope-on-append
  • 8438 Views

28 Replies


You might initialize isotope in the following way:

var $container = $('#myDiv'); // replace myDiv with your container ID.
var page = 1; // initialize first page

// Fire Isotope only when images are loaded
$container.imagesLoaded(function(){
    $container.isotope({
        itemSelector : '.post',
        masonry: {
            isFitWidth: true,
            gutter: 20
        }
    });
});

Then there are several ways to achieve the goal. One way can be like this.. Initially you can load some data for example first n items. n items per page. LIMIT 0 n. Then send ajax request when user scroll close to bottom of the page that retrieve next n items and append those to isotope.

$(window).scroll(function () { 
   if ($(window).scrollTop() >= $(document).height() - $(window).height() - 100) { // height - 100px
      // load data and append to isotope
      page = page +1;
      $.ajax({
        url: url, // your URL
        type: "POST",
        data: {page : page}, // send page number
        success: function(responseData) {
            $container.isotope( 'appended', responseData ); // appended new data
        },
    });
   }
});
User Gravatar

rashidul

Posted Jun 2 2014 1:24 UTC

-

User Gravatar

mani

Posted Jun 2 2014 6:44 UTC

Rashidul,

I have put the code at the end of the page and nothing happend.

var $container = $('#isotopeContainer'); // replace myDiv with your container ID.
var page = 1; // initialize first page

// Fire Isotope only when images are loaded
$container.imagesLoaded(function(){
    $container.isotope({
        itemSelector : '.isotope--target',
        masonry: {
            isFitWidth: true,
            gutter: 20
        }
    });
}); 

$(window).scroll(function () { 
   if ($(window).scrollTop() >= $(document).height() - $(window).height() - 100) { // height - 100px
      // load data and append to isotope
      page = page +1;
      $.ajax({
        url:  "http://www.sxmdiscount.com/recherchePix2.php", // your URL
        type: "POST",
        data: {page : page}, // send page number
        success: function(responseData) {
            $container.isotope( 'appended', responseData ); // appended new data
        },
    });
   }
});

Can I give you the full code of my page so you could do it?

Waiting for your answer...

User Gravatar

mani

Posted Jun 2 2014 7:12 UTC

it seems time expires. yes, if u send the code, I can do the mod for you.

User Gravatar

rashidul04

Posted Jun 2 2014 9:59 UTC

The entire code of the page below. You will see your code at the end of the page.

Thanks!

    <?php 

ob_start ();
session_start(); // on démarre la session ( pas de html avant le session start !!! )
if (isset($_SESSION['panier'])) {
    $listepanier= $_SESSION['panier'];
    $nbpanier=count($listepanier);
}
else
{
    $nbpanier=0;
}


function Optimisesearch($texte)
{    
// Définition des caractères accentués
$car_speciaux = array( 'À', 'Á', 'Â', 'Ã', 'Ä', 'Å', 'Æ', 'à', 'á', 'â', 'ã', 'ä', 'å', 'æ', 'È', 'É', 'Ê', 'Ë', 'è', 'é', 'ê', 'ë', 'Ì', 'Í', 'Î', 'Ï', 'ì', 'í', 'î', 'ï', 'Ò', 'Ó', 'Ô', 'Õ', 'Ö', 'Ø', 'ò', 'ó', 'ô', 'õ', 'ö', 'ø', 'Ù', 'Ú', 'Û', 'Ü', 'ù', 'ú', 'û', 'ü', 'ß', 'Ç', 'ç', 'Ð', 'ð', 'Ñ', 'ñ', 'Þ', 'þ', 'Ý' );
// ... et de leurs "équivalents" non-accentués
$car_normaux = array( 'a', 'a', 'a', 'a', 'a', 'a', 'a', 'a', 'a', 'a', 'a', 'a', 'a', 'a', 'e', 'e', 'e', 'e', 'e', 'e', 'e', 'e', 'i', 'i', 'i', 'i', 'i', 'i', 'i', 'i', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'u', 'u', 'u', 'u', 'u', 'u', 'u', 'u', 'b', 'c', 'c', 'd', 'd', 'n', 'n', 'p', 'p', 'y' );

// On commence par supprimer les accents
$texte = str_replace($car_speciaux, $car_normaux, $texte);

// On supprime les entités html
$texte = strip_tags( $texte );

// On remplace les caractères non-alphanumériques par le séparateur $sep_mots
$texte = preg_replace( "/[^A-Za-z0-9]+/", "-", $texte );

// On supprime le séparateur s'il se trouve en début ou fin de chaîne
$texte = trim( $texte, "-" );

// On limite la chaine à un nombre maxi de caractères (ici 50 caractères)
$texte = substr( $texte, 0, 1000 );

// On convertit le tout en minuscules
$texte = strtolower( $texte );


// On retourne le résultat
return ( $texte );
}

$mots=$_REQUEST['mots'];




 if ($mots=="") {
    print "<SCRIPT LANGUAGE='JavaScript'>
        alert('Veuillez rentrer un mot pour votre recherche !');
        document.location.href="javascript:history.go(-1)";
        </SCRIPT>";
}


include ("session.php"); 



                      ?>



<!DOCTYPE html>
<!--[if lt IE 8]>      <html class="no-js lt-ie10 lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie10 lt-ie9"> <![endif]-->
<!--[if IE 9]>         <html class="no-js lt-ie10"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
  <head>
    <meta charset="utf-8">

   <meta name="author" content="sxmweb" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title><? print "Recherche - $mots - $titre"; ?></title>

    <!--  = Google Fonts =  -->
    <script type="text/javascript">
        WebFontConfig = {
            google : {
                families : ['Open+Sans:400,700,400italic,700italic:latin,latin-ext,cyrillic', 'Pacifico::latin']
            }
        };
        (function() {
            var wf = document.createElement('script');
            wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
            wf.type = 'text/javascript';
            wf.async = 'true';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(wf, s);
        })();
    </script>

    <!-- Twitter Bootstrap -->
    <link href="<? print "$roots"; ?>/stylesheets/bootstrap.css" rel="stylesheet">
    <link href="<? print "$roots"; ?>/stylesheets/responsive.css" rel="stylesheet">
    <!-- Slider Revolution -->
    <link rel="stylesheet" href="<? print "$roots"; ?>/js/rs-plugin/css/settings.css" type="text/css"/>
    <!-- jQuery UI -->
    <link rel="stylesheet" href="<? print "$roots"; ?>/js/jquery-ui-1.10.3/css/smoothness/jquery-ui-1.10.3.custom.min.css" type="text/css"/>
    <!-- PrettyPhoto -->
    <link rel="stylesheet" href="<? print "$roots"; ?>/js/prettyphoto/css/prettyPhoto.css" type="text/css"/>
    <!-- main styles -->
        <link href="<? print "$roots"; ?>/stylesheets/main.css" rel="stylesheet">


    <!-- Modernizr -->
    <script src="js/modernizr.custom.56918.js"></script>

    <!-- Fav and touch icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="<? print "$roots"; ?>/images/apple-touch/144.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="<? print "$roots"; ?>/images/apple-touch/114.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="<? print "$roots"; ?>/images/apple-touch/72.png">
    <link rel="apple-touch-icon-precomposed" href="<? print "$roots"; ?>/images/apple-touch/57.png">
    <link rel="shortcut icon" href="<? print "$roots"; ?>/images/apple-touch/57.png">


 <script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-35719194-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>


  </head>

    <body class="boxed pattern-9">

   <div class="master-wrapper">
<? include ("headerPix.php"); ?>

    <!--  ==========  -->
    <!--  = Main Menu / navbar =  -->
    <!--  ==========  -->
    <div class="navbar navbar-static-top" id="stickyNavbar">
      <div class="navbar-inner">
        <div class="container">
          <div class="row">
            <div class="span8">
                <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>

                <!--  ==========  -->
                <!--  = Menu =  -->
                <!--  ==========  -->
                <div class="nav-collapse collapse">
                  <? include ("menuPix.php"); ?>

                </div><!-- /.nav-collapse -->
            </div>
     <div class="span2">
            <!--  ==========  -->
                  <!--  = Search form =  -->
                  <!--  ==========  -->
                   <form class="navbar-form pull-right" action="recherchePix.php" method="get">
                      <button type="submit"><span class="icon-search"></span></button>
                      <input type="text" class="span1" name="mots" id="navSearchInput">
                  </form>
               </div>
            <!--  ==========  -->
            <!--  = Cart =  -->
            <!--  ==========  -->
       <? include ("panierPix.php"); ?>
            </div> <!-- /cart -->
          </div>
        </div>
      </div>
    </div> <!-- /main menu -->




    <!--  ==========  -->
    <!--  = Breadcrumbs =  -->
    <!--  ==========  -->
    <div class="darker-stripe">
        <div class="container">
            <div class="row">
                <div class="span12">







                    <ul class="breadcrumb">

                    <h3><span class="light"></span></h3>


                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="push-up blocks-spacer">
            <div class="row">



                <!--  ==========  -->
                <!--  = Main content =  -->
                <!--  ==========  -->
                <section class="span12">

                    <!--  ==========  -->
                    <!--  = Title =  -->
                    <!--  ==========  -->
                    <div class="underlined push-down-20">
                        <div class="row">
                            <div class="span7">
                                <h3><span class="light">Résultat de votre</span> recherche</h3>
                            </div>
                            <div class="span5 align-right sm-align-left">
                                <div class="form-inline sorting-by" id="tourStep4">
                                    <label for="isotopeSorting" class="black-clr">trier:</label>
                                    <select id="isotopeSorting" class="span3">
                                        <option value='{"sortBy":"price", "sortAscending":"true"}'>par prix (- / +) &uarr;</option>
                                        <option value='{"sortBy":"price", "sortAscending":"false"}'>par prix (+ / -) &darr;</option>
                                        <option value='{"sortBy":"name", "sortAscending":"true"}'>par noms (a / z) &uarr;</option>
                                        <option value='{"sortBy":"name", "sortAscending":"false"}'>par noms (z / a) &darr;</option>

                                        <!--<option value='{"sortBy":"popularity", "sortAscending":"true"}'>By Popularity (Low to High) &uarr;</option>
                                        <option value='{"sortBy":"popularity", "sortAscending":"false"}'>By Popularity (High to Low) &darr;</option>-->
                                    </select>
                                </div>
                              <!--  <div class="view-switch">
                                    <a href="shop.html" class="btn btn-primary"><i class="icon-th"></i></a>
                                    <a href="shop-list-view.html" class="btn"><i class="icon-list"></i></a>
                                </div>-->
                            </div>
                        </div>
                    </div> <!-- /title -->

                    <!--  ==========  -->
                    <!--  = Products =  -->
                    <!--  ==========  -->
                    <div class="row popup-products">


                        <div id="isotopeContainer" class="isotope-container">



 <?
                // la variable $mot est envoyée par le formulaire de recherche. 
                // je fractionne la recherche en mots $motrecherche(1) $motrecherche(2) ... 
                $motslib=Optimisesearch($mots);


                //compte le nb total

                $sql0="SELECT count(distinct(ref)) FROM `produitsPix` WHERE (`desc` LIKE '%" . $mots . "%' OR `libelle` LIKE '%" . $mots . "%' OR `appel` LIKE '%" . $motslib . "%') ";

                $WHERE  = "WHERE (`desc` LIKE '%" . $mots . "%' OR `libelle` LIKE '%" . $mots . "%' OR `appel` LIKE '%" . $motslib . "%')";



                //print "$sql0<br />";
                    $req0 = mysql_query($sql0) or die('Erreur SQL !<br>'.$sql0.'<br>'.mysql_error());
                    $data0= mysql_fetch_row($req0);
                    $nbtrouversimple=$data0[0];

                    if($nbtrouversimple==0){

                           $motrecherche=explode(" ",$mots);         
                           $WHERE  = "WHERE";



                           $count = 0; 
                           reset ($motrecherche); 
                           while(list($key, $data) = each($motrecherche)) 
                              { 
                                            $datalib=Optimisesearch($data);

                                                 $WHERE .= " `desc`LIKE '%" . $data . "%' OR `libelle` LIKE '%" . $data . "%' OR `appel` LIKE '%" . $datalib . "%' OR";  

                            } 
                            $WHERE = substr($WHERE, 0, -2); 

                    }





                //compte le nb total

                $sql0="SELECT count(distinct(ref)) FROM `produitsPix` $WHERE ";



                $req0 = mysql_query($sql0) or die('Erreur SQL !<br>'.$sql0.'<br>'.mysql_error());
                $data0= mysql_fetch_row($req0);
                    $nbtrouver=$data0[0];




                $sql2="SELECT id, ref, cat3, marque,libelle, prix, image, appel FROM `produitsPix` $WHERE";
                $req2 = mysql_query($sql2) or die('Erreur SQL !<br>'.$sql2.'<br>'.mysql_error());
                while($data2= mysql_fetch_row($req2)){
                        $idduproduit=$data2[0];
                        $refproduit=$data2[1];

                        $cat3=$data2[2];
                        $marque=$data2[3];

                        $libeleproduit=$data2[4];
                        $prix=$data2[5];
                        $image=$data2[6];
                        $appelproduit=$data2[7];

                        //TGCA
                        //$prix = $prix*1.02 ;
                        $prix = ceil($prix);                      
                        //if ($prix!=999&&$prix!=9999){

                      ?>





                         <div class="span3 isotope--target filter--<? print "$cat3"; ?>" data-price="<? print "$prix"; ?>" data-popularity="1" data-size="s|l" data-color="green|purple" data-brand="<? print "$marque"; ?>">
                                <div class="product">
                                    <div class="product-inner">

                                        <div class="product-img">
                                            <div class="picture">
                                                <a href="<? print "$roots"; ?>/produit-<? print "$idduproduit-$appelproduit"; ?>.html"><img width="100%" alt="" src="<? print "$image"; ?>" /></a>
                                                <div class="img-overlay">
                                                    <a class="btn more btn-primary" href="<? print "$roots"; ?>/produit-<? print "$idduproduit-$appelproduit"; ?>.html">Plus</a>
                                                    <a class="btn buy btn-danger" href="<? print "$roots/ajoutpanier.php?idproduit=$idduproduit&nb=1"; ?>">Ajouter au panier</a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="main-titles no-margin">
                                            <h4 class="title"><? print "$prix"; ?>€</h4>
                                            <h5 class="no-margin isotope--title"><? print "$libeleproduit"; ?></h5>
                                            <p>MARQUE: <? print "$marque"; ?></p>

                                        </div>

                                    </div>
                                </div>
                            </div> <!-- /single product -->










 <? } //} ?>





                        </div>



                    </div>
                    <hr />
                </section> <!-- /main content -->
            </div>
        </div>
    </div> <!-- /container -->


        <!--  ==========  -->
    <!--  = Footer =  -->
    <!--  ==========  -->
 <? include ("bas.php"); ?>


    <!--  ==========  -->
    <!--  = JavaScript =  -->
    <!--  ==========  -->

    <!--  = FB =  -->

    <div id="fb-root"></div>
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=126780447403102";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>


    <!--  = jQuery - CDN with local fallback =  -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
    if (typeof jQuery == 'undefined') {
        document.write('<script src="<? print "$roots"; ?>/js/jquery.min.js"></script>');
    }
    </script>

    <!--  = _ =  -->
    <script src="<? print "$roots"; ?>/js/underscore/underscore-min.js" type="text/javascript"></script>

    <!--  = Bootstrap =  -->
    <script src="<? print "$roots"; ?>/js/bootstrap.min.js" type="text/javascript"></script>

    <!--  = Slider Revolution =  -->
    <script src="<? print "$roots"; ?>/js/rs-plugin/js/jquery.themepunch.plugins.min.js" type="text/javascript"></script>
    <script src="<? print "$roots"; ?>/js/rs-plugin/js/jquery.themepunch.revolution.min.js" type="text/javascript"></script>

    <!--  = CarouFredSel =  -->
    <script src="<? print "$roots"; ?>/js/jquery.carouFredSel-6.2.1-packed.js" type="text/javascript"></script>

    <!--  = jQuery UI =  -->
    <script src="<? print "$roots"; ?>/js/jquery-ui-1.10.3/js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
    <script src="<? print "$roots"; ?>/js/jquery-ui-1.10.3/touch-fix.min.js" type="text/javascript"></script>

    <!--  = Isotope =  -->
    <script src="<? print "$roots"; ?>/js/isotope/jquery.isotope.min.js" type="text/javascript"></script>

    <!--  = Tour =  -->
    <script src="<? print "$roots"; ?>/js/bootstrap-tour/build/js/bootstrap-tour.min.js" type="text/javascript"></script>

    <!--  = PrettyPhoto =  -->
    <script src="<? print "$roots"; ?>/js/prettyphoto/js/jquery.prettyPhoto.js" type="text/javascript"></script>

    <!--  = Google Maps API =  -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="<? print "$roots"; ?>/js/goMap/js/jquery.gomap-1.3.2.min.js"></script>

    <!--  = Custom JS =  -->
    <script src="<? print "$roots"; ?>/js/custom.js" type="text/javascript"></script>
  <?
                         $reqmaxprix=mysql_query("select max(prix) from `produitsPix` where `cat1`='$idcatencour' OR  `cat2`='$idcatencour' OR  `cat3`='$idcatencour';" ); 
                         $maxprix=mysql_result($reqmaxprix,0,"max(prix)" ); 
                         $maxprix = ceil($maxprix);


                         ?>
 <script>


 var WebMarketVars = {
    currencyBefore: false, // true foe the currencies like USD, where the symbol comes before the number ($123.45). False for the symbol after the number (123,45 €) 
    currencySymbol: "€",
    priceRange: [ 0, "<? print "$maxprix"; ?>" ], // minimum and maximum range for the price range selector
    priceStep: 50
};

  //  ========== 
    //  = Isotope = 
    //  ========== 
    (function() {
        var $container = $("#isotopeContainer");

        $container.imagesLoaded(function() {
            $container.isotope({
                itemSelector: ".isotope--target",
                layoutMode: "fitRows",
                getSortData: {
                    price: function($elm) {
                        return $elm.data("price");
                    },
                    name: function($elm) {
                        return $elm.find(".isotope--title").text();
                    },
                    popularity: function($elm) {
                        return $elm.data("popularity");
                    }
                }
            });

            // jQuery UI slider
            var prepareCurrency = function(value) {
                return WebMarketVars.currencyBefore ? WebMarketVars.currencySymbol + value : value + WebMarketVars.currencySymbol;
            };
            var $slider = $(".jqueryui-slider-container > div");
            $slider.slider({
                range: true,
                min: WebMarketVars.priceRange[0],
                max: WebMarketVars.priceRange[1],
                values: WebMarketVars.priceRange,
                step: WebMarketVars.priceStep,
                slide: function(ev, ui) {
                    $(this).parent().siblings(".min-val").val(prepareCurrency(ui.values[0]));
                    $(this).parent().siblings(".max-val").val(prepareCurrency(ui.values[1]));
                },
                change: function() {
                    updateIsotopeFiltering();
                },
                create: function() {
                    var $sliderParent = $(this).parents(".accordion-body");
                    $sliderParent.find(".min-val").val(prepareCurrency($(this).slider("values", 0)));
                    $sliderParent.find(".max-val").val(prepareCurrency($(this).slider("values", 1)));
                }
            });
            //  ========== 
            //  = Filters for sidebar = 
            //  ========== 
            var $selectableElms = $(".sidebar-filters .selectable");
            $selectableElms.click(function(ev) {
                ev.preventDefault();
                $(this).toggleClass("selected");
                updateIsotopeFiltering();
            });
            $(".sidebar-filters .accordion-toggle").click(function() {
                setTimeout(updateIsotopeFiltering, 350);
            });
            $("#removeFilters").click(function(ev) {
                ev.preventDefault();
                $selectableElms.removeClass("selected");
                updateIsotopeFiltering();
            });
            var updateIsotopeFiltering = function() {
                var selectedElms = $(".sidebar-filters .in").find(".selectable.selected[data-target]").not(".detailed"), detailedElms = $(".sidebar-filters .in").find(".detailed.selected[data-target]"), filterString, filter, types = [];
                if (selectedElms.length > 0 || detailedElms.length > 0) {
                    $("#removeFilters").fadeIn();
                } else {
                    $("#removeFilters").fadeOut();
                }
                if (selectedElms.length < 1) {
                    filterString = ".isotope-container .isotope--target";
                } else {
                    var filterArr = [];
                    selectedElms.each(function() {
                        var data = $(this).data("target");
                        if ("undefined" !== typeof data) {
                            filterArr.push($(this).data("target"));
                        }
                    });
                    filterString = filterArr.join(",");
                }
                // basic filtering
                filter = $(filterString);
                // slider price filtering, after we have the right categories already
                if ($slider.parents(".accordion-body").hasClass("in")) {
                    filter = filter.filter(function() {
                        var $this = $(this);
                        return $this.data("price") >= $slider.slider("values", 0) && $this.data("price") <= $slider.slider("values", 1);
                    });
                }
                // more precise filters for the size, color, brand ...
                detailedElms.each(function() {
                    types.push($(this).data("type"));
                });
                types = _.uniq(types);
                if (detailedElms.length > 0) {
                    _.each(types, function(type) {
                        var allowedValues = [];
                        detailedElms.filter('[data-type="' + type + '"]').each(function() {
                            allowedValues.push($(this).data("target"));
                        });
                        filter = filter.filter(function() {
                            var $this = $(this);
                            return _.some($this.data(type).split("|"), function(val) {
                                return _.contains(allowedValues, val);
                            });
                        });
                    });
                }
                $container.isotope({
                    filter: filter
                });
            };
            updateIsotopeFiltering();
            //  ========== 
            //  = Sorting = 
            //  ========== 
            $("#isotopeSorting").change(function() {
                var parameters = jQuery.parseJSON($(this).val());
                parameters.sortAscending = "true" === parameters.sortAscending ? true : false;
                $container.isotope(parameters);
            });
            $("#isotopeSorting").trigger("change");
        });
    })();
</script>


<script>    var $container = $('#isotopeContainer'); // replace myDiv with your container ID.
var page = 1; // initialize first page

// Fire Isotope only when images are loaded
$container.imagesLoaded(function(){
    $container.isotope({
        itemSelector : '.isotope--target',
        masonry: {
            isFitWidth: true,
            gutter: 20
        }
    });
}); 

$(window).scroll(function () { 
   if ($(window).scrollTop() >= $(document).height() - $(window).height() - 100) { // height - 100px
      // load data and append to isotope
      page = page +1;
      $.ajax({
        url:  "http://www.sxmdiscount.com/recherchePix2.php", // your URL
        type: "POST",
        data: {page : page}, // send page number
        success: function(responseData) {
            $container.isotope( 'appended', responseData ); // appended new data
        },
    });
   }
});
</script>

  </body>
</html>
User Gravatar

mani

Posted Jun 2 2014 13:23 UTC

Do you need pagination as in page selectors like: << < 1 2 3 ... 98 99 100 > >>

Or do you need infinitescroll type of dynamically appending extra results as page is scrolled?

User Gravatar

jawish2208

Posted Jun 3 2014 6:31 UTC

Hi,

The code is very complicated to read. However I make some sort of adjustment. It's requires 2 files listed below. I'm afraid I'll not be able to allocate more time for this. If doesn't work, you would be able to find some help/suggestion on how to do, I hope

https://dl.dropboxusercontent.com/u/43106216/cc/recherchePix2.php https://dl.dropboxusercontent.com/u/43106216/cc/products.php

Thanks

User Gravatar

rashidul

Posted Jun 3 2014 6:51 UTC

Hi. Im sorry but I really will not post any code here. Just expect to help.

But you actually need to solve this problem on the server side part too.

You server needs to be able to render each page to send when scrolling triggers the ajax request.

So, youll need to develop (or use one available on web) that splits your content withing pages and have the ability to send the page part as requested.

So you can manage to declare a global that have the pages that you already downloaded. Each time you download one more page, the global get a +1. Your AJAX will know which page to request and your server side structure will send it, so isotope can append it.

Hope it helps.

User Gravatar

appocc

Posted Jun 3 2014 7:01 UTC

Here you go.

http://1drv.ms/1hVU8yF

Changed your code to do a couple of things:

  • Uses jscroll library for infinite scrolling. (Please add the script to the HTML yourself. Downloadable from http://jscroll.com/)
  • Paginates search results via PHP
  • Moved sorting from being JS/Isotope driven to PHP/MySQL driven
  • Search result, with pagination and sorting options selected always have their unique URL so that it can be shared and output is always same. (eg http://www.sxmdiscount.com/recherchePix.php?mots=lego&sortby=price&sortdirection=true&page=3)
  • When end of page is reached, jscroll loads the new page and inserts the new results into the current page, upon which isotope re-layouts the page.
  • You can set the pagination page size (number of items loaded each time) via the $paginationSize PHP variable towards the top of the file.

Hope that does it.

User Gravatar

jawish2208

Posted Jun 3 2014 8:27 UTC

Hi Jawish2208,

thank you very much for your code but the pagination doesn't work :-(

You can try the link below, pagination is not working and there is 2 or 3 whites space every 3 lines: http://www.sxmdiscount.com/recherchePix2.php?mots=lego&sortby=price&sortdirection=true&page=1

Also, like you said, I added the script jscroll but maybe it is not good? I add it below custom JS at the end of the page...

<script src="<? print "$roots"; ?>/js/jscroll/jquery.jscroll.min.js" type="text/javascript"></script>

Waiting for your help to solve this task...

Regards,

Emmanuel

User Gravatar

mani

Posted Jun 3 2014 18:52 UTC

did u check my code

User Gravatar

rashidul

Posted Jun 3 2014 23:54 UTC

Sorry, there was a little bug that caused a JS error. Here, fixed:

http://1drv.ms/1hZ5EZS

User Gravatar

jawish2208

Posted Jun 4 2014 1:42 UTC

Hi Rashidul,

Yes I had checked your code but pagination was not working and you told me that you will not have more time for me so...

But I would want to say thank you very much Rashidul for your help!

regards.

User Gravatar

mani

Posted Jun 4 2014 5:59 UTC

Hi Jawish2208,

I have tested with new code but I have a new error message at the top of the page and the "Next" button for pagination doesn't appear.

http://www.sxmdiscount.com/recherchePix3.php?mots=lego&sortby=price&sortdirection=true&page=1

waiting for your help...

regards.

User Gravatar

mani

Posted Jun 4 2014 6:03 UTC

Hi Jawish2208,

please let me know if you will be able to allocate just some time to solve my problem of "NEXT" button who doesn't appear...

Looking forward to receive an answer...

User Gravatar

mani

Posted Jun 5 2014 5:22 UTC

Hi

I had hidden the next link via CSS. Try this, fixes the other error too.

Try this: https://onedrive.live.com/redir?resid=FEC83A80FA63622!2471&authkey=!ANf94rdRX5qoDuo&ithint=file%2c.zip

User Gravatar

jawish2208

Posted Jun 5 2014 8:24 UTC

Mani...

Try to get all your collection and divide it for the number of items that you want on the page. So, you'll know how many pages you have. Then make an iterator to, for each page, create a link (a

  • perhaps) pointing to the content with the page as a parameter. So, your php will get this parameter to render the page like:

    from Parameter*[items per page] to (Parameter*[items per page]+[item per page])
    

    I present you the logic, so youll not need to pay for it later.

    Im sorry but I dont know php but ruby. If you want, I can send the code for you in Ruby (it's like english) so you can rewrite in php, it's quite simple.

  • User Gravatar

    appocc

    Posted Jun 5 2014 9:51 UTC

    Hi appocc,

    I appreciate your help but jawish2208 began to work on my problem so it is normal that I pay for the work ;-)

    thank you again for your post!

    User Gravatar

    mani

    Posted Jun 5 2014 10:44 UTC

    np

    User Gravatar

    appocc

    Posted Jun 5 2014 10:51 UTC

    Jawish2208,

    Now we have a new problems :-(

    On the initial search for the word "lego" I have more than 350 items. http://www.sxmdiscount.com/recherchePix.php?mots=lego

    But with the new code, you will see just 24 items for lego and after items who are not "lego"... Your new code here: http://www.sxmdiscount.com/recherchePix4.php?mots=lego&sortby=price&sortdirection=true&page=1

    Also, we can see "next" button behind the first item.

    So the new problems:

    • For the search for the word "lego" we just have 24 items instead of 350 Some results are immaterial to the word "lego"

    • "Next" visible behind the first item.

    Hope you understand. Waiting for your help...

    User Gravatar

    mani

    Posted Jun 5 2014 10:59 UTC

    Your jscroll next link is wrong.

    ?page=3
    

    It should include category etc. Then it wont show random products. For example:

    ?mots=lego&sortby=price&sortdirection=true&page=3
    

    Also you dont need to have next link on every product. Add just one to bottom of the page. Take it out of while and add it to bottom of the page.

    To hide it

    <a id="jscroll-next" style="display:none;" href="/recherchePix4.php?page=3">Next</a>
    

    I edited your code, give it a try.

    Edited code ZIP

    User Gravatar

    renekorss

    Posted Jun 5 2014 23:23 UTC

    Hello renekorss!

    and thanks you for your help!

    You can see the result below but when I scroll, it just go to page 2 instead of 3 and 4 and 5 etc...

    Also you can see that when you scroll and it is on page=2, the products are superposed...

    http://www.sxmdiscount.com/recherchePix5.php?mots=lego&sortby=price&sortdirection=true&page=1

    User Gravatar

    mani

    Posted Jun 6 2014 5:34 UTC

    Hi Mani,

    My guess is your PHP environment does not set the $_SERVER['QUERY_STRING'] variable correctly. Here's a version that uses the $_SERVER['REQUEST_URI'] variable instead, which may work. Double check with phpinfo() about both variables if this doesn't work either.

    http://1drv.ms/1nWelfJ

    User Gravatar

    jawish2208

    Posted Jun 6 2014 6:53 UTC

    Hi Jawish,

    look at the result: http://www.sxmdiscount.com/recherchePix6.php?mots=lego&sortby=price&sortdirection=false&page=1

    On the first page it is ok On page=2 there are products who have no relations with the word "lego" On page=3 product "lego" appears but they are superposed and there is a big white space before the new products...

    You see the problem?

    User Gravatar

    mani

    Posted Jun 6 2014 7:21 UTC

    If you want to check my phpinfo: http://www.sxmdiscount.com/phpinfo.php

    User Gravatar

    mani

    Posted Jun 6 2014 7:25 UTC

    Final: http://1drv.ms/1k7lWjb

    :)

    User Gravatar

    jawish2208

    Posted Jun 7 2014 15:10 UTC

    Solution

    This didn't solve your task? Get your own custom solution.

    Hi jawish2208!

    Sorry for the delay, I was not at home... So, It is ok now!!! Thank you very much for your help!

    User Gravatar

    mani

    Posted Jun 8 2014 7:40 UTC

    Hi Jawish2208,

    I have tried to install the infinite scroll script on my category page but I have 2 problem (I take the exemple with the category toys LEGO):

    http://www.sxmdiscount.com/categories2-250-legos.html?sortby=price&sortdirection=false&page=1

    If I run the category page Lego, Page 1 OK but if I scroll in page 2 I have products who have nothing to do with lego brand. After in page 3 Lego come back but it is the same list as page 1 and page 4, 5, 6, 7 etc again...

    https://www.dropbox.com/s/fu1b7xdv8tzma8f/categoriesPix2.php

    Can you help me?

    regards,

    Mani

    User Gravatar

    mani

    Posted Jun 23 2014 9:05 UTC

    Add a reply

    By posting a reply on CodersClan you agree to our Terms & Conditions