Afficher les produits suivants en ajax

[poupilou]

Salut à tous,

Je cherche une solution qui permettrait au clic d'un bouton "Afficher les 20 produits suivants" situé en bas de mon catalogue de produits d'afficher en ajax, sous les autres produits, les 20 produits suivants.

J'ai cherché sous Google mais je n'ai rien trouvé, auriez-vous un bout de script qui pourrait faire cela ?

Merci pour vos réponses.

 

[spout]

<a href="https://example.com/next-products.php" id="load-next-products">Produits suivants</a>
<div id="next-products"></div>

<script>
$(function () {
  $('#load-next-products').on('click', function (e) {
    e.preventDefault();
    $('#next-products').load($(this).attr('href'));
  })
});
</script>

 

[rick38]

Mais le bouton est à mettre après la div next-products pour qu'il reste à chaque fois en bas, et faire un append sinon next-products perdra les produits précédents.

Et sans doute besoin d'envoyer un paramètre (n° de page) pour que côté serveur on sache à partir d'où repartir.

Gérer aussi la disparition du bouton s'il n'y a plus de suite.

 

[spout]

Heu oui c'était l'exemple le plus basique possible

 

[poupilou]

Merci spout et rick38, je vais tester ce code.

et faire un append sinon next-products perdra les produits précédents

C'est quoi un append, comment on fait cela ?

 

[poupilou]

Comment gérer la page https://example.com/next-products.php d'un point de vue SEO, faut-il la passer en noindex ?

Parce que ça ressemble a un scroll infini ce système, Google suivra les liens du style https://example.com/next-products.php?produits=40-60, puis https://example.com/next-products.php?produits=60-80 etc...

 

[spout]

il faut vérifier que le request est fait en AJAX:
https://snipplr.com/view/39644/check-if-request-is-ajax-request
Sinon HTTP 403