Construisez une liste de défilement infinie pour l'eshop oxyde - Bases

Les plats clés

• oxyde eshop, ou oxyd esales, est une plate-forme de commerce électronique hautement personnalisable et évolutive. Ce tutoriel fournit un guide étape par étape pour créer une nouvelle extension de module oxyde qui implémente le défilement infini pour la liste des articles, en remplacement de la pagination traditionnelle.
• La première partie du tutoriel couvre la création d'une structure de dossier appropriée pour la nouvelle extension du module, en travaillant avec metadata.php pour étendre un contrôleur nécessaire, remplacer le modèle existant par un nouveau et ajouter une nouvelle option de configuration de module . Il explique également comment travailler avec des fichiers linguistiques principaux pour créer un nom d'affichage et aider le texte pour les paramètres du module et comment travailler avec le nouveau contrôleur de module.
• La deuxième partie du tutoriel se concentrera sur le travail avec le nouveau modèle, y compris comment obtenir correctement l'URL du module, en travaillant avec le moteur de modèle oxyde, en ajoutant du contenu pour le nouveau modèle, en ajoutant JavaScript pour gérer l'exécution d'un défilement infini sur la liste des articles et mettre à jour les vues de la base de données et activer le module.
• Le tutoriel suppose une certaine expérience de travail avec l'Oxyd Eshop et se concentre sur la mise en œuvre du back-end pour développer une nouvelle extension de module. La partie suivante entrera dans des détails sur la mise en œuvre essentielle de la frontale, qui consiste à personnaliser le modèle et à ajouter JavaScript pour gérer le flux de travail pour le défilement infini.

oxyde eshop , officiellement connu sous le nom d'esales oxydantes, est une plate-forme standard de commerce électronique puissante et évolutive optimisée pour chaque segment des activités en ligne. En tant que développeur dépensant la plupart de mes tâches «9 à 5» avec de l'oxyde, j'ai découvert que ce système de commerce électronique est extrêmement facile à personnaliser et à étendre.

Si vous êtes nouveau dans Oxyd ou recherchez une plate-forme simple mais efficace pour votre propre entreprise en ligne, je vous recommande de lire Matthew Setter's Series sur Oxyd Esales qui a trouvé une implémentation standard pour commencer avec le système oxyde.

Dans ce didacticiel en 2 parties, nous créerons une nouvelle extension de module oxyde qui implémente Infinite de défilement à la liste d'articles au lieu de la pagination traditionnelle. Au cours de cet article, j'essaie de partager mon expérience personnelle qui peut vous aider à accélérer votre processus de travail si vous rencontrez un développement oxyde plus tard.

voici ce que vous réaliserez.

L'ensemble du code source sera disponible à la fin de la série.

Les tutoriels couvriront les domaines suivants:

Partie 1:

• Création d'une structure de dossiers appropriée pour une nouvelle extension du module.
• Travailler avec metadata.php à:
  
  • Étendez un contrôleur nécessaire.
  • Remplacez le modèle existant par un nouveau modèle.
  • Ajouter une nouvelle option de configuration du module.
• Comment travailler avec des fichiers linguistiques principaux pour créer un nom d'affichage et aider le texte pour les paramètres du module.
• Travaillez avec le nouveau contrôleur de module.

Partie 2:

• Travailler avec le nouveau modèle:
  
  • Comment obtenir correctement l'URL du module.
  • Récapituler pour travailler avec le moteur de modèle oxyde.
  • Ajout de contenu pour le nouveau modèle.
• Ajout de JavaScript pour gérer l'exécution d'un défilement infini sur la liste des articles.
• Mise à jour des vues de la base de données et activer le module.

Remarque: Je suppose que vous avez une certaine expérience de travail avec l'Oxyd Eshop (sinon, voir l'article de Matthew, lié ci-dessus). Ainsi, il n'y aura pas beaucoup d'explications pour les concepts de base de l'oxyde.

Structure du dossier du module oxyde

La tâche la plus importante que vous devez faire est de créer une structure de dossier standard.

• Veuillez aller à {your_web_root} / oxyd / modules /
• Créez un nouveau dossier appelé aho_infinitescroll suivi de ses dossiers / fichiers ultérieurs.

