Comment utiliser Ajax avec OpenCart

L'inclusion de bibliothèques jQuery dans le cœur d'OpenCart facilite grandement la mise en œuvre d'Ajax et en fait une expérience agréable. En fait, vous trouverez plusieurs extraits dispersés dans l'ensemble de la structure qui montrent l'utilisation intensive de jQuery, si vous essayez de creuser spécifiquement les fichiers de vue..

Tout au long de cet article, nous allons créer une page personnalisée pour démontrer l'utilisation d'Ajax dans OpenCart. Ce sera une interface simple qui vous permettra de sélectionner un produit dans la liste déroulante et d’afficher un beau bloc de résumé du produit sélectionné. La partie intéressante du cas d'utilisation est la façon dont le bloc de résumé de produit est construit - il sera préparé en utilisant Ajax à la volée. Bien sûr, ce n'est pas quelque chose qui en fait un exemple hors du monde, mais j'imagine que cela servira au but fondamental de montrer comment les choses fonctionnent dans OpenCart..

Je suppose que vous utilisez la dernière version d'OpenCart, à savoir la version 2.1.x.x! De plus, la discussion principale de cet article se concentre sur Ajax avec OpenCart, je vais donc passer en revue les bases du développement de modules personnalisés dans OpenCart. Cependant, si vous ne le connaissez pas, une brève explication des extraits de code entre les deux vous permet de suivre jusqu'au bout.!

Un rapide coup d'œil sur l'organisation des fichiers

Passons rapidement en revue la configuration de fichier requise pour notre page personnalisée..

catalogue / contrôleur / ajax / index.php: C'est un fichier de contrôleur qui fournit la logique d'application du contrôleur habituel dans OpenCart.
catalogue / langue / francais / ajax / index.php: C'est un fichier de langue qui aide à configurer les étiquettes de langue.
catalogue / vue / thème / défaut / modèle / ajax / index.tpl: Il s'agit d'un fichier de modèle de vue contenant le XHTML de la page personnalisée.
catalogue / vue / thème / défaut / modèle / ajax / produit.tpl: Il s'agit d'un fichier de modèle de vue contenant le XHTML de la réponse AJAX.

Voilà donc une liste rapide des fichiers que nous allons implémenter aujourd'hui.

Créer des fichiers de module

Allez-y et créez un fichier catalogue / contrôleur / ajax / index.php avec le contenu suivant.

charge-> langue ('ajax / index'); $ this-> load-> model ('catalogue / produit'); $ this-> document-> setTitle ($ this-> language-> get ('titre_titre')); // charge tous les produits $ products = $ this-> model_catalog_product-> getProducts (); $ data ['products'] = $ products; $ data ['breadcrumbs'] = array (); $ data ['breadcrumbs'] [] = array ('href' => $ this-> url-> link ('common / home'), 'text' => $ this-> language-> get ('text_home' )); $ data ['breadcrumbs'] [] = array ('href' => $ this-> url-> link ('ajax / index'), 'text' => $ this-> language-> get ('titre_titre' )); $ data ['heading_title'] = $ this-> language-> get ('heading_title'); $ data ['text_product_dropdown_label'] = $ this-> language-> get ('text_product_dropdown_label'); $ data ['column_left'] = $ this-> load-> controller ('common / column_left'); $ data ['column_right'] = $ this-> load-> controller ('common / column_right'); $ data ['content_top'] = $ this-> load-> controller ('common / content_top'); $ data ['content_bottom'] = $ this-> load-> controller ('common / content_bottom'); $ data ['footer'] = $ this-> load-> controller ('commun / footer'); $ data ['header'] = $ this-> load-> controller ('common / header'); if (file_exists (DIR_TEMPLATE. $ this-> config-> get ('config_template'). '/template/ajax/index.tpl')) $ this-> réponse-> setOutput ($ this-> load-> view ($ this-> config-> get ('config_template'). '/template/ajax/index.tpl', $ data));  else $ this-> response-> setOutput ($ this-> load-> view ('default / template / ajax / index.tpl', $ data));  // méthode d'appel ajax public function ajaxGetProduct () if (isset ($ this-> request-> get ['product_id'])) $ product_id = (int) $ this-> request-> get ['product_id ']; if ($ product_id> 0) // charge le produit particulier demandé dans ajax $ this-> load-> model ('catalogue / produit'); $ product = $ this-> model_catalog_product-> getProduct ($ product_id); $ data ['product'] = $ product; // prépare l'image du pouce $ this-> load-> model ('tool / image'); if ($ product ['image']) $ data ['thumb'] = $ this-> model_tool_image-> resize ($ product ['image'], $ this-> config-> get ('config_image_thumb_width'), $ this-> config-> get ('config_image_thumb_height'));  // format price $ data ['price'] = $ this-> devise-> format ($ this-> taxe-> calculer ($ product ['price'], $ product ['tax_class_id'], $ this- > config-> get ('config_tax'))); $ this-> load-> language ('produit / produit'); $ data ['text_manufacturer'] = $ this-> language-> get ('text_manufacturer'); $ data ['text_model'] = $ this-> language-> get ('text_model'); $ data ['text_note'] = $ this-> language-> get ('text_note'); $ data ['tab_description'] = $ this-> language-> get ('tab_description'); if (file_exists (DIR_TEMPLATE. $ this-> config-> get ('config_template'). '/template/ajax/product.tpl')) $ this-> réponse-> setOutput ($ this-> load-> view ($ this-> config-> get ('config_template'). '/template/ajax/product.tpl', $ data));  else $ this-> response-> setOutput ($ this-> load-> view ('default / template / ajax / product.tpl', $ data));

