Créer une page personnalisée dans OpenCart

Avant de commencer, notez que nous prévoyons de sauter directement dans l'article. 

À cette fin, nous supposons qu’une copie de travail d’OpenCart est installée et que vous êtes prêt à vous mettre au travail..

Le flux de travail de base

OpenCart est construit en utilisant le modèle de programmation MVC populaire. Un autre élément a également été ajouté à ce modèle, appelé "L" - une partie langage - il est donc appelé modèle MVC-L dans OpenCart. Je n'entrerai pas dans les détails du modèle MVC, car il s'agit d'un modèle de conception très populaire et familier. Nous l'avons expliqué en détail dans d'autres didacticiels.. 

Cela dit, nous devons encore examiner le flux de travail en utilisant ce modèle..

Tout d’abord, le contrôleur agit comme point d’entrée pour toute page dans laquelle vous définissez la plupart des logiques d’application..Le modèle traite la base de données principale et la vue est chargée de préparer le contenu à restituer à l'utilisateur final. Dans le contexte d'OpenCart, vous aurez au moins besoin d'implémenter un contrôleur et une vue pour créer une nouvelle page personnalisée..

Configuration du contrôleur

Essayons d’abord de comprendre le rôle du contrôleur dans OpenCart. Le contrôleur est le premier élément à être exécuté lorsque vous demandez une page. Il est principalement responsable de la configuration des variables qui seront utilisées ultérieurement dans la vue pour l'affichage. Bien que dans le contrôleur générique, il se passe beaucoup de choses:

  • Vous pouvez charger des fichiers de langue afin d’utiliser des variables de langue pour l’affichage de texte statique..
  • Vous pouvez charger des fichiers de modèle afin de pouvoir utiliser les méthodes définies dans ces modèles pour extraire des données de la base de données principale.
  • Vous pouvez définir le fichier modèle qui sera utilisé par la vue.
  • Vous pouvez configurer les variables personnalisées en leur attribuant un contenu qui sera utilisé dans le fichier de modèle..
  • Vous pouvez déclarer les modèles enfants que vous souhaitez afficher dans le modèle principal. L'exemple le plus simple est les modèles d'en-tête et de pied de page que vous souhaitez afficher dans votre modèle principal..
  • Enfin, vous pouvez également définir des valeurs pour des éléments tels que le titre du document, la méta description, etc..

Assez de théorie, non? Voyons à quoi ressemble notre contrôleur personnalisé. Allez-y et créez un nouveau répertoire custompage sous catalogue / contrôleur. Créer un nouveau fichier mycustompage.php sous catalogue / contrôleur / custompage. Collez le code suivant dans le fichier de contrôleur nouvellement créé "mycustompage.php".

document-> setTitle ("Ma page personnalisée"); // définit le fichier de modèle if (file_exists (DIR_TEMPLATE. $ this-> config-> get ('modèle_config' ').'. /template/custompage/mycustompage.tpl ')) $ this-> template = $ this-> config- > get ('config_template'). '/template/custompage/mycustompage.tpl';  else $ this-> template = 'default / template / custompage / mycustompage.tpl';  // définir les modèles d'enfants $ this-> children = array ('common / column_left', 'common / column_right', 'common / content_top', 'common / content_bottom', 'common / footer', 'common / header') ; // définit les données sur la variable $ this-> data ['my_custom_text'] = "Ceci est ma page personnalisée."; // appelle la "vue" pour afficher la sortie $ this-> response-> setOutput ($ this-> render ()); ?>

Comprenons la convention de nommage de la classe de contrôleur. Le nom de la classe de contrôleur est construit en suivant la structure de répertoire et la convention de cas de chameau. Notez que le nom de la classe commence par le mot-clé "Controller" suivi du nom du répertoire ("Custompage") dans lequel réside le fichier de classe. Et finalement, le nom du fichier de classe ("Mycustompage") est ajouté à la fin. Maintenant, disséquons chaque section en détail.

Nous avons d’abord défini la valeur de la balise de titre html pour notre page personnalisée..

$ this-> document-> setTitle ("Ma page personnalisée");

Dans la section suivante, nous avons défini le nom du fichier modèle qui sera utilisé par l'élément "View". Une chose importante à noter ici est que nous avons d'abord vérifié que si le fichier de modèle est disponible dans le jeu de thèmes personnalisé à partir du back-end, s'il est disponible dans le thème personnalisé, nous utiliserons cette option. Sinon, nous utiliserons le fichier de modèle. dans le thème "default". 