aho_infinitescroll/
|	
|--- controllers/
|		|-- aho_infinite_alist.php 	# A new controller that extends alist.php
|
|--- out/
|	|--admin/
|		|--en/
|			|-- aho_infinitescroll_lang.php 	# Back-end English text.
|		|--de/
|			|-- aho_infinitescroll_lang.php 	# Back-end Deustch text.
|
|	|--css/
|		|--> infinitescroll.css  	# Style for infinite scrolling elements.
|		
|	|--img/
|		|--> ajax-loader.gif     # image indicates the loading status.
|	|--js/
|
|--- translations/
|		|--de/
|			|--> aho_infinitescroll_lang.php  # Front-end Deustch text.     
|		|--en/ 
|			|--> aho_infinitescroll_lang.php  # Front-end English text.
|
|--- views/
|		|-- page/
|			|-- list/
|				|--> aho_infinitescroll_list.tpl  # new template file.
|	
|--- metadata.php  # Define extension name, classes and other infos. 
|--- picture.jpg   # A thumbnail for the module's functionality.

Remarque:
La meilleure pratique de nommer un nouveau module est de combiner le nom du fournisseur / développeur / groupe et la fonctionnalité du module. Il aide à révéler instantanément le fournisseur et la fonctionnalité du nouveau module pour la collaboration par équipe.
Ainsi, la formule peut être la suivante:

Nom du vendeur Contrôle Fonctionnalité

• c'est-à-dire: sitepoint_infinitescroll

Le nom du fournisseur peut être remplacé par le nom du développeur ou le nom du groupe. C'est à vous.

Travailler avec metadata.php

Metadata.php est essentiel à tout développement de modules. Ce fichier fournit des détails de base sur le module, les classes à étendre, les blocs à surdiquer, les modèles à remplacer, les paramètres pour les côtés frontaux et les côtés arrière, etc.

Veuillez ouvrir le fichier metadata.php et y ajouter les lignes de code suivantes:

<span><span><?php
</span></span><span>
</span><span><span>$sMetadataVersion = '1.0';  # Define version of this file
</span></span><span>
</span><span><span>// An array to store modules' details
</span></span><span><span>$aModule = array
</span></span><span><span>(
</span></span><span>    <span>'id' => 'aho_infinitescroll',
</span></span><span>    <span>'title' => '[AHO] Infinite Scrolling List', 
</span></span><span>    <span>'description' => 'Infinite Scrolling for article list',
</span></span><span>    <span>'thumbnail' => 'picture.jpg',
</span></span><span>    <span>'version' => '1.0.0',
</span></span><span>    <span>'author' => 'Tuan Anh Ho',
</span></span><span>    <span>'url' => '',
</span></span><span>    <span>'email' => 'anhhothai@gmail.com'
</span></span><span><span>);</span></span>

• Nous venons d'insérer des informations de base pour notre nouveau module, et tous les éléments sont auto-descriptifs selon leurs termes.

• Veuillez noter que l'ID et le titre sont des variables obligatoires. En particulier, la valeur de l'ID doit être la même que le nom du dossier du module.

• La vignette est un élément facultatif qui décrit visuellement votre module. Je prépare généralement une belle miniature parce que je crois qu'une image vaut mille mots. Parfois, vous avez l'intention de vendre certains de vos modules auto-développés préférés via le marché des oxydes, et une miniature mieux conçue attire plus d'acheteurs.

Ensuite, nous allons définir d'autres éléments, juste après l'e-mail.

aho_infinitescroll/
|	
|--- controllers/
|		|-- aho_infinite_alist.php 	# A new controller that extends alist.php
|
|--- out/
|	|--admin/
|		|--en/
|			|-- aho_infinitescroll_lang.php 	# Back-end English text.
|		|--de/
|			|-- aho_infinitescroll_lang.php 	# Back-end Deustch text.
|
|	|--css/
|		|--> infinitescroll.css  	# Style for infinite scrolling elements.
|		
|	|--img/
|		|--> ajax-loader.gif     # image indicates the loading status.
|	|--js/
|
|--- translations/
|		|--de/
|			|--> aho_infinitescroll_lang.php  # Front-end Deustch text.     
|		|--en/ 
|			|--> aho_infinitescroll_lang.php  # Front-end English text.
|
|--- views/
|		|-- page/
|			|-- list/
|				|--> aho_infinitescroll_list.tpl  # new template file.
|	
|--- metadata.php  # Define extension name, classes and other infos. 
|--- picture.jpg   # A thumbnail for the module's functionality.