Pour commencer, le indice La méthode du contrôleur est utilisée pour charger les fichiers de langage et de modèle et pour configurer les variables communes du modèle OpenCart habituel. Nous chargeons le modèle de produit disponible dans le noyau lui-même. Il n'est donc pas nécessaire de dupliquer le code pour extraire les informations sur le produit..

Après avoir chargé le modèle de produit, nous utilisons le getProducts méthode pour charger tous les produits. Enfin, nous concluons la indice méthode par réglage index.tpl comme notre fichier de modèle principal.

Suivant est l'important ajaxGetProduct Cette méthode est utilisée pour créer un bloc de résumé de produit en fonction de l'ID de produit transmis dans l'appel Ajax, comme nous le verrons bientôt dans le fichier de modèle. Il charge le même modèle de produit que nous avons fait dans le indice méthode et appelle le getProduct méthode pour extraire des informations de produit spécifiques en fonction de l'ID de produit.

À la fin, le product.tpl Le modèle est défini comme modèle pour cette méthode. Dans notre cas, nous utilisons le modèle spécifique pour générer notre sortie Ajax, mais vous pouvez également envoyer la réponse JSON à la place..

Pour aller de l'avant, créons un fichier de langue catalogue / langue / francais / ajax / index.php contenir les informations d'étiquette statique.

Le fichier de gabarit de vue, l’un des fichiers les plus importants dans le cadre de ce didacticiel, doit être créé à catalogue / vue / thème / défaut / modèle / ajax / index.tpl avec le contenu suivant.

">

Le bout de notre intérêt est à la fin de index.tpl, le code JavaScript qui utilise les méthodes jQuery pour lier les événements change et Ajax. Lorsque l'utilisateur sélectionne un produit dans la liste déroulante, l'événement de modification déclenche un appel Ajax. Dans l'appel Ajax, nous envoyons le product_id ajouté en tant que variable de chaîne de requête GET.

D'autre part, comme nous l'avons déjà expliqué dans la configuration du contrôleur, le ajaxGetProduct envoie le XHTML du bloc de résumé du produit en fonction du product_id variable de chaîne de requête. Dans la méthode success, nous ajoutons la réponse XHTML à la balise div dont l'attribut id est défini sur product_summary..

Enfin, allez-y et créez un fichier modèle catalogue / vue / thème / défaut / modèle / ajax / produit.tpl avec le contenu suivant pour un appel Ajax.

Rien d'extraordinaire ici - nous venons d'inclure un bloc de résumé de produit de base XHTML.

Donc, c'est tout ce qui concerne la configuration du fichier. Dans notre prochaine section, nous allons passer par le front-end pour tester ce que nous avons construit jusqu'à présent..

Tests frontaux

Nous avons donc fait tout le travail et il est maintenant temps de faire quelques essais! Rendez-vous sur le serveur OpenCart et visitez l'URL http://www.yourstore.com/index.php?route=ajax/index. Il devrait afficher une belle interface, comme indiqué dans la capture d'écran suivante.

C'est notre page personnalisée qui affiche une liste déroulante contenant la liste de tous les produits. Essayons maintenant de sélectionner un produit dans la zone de sélection et il passera un appel Ajax en arrière-plan..

En conséquence, vous devriez voir un beau bloc de résumé de produit affiché juste sous la liste déroulante, comme le montre la capture d'écran suivante..

Si vous avez suivi le didacticiel et mis en œuvre tous les fichiers comme expliqué, cela devrait fonctionner sans problème pour vous comme pour moi! Bien sûr, c’était une démonstration assez simple du fonctionnement d’Ajax dans OpenCart, mais vous pouvez l’étendre au niveau suivant selon vos besoins..

Allez-y et jouez avec, et essayez de créer des contenus interactifs en utilisant Ajax car c'est le meilleur moyen d'apprendre. Donc, c'est tout pour aujourd'hui et je serai bientôt de retour avec des choses plus excitantes.

Conclusion

C'est Ajax avec OpenCart qui était l'attraction centrale de l'article d'aujourd'hui. Comme d'habitude, nous avons adopté une approche de module personnalisée pour le démontrer et nous avons créé un cas d'utilisation simple mais efficace..

Comme toujours, si vous recherchez des outils, utilitaires, extensions, etc., OpenCart supplémentaires que vous pouvez exploiter dans vos propres projets ou pour votre propre éducation, n'oubliez pas de voir ce que nous avons sur le marché..

J'espère que cela a été informatif et utile, et n'hésitez pas à laisser vos questions et commentaires!

Code