C'est le concept de gabarit prioritaire.

if (file_exists (DIR_TEMPLATE. $ this-> config-> get ('config_template'). '/template/custompage/mycustompage.tpl')) $ this-> template = $ this-> config-> get ('config_template '). '/template/custompage/mycustompage.tpl';  else $ this-> template = 'default / template / custompage / mycustompage.tpl'; 

Nous avons également défini les modèles d'enfants à l'aide du tableau. Par exemple, commun / en-tête mappe vers le fichier de modèle situé à catalogue / vue / thème / défaut / modèle / commun / header.tpl et exécute le même. Le résultat de cela sera affecté à la variable $ header que vous pourrez utiliser dans votre fichier de modèle pour afficher l'en-tête du site..

$ this-> children = array ('common / column_left', 'common / column_right', 'common / content_top', 'common / content_bottom', 'common / footer', 'common / header');

De plus, nous avons montré comment vous pouvez configurer les variables personnalisées qui seront disponibles dans le fichier de modèle. Bien que nous ayons utilisé ici un texte statique simple, vous pouvez attribuer un contenu plus logique, par exemple un tableau de produits extrait de la
base de données.

$ this-> data ['my_custom_text'] = "Ceci est ma page personnalisée.";

Enfin, le plus important est d’appeler view afin que le processus de rendu puisse commencer..

$ this-> response-> setOutput ($ this-> render ());

Voilà donc l’aperçu du flux de travail du contrôleur.

Dans le front-end, vous accéderez à ce contrôleur en utilisant la variable de chaîne de requête  route = custompage / mycustompage. Il est important de noter ici que si vous définissez la méthode du contrôleur avec un autre nom sauf indice vous devez spécifier cela aussi dans l'URL. 

Par exemple, si vous avez créé la méthode nommée Douane, votre format d'URL frontal devrait ressembler à route = custompage / mycustompage / custom.

Comprenons comment les cartes OpenCarttoute URL vers le fichier de contrôleur spécifique. Le format de la variable de route est répertoire / nom du fichier / nom de la méthode. annuaire correspond au répertoire sous catalogue / contrôleur. nom de fichier correspond au nom du fichier de contrôleur sous catalogue / contrôleur / répertoire. Et enfin, il va chercher la méthode du contrôleur nommée nom de la méthode si elle est spécifiée dans la route, sinon, la valeur par défaut sera appelée indice méthode.

Préparer la vue

Dans cette section, nous allons créer le fichier de modèle de vue que nous avons défini précédemment dans la méthode d’indexation du contrôleur. Allez-y et créez un nouveau répertoire custompage sous catalogue / vue / thème / défaut / modèle. Créer un nouveau fichier mycustompage.tpl sous catalogue / view / theme / default / template / custompage. Collez le contenu suivant dans le fichier de modèle nouvellement créé. mycustompage.tpl.

 

Il s’agit donc de notre principal fichier de modèle de mise en page qui est chargé d’afficher le contenu de notre page personnalisée. Dans ce fichier modèle, nous venons d'utiliser les variables que nous avons définies dans le contrôleur indice méthode. 

La seule variable personnalisée dans ce fichier modèle est $ my_custom_text, le reste des variables contient le contenu lié aux modèles enfants tels que l’en-tête, le pied de page, etc. Les variables $ colonne_left, $ column_right, $ content_top et $ content_bottom sont utilisés pour afficher les modules affectés à notre page personnalisée à partir du back-end.

Si vous souhaitez affecter des modules à notre page personnalisée, vous devez d’abord créer une nouvelle entrée de présentation à partir du backend. Après avoir ajouté une nouvelle mise en page, vous souhaitez ajouter un itinéraire tel que custompage / mycustompage entrée pour cette mise en page. Maintenant, vous pouvez affecter n'importe quel module à notre page personnalisée..

Vous venez de construire une page personnalisée complète dans OpenCart! Vous pouvez vérifier la même chose à l’adresse URL: http://www.yoursiteurl.com/index.php?route=custompage/mycustompage.

Conclusion

Dans ce tutoriel, nous avons appris à créer notre propre page personnalisée dans OpenCart. Si vous connaissez le modèle MVC, le flux de travaux permettant de créer une nouvelle page personnalisée doit vous être familier..

Allez-y et explorez quelques fichiers de base pour vous familiariser avec le code. J'aimerais que vous développiez notre exemple en chargeant des fichiers de modèle et de langue dans le contrôleur pour voir comment ça marche! En attente des commentaires, questions et commentaires!