• La valeur de la valeur spécifie une classe de noyau / contrôleur particulière à partir de laquelle le nouveau module s'étendra. Dans ce cas, ce sera Alist.php, situé sur / oxyde / application / contrôleurs /.

• Les modèles de valeur sont un tableau qui stocke tous les modèles enregistrés du nouveau module. Il est recommandé de créer la même structure de dossier du modèle à remplacer, pour une collaboration facile d'équipe. Veuillez noter que les éléments et les valeurs des modèles doivent inclure l'extension du nom de fichier .tpl

  Remarque:

  • La bonne façon de nommer un nouveau modèle est " Nom du module _ L'ancien nom de modèle"
  • c'est-à-dire: aho_infinitescroll_list.tpl

Nous laissons le nouveau fichier de modèle vide en ce moment et continuons avec le fichier metadata.php. Veuillez insérer un tableau appelé Paramètres juste après les modèles d'élément:

<span><span><?php
</span></span><span>
</span><span><span>$sMetadataVersion = '1.0';  # Define version of this file
</span></span><span>
</span><span><span>// An array to store modules' details
</span></span><span><span>$aModule = array
</span></span><span><span>(
</span></span><span>    <span>'id' => 'aho_infinitescroll',
</span></span><span>    <span>'title' => '[AHO] Infinite Scrolling List', 
</span></span><span>    <span>'description' => 'Infinite Scrolling for article list',
</span></span><span>    <span>'thumbnail' => 'picture.jpg',
</span></span><span>    <span>'version' => '1.0.0',
</span></span><span>    <span>'author' => 'Tuan Anh Ho',
</span></span><span>    <span>'url' => '',
</span></span><span>    <span>'email' => 'anhhothai@gmail.com'
</span></span><span><span>);</span></span>

• Les paramètres de valeur sont un endroit pour enregistrer toutes les options de configuration d'un nouveau module. Le groupe a toujours la valeur identique à l'ID du module.

• Valeur: Ce nouveau paramètre aide à gérer le type de liste de vue. Dans la portée de ce didacticiel, je vais définir la valeur par défaut comme ligne et continuer à l'utiliser jusqu'à la fin.

• Alors que nous activons le module pour la première fois, ce paramètre est inséré dans deux tables oxconfig et oxConfigDisplay . L'oxyde insérera automatiquement le module de valeur: aho_infinitescroll en colonnes oxmodule (tableau oxconfig) et oxcfgmodule (tableau oxConfigDisplay) avec le module de valeur: aho_infinitescroll. C'est très pratique car cela se produit automatiquement.

Vous pouvez suivre ce document en ligne de métadonnées d'extension pour en savoir plus sur d'autres arguments possibles.

Ensuite, nous examinons les traductions back-end.

Ajout de traductions arrière

Dans la dernière section, nous avons ajouté les paramètres du nouveau module. Il est maintenant temps de travailler avec sa traduction.
Veuillez ouvrir le fichier aho_infinitescroll / out / admin / en / aho_infinitescroll_lang.phpand ajouter les lignes suivantes.

<span>'extend' => array(
</span>        <span>'alist' => 'aho_infinitescroll/controllers/aho_infinitescroll_alist'
</span>    <span>),
</span>    <span>'templates' => array(
</span>        <span>'aho_infinitescroll_list.tpl' 
</span>            <span>=> 'aho_infinitescroll/views/page/list/aho_infinitescroll_list.tpl'
</span>    <span>)</span>

• Syntaxe pour ajouter une traduction pour une option de configuration shop_module _ setting_column_name.

• Syntaxe pour ajouter le texte d'aide pour une option de configuration help_shop_module _ setting_colum_name.

Les lignes de codes ci-dessus entraîneront la sortie comme dans la figure ci-dessous. Plus tard, lorsque vous activez le module, veuillez saisir la ligne dans la zone de texte:

---

---

Veuillez faire de même pour le fichier aho_infinitescroll / out / admin / de / aho_infinitescroll_lang.php. Attribuez la variable $ slangname avec de la valeur deustch et demandez à quelqu'un de spécialiser dans la langue de traduire tout le texte en allemand, ou tout simplement de mijotage là-dedans, tant qu'il est différent de l'anglais afin que vous puissiez voir la différence.

