La pagination sur une page de liste de produits est une fonctionnalit\u00e9 tr\u00e8s courante que nous voyons sur diff\u00e9rents sites Web de commerce \u00e9lectronique, mais ce module de d\u00e9filement infini Prestashop rendra la liste des produits sur la page de liste de produits un peu plus int\u00e9ressante. Lorsque ce module de produits de liste Prestashop sera activ\u00e9, le client fera simplement d\u00e9filer la page pour afficher plus de produits r\u00e9pertori\u00e9s dans la page de liste des produits.<\/p>\n
2.0 \u00e9tapes pour l’installation du module de d\u00e9filement infini de Prestashop:<\/h2>\n
Une fois que vous avez achet\u00e9 l’addon de d\u00e9filement infini, suivez les \u00e9tapes ci-dessous:<\/p>\n
- \n
- Acc\u00e9dez \u00e0 Administration du magasin -> Modules et services.<\/li>\n<\/ol>\n
![\"prestashop-infinite-scroll-module-\u00e9tape-d'installation1\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2016\/04\/prestashop-infinte-scroll-module-installation-step1.png\")
<\/a><\/p>\n2. Cliquez sur “T\u00e9l\u00e9charger un module”. Vous pouvez faire glisser ou d\u00e9poser le fichier ou simplement s\u00e9lectionner le fichier dans le syst\u00e8me.<\/p>\n
![\"prestashop-infinite-scroll-module-\u00e9tape-d'installation2\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2016\/04\/prestashop-infinte-scroll-module-installation-step2.png\")
<\/a><\/p>\nUne fois que le fichier est compl\u00e8tement t\u00e9l\u00e9charg\u00e9, une “ notification ” de “ Module (s) install\u00e9 (s) avec succ\u00e8s ”) s’affiche. Vous pouvez maintenant configurer votre module.<\/p>\n
3.0 Module d’administration<\/h2>\n
Dans l’interface d’administration du module de d\u00e9filement infini Prestashop, il y aura les options suivantes pour configurer ce module d’affichage de liste Prestashop. Le module de d\u00e9filement de la liste d\u00e9roulante Prestashop comprend 4 onglets et ils sont les suivants.<\/p>\n
1. r\u00e9glages g\u00e9n\u00e9raux<\/strong><\/p>\n
2. Param\u00e8tres avanc\u00e9s<\/strong><\/p>\n
3. Param\u00e8tres d’affichage<\/strong><\/p>\n
4. Param\u00e8tres du s\u00e9lecteur<\/strong><\/p>\n
Chaque section du plugin Prestashop Infinite Scroll est d\u00e9crite en d\u00e9tails ci-dessous.<\/p>\n
3.1 Param\u00e8tres g\u00e9n\u00e9raux du module de d\u00e9filement infini Prestashop:<\/h3>\n
Cette section du module de produits de liste Prestashop aura les options suivantes pour configurer ce module de d\u00e9filement infini Prestashop:
\n<\/a><\/p>\n![\"prestashop-infinite-scroll-module-param\u00e8tres-g\u00e9n\u00e9raux\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2016\/04\/prestashop-infinte-scroll-module-general-settings.png\")
<\/a><\/p>\n- \n
- Activer d\u00e9sactiver:<\/strong> Cette option du module de d\u00e9filement rapide Prestashop aura un bouton bascule avec deux valeurs sp\u00e9cifiques ON et OFF. Ce module Prestashop de Knowband ne fonctionnera que s’il est r\u00e9gl\u00e9 sur ON. Si cette option est d\u00e9sactiv\u00e9e, aucune fonctionnalit\u00e9 ne fonctionnera et n’aura m\u00eame aucun impact sur une autre section du site Web. Par d\u00e9faut, cette option sera d\u00e9sactiv\u00e9e.<\/li>\n
- CSS et JS personnalis\u00e9s:<\/strong> Ces champs du module Prestashop Infinite Scroll ont \u00e9t\u00e9 fournis pour permettre \u00e0 l’administrateur de modifier l’aspect et la convivialit\u00e9 de l’interface du module de d\u00e9filement rapide Prestashop.<\/li>\n<\/ul>\n
3.2 Param\u00e8tres avanc\u00e9s du module de d\u00e9filement infini Prestashop:
\n<\/a><\/h3>\n![\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2016\/04\/prestashop-infinite-scroll-module-advance-settings\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2016\/04\/prestashop-infinite-scroll-module-advance-settings.png\")
<\/a><\/p>\n- \n
- Afficher le message de la page de fin:<\/strong> Ce champ du module de d\u00e9filement d\u00e9roulant Prestashop propose au propri\u00e9taire du magasin d’afficher le message \u00e0 la fin de la page de liste des produits. Si le propri\u00e9taire active Afficher la page de fin, l’option suivante appara\u00eetra:<\/li>\n
- Afficher le lien Aller en haut: <\/strong>Ce champ du module Prestashop Infinite Scroll permet au propri\u00e9taire de la boutique d’afficher un lien dans l’interface frontale pour aller en haut de la page en affichant un bouton en bas de la page.<\/li>\n
- Afficher le chargeur pendant le chargement: <\/strong>Cette option du plugin Prestashop infinite scroll propose au propri\u00e9taire de la boutique de param\u00e9trer l’affichage du chargeur lors du chargement du produit. Ainsi, chaque fois que les clients font d\u00e9filer la page, ils peuvent voir un chargeur pendant le chargement du<\/li>\n
- Type de d\u00e9filement:<\/strong>L’addon de d\u00e9filement infini Prestashop permet au propri\u00e9taire du magasin de choisir entre l’option de d\u00e9filement entre le d\u00e9filement infini et le lien de chargement d’autres produits. Si le propri\u00e9taire peut s\u00e9lectionner le lien Charger plus, il y aura l’option suivante:
\nAfficher plus de lien apr\u00e8s:<\/strong>Le propri\u00e9taire peut d\u00e9finir la fr\u00e9quence pour afficher plus de lien de chargement, c’est-\u00e0-dire qu’apr\u00e8s autant de pages charg\u00e9es, le lien appara\u00eetra.<\/li>\n- Param\u00e8tres du bac \u00e0 sable:<\/strong> L’administrateur peut \u00e9galement tester le module de d\u00e9filement infini de Prestashop en activant ce champ. Si le propri\u00e9taire active les param\u00e8tres Sandbox, l’option suivante appara\u00eet:<\/li>\n
- Ajouter une adresse IP:<\/strong> Dans ce champ du module de d\u00e9filement rapide Prestashop de Knowband, l’administrateur peut ajouter diff\u00e9rentes IP en les s\u00e9parant \u00e0 l’aide d’une virgule et le module Prestashop ne fonctionnera que pour ces adresses IP uniquement.<\/li>\n<\/ul>\n
3.3 Param\u00e8tres d’affichage du module de d\u00e9filement infini de Prestashop:
\n<\/a>![\"prestashop-infinite-scroll-module-display-settings\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2016\/04\/prestashop-infinte-scroll-module-display-settings.png\")
<\/a><\/h3>\n- \n
- Couleur d’arri\u00e8re-plan de la bo\u00eete de message:<\/strong> Ce champ du module de d\u00e9filement d\u00e9roulant de Prestashop permet \u00e0 l’administrateur de personnaliser la couleur d’arri\u00e8re-plan de la bo\u00eete de message qui serait affich\u00e9e lorsque le chargement de tous les produits sera termin\u00e9.<\/li>\n
- Couleur du texte de la bo\u00eete de message:<\/strong> Le module Prestashop Infinite Scroll permet \u00e0 l’administrateur de changer la couleur du texte de la bo\u00eete de message.<\/li>\n
- Couleur de la bordure de la bo\u00eete de message:<\/strong> Le module de d\u00e9filement infini Prestashop permet \u00e0 l’administrateur de personnaliser la couleur de la bordure de la bo\u00eete de message selon ses besoins.<\/li>\n
- Couleur d’arri\u00e8re-plan du lien sup\u00e9rieur:<\/strong> L’administrateur peut personnaliser la couleur d’arri\u00e8re-plan du lien sup\u00e9rieur du module de produit de liste Prestashop.<\/li>\n
- <\/b>M<\/b><\/strong>que<\/b><\/strong>ge et <\/b><\/strong>Haut<\/b><\/strong>lien <\/b><\/strong>pr\u00e9<\/b><\/strong>vue:<\/b><\/strong> ,war<\/b><\/strong>L’administrateur du magasin peut pr\u00e9visualiser le message de fin de page et la conception du bouton de lien sup\u00e9rieur.<\/li>\n<\/ul>\n
L’aper\u00e7u des modifications qui seront effectu\u00e9es est refl\u00e9t\u00e9 dans la bo\u00eete de pr\u00e9visualisation donn\u00e9e juste en dessous des champs de ce module de d\u00e9filement d\u00e9roulant Prestashop.<\/p>\n
3.4 Param\u00e8tres du s\u00e9lecteur du module de d\u00e9filement infini Prestashop:<\/h3>\n
Les valeurs de cet onglet du module de d\u00e9filement de la liste d\u00e9roulante Prestashop doivent \u00eatre correctes pour que ce module de d\u00e9filement rapide de Prestashop fonctionne correctement. Les valeurs de cet onglet du module Prestashop Infinite Scroll peuvent changer en fonction du th\u00e8me du Prestashop utilis\u00e9 en fa\u00e7ade.<\/p>\n
REMARQUE: <\/strong> Si les valeurs du s\u00e9lecteur dans ces onglets du module de d\u00e9filement infini Prestashop sont mal saisies, le module Prestashop Infinite Scroll ne fonctionnera s\u00fbrement pas correctement.
\n<\/a><\/p>\n![\"prestashop-infinite-scroll-module-selector-settings\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2016\/04\/prestashop-infinite-scroll-module-selector-settings.png\")
<\/a><\/p>\n- \n
- S<\/b><\/strong>\u00e9lecto<\/b><\/strong>r \u00c9l\u00e9ment<\/b><\/strong>:<\/b><\/strong> ,war<\/b><\/strong>L’administrateur du magasin peut entrer la valeur de l’\u00e9l\u00e9ment de s\u00e9lection \u00e0 partir de cet onglet.<\/li>\n
- Se<\/b><\/strong>lec<\/b><\/strong>tor <\/b><\/strong>Contai<\/b><\/strong>ner\u00a0:<\/b><\/strong>L’administrateur du magasin peut entrer la valeur du conteneur de s\u00e9lection \u00e0 partir de cet onglet.<\/li>\n
- S<\/b><\/strong>il<\/b><\/strong>ctor<\/b><\/strong> ,war<\/b><\/strong>n<\/b><\/strong>poste<\/b><\/strong>:<\/b><\/strong>L’administrateur du magasin peut entrer la valeur suivante du s\u00e9lecteur \u00e0 partir de cet onglet.<\/li>\n
- Se<\/b><\/strong>lec<\/b><\/strong>tor pa<\/b><\/strong>g<\/b><\/strong>inatio<\/b><\/strong>n<\/b><\/strong>: <\/b><\/strong>L’administrateur du magasin peut entrer la valeur de pagination du s\u00e9lecteur \u00e0 partir de cette section.<\/li>\n<\/ul>\n
4.0 Front Interface du module de d\u00e9filement infini Prestashop:<\/h3>\n
Lorsque le module de d\u00e9filement infini Prestashop de Knowband est activ\u00e9 \u00e0 partir du panneau d’administration, sur chaque page de liste de produits, la pagination des produits n’appara\u00eetra pas. Le client pourra voir tous les produits simplement en faisant d\u00e9filer la page vers le bas et si l’affichage du lien aller en haut est activ\u00e9, le lien appara\u00eetra en bas \u00e0 droite de la page pour faire d\u00e9filer le client vers le haut de la page .<\/p>\n
![\"prestashop-infinite-scroll-module-front-interface-1\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2016\/04\/prestashop-infinite-scroll-module-front-interface-1.gif\")
<\/a><\/p>\nMessage de fin de page:<\/h3>\n
- Se<\/b><\/strong>lec<\/b><\/strong>tor <\/b><\/strong>Contai<\/b><\/strong>ner\u00a0:<\/b><\/strong>L’administrateur du magasin peut entrer la valeur du conteneur de s\u00e9lection \u00e0 partir de cet onglet.<\/li>\n
- Couleur du texte de la bo\u00eete de message:<\/strong> Le module Prestashop Infinite Scroll permet \u00e0 l’administrateur de changer la couleur du texte de la bo\u00eete de message.<\/li>\n
- Afficher le lien Aller en haut: <\/strong>Ce champ du module Prestashop Infinite Scroll permet au propri\u00e9taire de la boutique d’afficher un lien dans l’interface frontale pour aller en haut de la page en affichant un bouton en bas de la page.<\/li>\n
- CSS et JS personnalis\u00e9s:<\/strong> Ces champs du module Prestashop Infinite Scroll ont \u00e9t\u00e9 fournis pour permettre \u00e0 l’administrateur de modifier l’aspect et la convivialit\u00e9 de l’interface du module de d\u00e9filement rapide Prestashop.<\/li>\n<\/ul>\n
- Activer d\u00e9sactiver:<\/strong> Cette option du module de d\u00e9filement rapide Prestashop aura un bouton bascule avec deux valeurs sp\u00e9cifiques ON et OFF. Ce module Prestashop de Knowband ne fonctionnera que s’il est r\u00e9gl\u00e9 sur ON. Si cette option est d\u00e9sactiv\u00e9e, aucune fonctionnalit\u00e9 ne fonctionnera et n’aura m\u00eame aucun impact sur une autre section du site Web. Par d\u00e9faut, cette option sera d\u00e9sactiv\u00e9e.<\/li>\n
![\"prestashop-infinite-scroll-module-front-interface-2\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2016\/04\/prestashop-infinite-scroll-module-front-interface-2.gif\")
<\/a><\/p>\n![\"prestashop-infinite-scroll-module-front-interface-3\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2016\/04\/prestashop-infinite-scroll-module-front-interface-3.gif\")
<\/a><\/p>\n![\n<\/a>](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2016\/04\/Prestashop-Infinite-Scroll_Display-Settings.png\"){kind=link}