Travailler avec le nouveau contrôleur

Veuillez ouvrir aho_infinitescroll / contrôleurs / aho_infinite_alist.php et ajouter les lignes suivantes:

aho_infinitescroll/
|	
|--- controllers/
|		|-- aho_infinite_alist.php 	# A new controller that extends alist.php
|
|--- out/
|	|--admin/
|		|--en/
|			|-- aho_infinitescroll_lang.php 	# Back-end English text.
|		|--de/
|			|-- aho_infinitescroll_lang.php 	# Back-end Deustch text.
|
|	|--css/
|		|--> infinitescroll.css  	# Style for infinite scrolling elements.
|		
|	|--img/
|		|--> ajax-loader.gif     # image indicates the loading status.
|	|--js/
|
|--- translations/
|		|--de/
|			|--> aho_infinitescroll_lang.php  # Front-end Deustch text.     
|		|--en/ 
|			|--> aho_infinitescroll_lang.php  # Front-end English text.
|
|--- views/
|		|-- page/
|			|-- list/
|				|--> aho_infinitescroll_list.tpl  # new template file.
|	
|--- metadata.php  # Define extension name, classes and other infos. 
|--- picture.jpg   # A thumbnail for the module's functionality.

Ce nouveau contrôleur ne fait que quelques choses:

• Modifiez la valeur de $ _STHISTETTEMPLAT en aho_infinitescroll.tpl, que nous avons défini dans Metadata.php: veuillez noter que nous n'avons besoin que de spécifier le nom du modèle ici. Ainsi, le nom du modèle doit être unique. Il aide le système à trouver rapidement le modèle correct.

• Le rendu de fonction ne fait que renvoie le nouveau nom de modèle.

• La fonction GetViewTypelist renvoie la valeur de la colonne de données sinfinitescrolllistType qui est définie dans Metadata.php. Le modèle aho_infinitescroll.tpl utilisera cette valeur pour déterminer quel type de vue sera appliqué pour la liste des articles.

• Vous pouvez noter que le nom de la classe étendue est aho_infinitescroll_alist_parent. La formule est le nom du contrôleur de module _ parent.

Conseils pour trouver la classe nécessaire pour étendre

• Vous devez généralement savoir quelles classes doivent être étendues. Il existe un moyen facile de savoir quelle classe fonctionne dans la vue actuelle. Vous parcourez simplement le fichier /application/views/{theme_name ]/tpl/layout/page.tpl et insérez la ligne suivante en haut du fichier:

<span><span><?php
</span></span><span>
</span><span><span>$sMetadataVersion = '1.0';  # Define version of this file
</span></span><span>
</span><span><span>// An array to store modules' details
</span></span><span><span>$aModule = array
</span></span><span><span>(
</span></span><span>    <span>'id' => 'aho_infinitescroll',
</span></span><span>    <span>'title' => '[AHO] Infinite Scrolling List', 
</span></span><span>    <span>'description' => 'Infinite Scrolling for article list',
</span></span><span>    <span>'thumbnail' => 'picture.jpg',
</span></span><span>    <span>'version' => '1.0.0',
</span></span><span>    <span>'author' => 'Tuan Anh Ho',
</span></span><span>    <span>'url' => '',
</span></span><span>    <span>'email' => 'anhhothai@gmail.com'
</span></span><span><span>);</span></span>

La ligne ci-dessus aide à imprimer la classe de base utilisée dans la vue actuelle. Si vous souhaitez détecter la classe de base qui effectue des demandes AJAX, vous aurez besoin d'un peu plus d'efforts en travaillant avec Chromedev Tools.

Conclusion

Jusqu'à présent, nous avons parcouru la mise en œuvre étape par étape pour développer une nouvelle extension de module. Pour le moment, nous sommes en mesure d'activer le module pour voir ce que nous aurons dans le tableau de bord de l'administration. Si des problèmes apparaissent, n'hésitez pas à quitter votre commentaire ici. Je vais faire de mon mieux pour vous aider.

La partie suivante entrera dans les détails de l'implémentation frontale essentielle, qui consiste à personnaliser le modèle et à ajouter JavaScript pour gérer le flux de travail pour le défilement infini.

Les questions fréquemment posées sur la construction d'une liste de défilement infinie dans oxyde eShop

Quel est le but de l'utilisation du parchemin infini dans l'eshop oxyde?

Infini Scroll est une technique de conception Web qui empêche la barre de défilement du navigateur de faire défiler jusqu'au bas de la page, provoquant la croissance de la page avec plus de plus Contenu à la place. Dans le contexte de l'eshop oxyde, cette technique peut être utilisée pour afficher en continu des produits au fur et à mesure que l'utilisateur défile sur la page, améliorant l'expérience utilisateur en permettant une navigation et une exploration transparentes des produits.

Comment le défilement infini améliore-t-il les performances d'un site Web de commerce électronique?

Le parchemin infini peut améliorer considérablement les performances d'un site Web de commerce électronique en réduisant le temps de chargement. Au lieu de charger tous les produits à la fois, ce qui peut ralentir le site, un défilement infini charge un certain nombre de produits initialement, puis se charge plus lorsque l'utilisateur continue de faire défiler. Cela améliore non seulement la vitesse du site, mais améliore également l'engagement et la rétention des utilisateurs.

Comment puis-je mettre en œuvre un défilement infini dans l'eshop oxyde à l'aide de PHP?

Implémentation de défilement infini dans l'eshop oxyde implique l'utilisation de PHP pour manipuler le Appels AJAX et système de pagination. Vous devrez modifier les fonctions du contrôleur de liste et le modèle de liste de produits pour gérer les demandes AJAX et mettre à jour la liste de produits. Les étapes détaillées et les extraits de code peuvent être trouvés dans l'article.

Y a-t-il des inconvénients potentiels pour utiliser un défilement infini dans l'eshop oxyde?

Bien que le défilement infini peut améliorer l'expérience utilisateur, il peut ne pas être Convient à tous les types de sites Web de commerce électronique. Par exemple, si votre site Web a un pied de page avec des liens importants, Infinite Scroll peut rendre difficile pour les utilisateurs d'atteindre le pied de page. De plus, le défilement infini peut parfois être déroutant pour les utilisateurs qui souhaitent naviguer vers des produits ou des pages spécifiques.

Puis-je utiliser un défilement infini dans d'autres plates-formes de commerce électronique en dehors de l'eshop oxyde?

Oui, Infinite Scroll peut être implémenté dans diverses plates-formes de commerce électronique qui prennent en charge le codage personnalisé. Cependant, le processus de mise en œuvre peut varier en fonction de l'architecture et du langage de codage de la plate-forme. Il est recommandé de se référer à la documentation de la plate-forme spécifique ou de demander l'aide d'un développeur professionnel.

Comment le défilement infini affecte-t-il le référence Crawer et index correctement le contenu chargé via Ajax. Cependant, cela peut être atténué en implémentant une version paginée de votre site pour les moteurs de recherche, aux côtés de la version de défilement infinie pour les utilisateurs.

est recommandé par PHP pour les sites Web de commerce électronique?

PHP est un Choix populaire pour les sites Web de commerce électronique en raison de sa flexibilité, de son évolutivité et de sa robustesse. Il prend en charge une large gamme de bases de données et est compatible avec diverses plates-formes de commerce électronique, y compris l'eshop oxyde. Cependant, le choix du langage de programmation devrait dépendre de vos exigences et de vos expertises spécifiques.

Quelles sont les alternatives au défilement infini?

Les alternatives au défilement infini incluent la pagination et les boutons de «chargement plus». La pagination implique de diviser le contenu en pages distinctes, tandis que les boutons «Chargement plus» permettent aux utilisateurs de charger plus de contenu manuellement. Le choix entre ces options dépend de la conception de votre site Web et des préférences de vos utilisateurs.

Comment puis-je personnaliser l'apparence et la sensation du parchemin infini dans l'eshop oxyde?

L'aspect et la sensation du parchemin infini peuvent être personnalisés à l'aide de CSS. Vous pouvez modifier les styles de l'indicateur de chargement, de la liste de produits et d'autres éléments pour correspondre à la conception de votre site Web.

Puis-je désactiver le défilement infini pour certaines pages dans l'eshop oxyde?

Oui, vous Peut choisir de désactiver le défilement infini pour certaines pages dans l'eshop oxyde. Cela peut être fait en modifiant les conditions du contrôleur de liste et le modèle de liste de produits pour exclure les pages spécifiques.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!