Intégrer UberGallery avec OpenCart deuxième partie

Dans cette série, nous explorons comment intégrer le script UberGallery à OpenCart. Pour ce faire, nous construisons un module dans OpenCart afin de pouvoir faire les choses en natif. Dans la première partie de cette série, nous avons discuté de la section back-end de notre module personnalisé et le produit final était un formulaire de configuration agréable qui nous permet de configurer facilement les paramètres UberGallery. Aujourd’hui, nous verrons la contrepartie frontale de celle-ci, qui affiche en fait la galerie sur la face avant.

Si vous n'avez pas encore lu la première partie, il est fortement recommandé de le faire car le code que nous allons écrire aujourd'hui en dépend fortement. Dans la première partie, nous avons effectué toutes les conditions préalables au bon fonctionnement de notre back-end, en particulier notre page de configuration UberGallery. Dans cette partie, nous allons nous concentrer sur la configuration front-end.

Avançons notre voyage pour construire quelque chose d'utile du point de vue d'un utilisateur frontal.

Une solution rapide à la UberGallery

Nous devons modifier un peu le script UberGallery afin de le rendre opérationnel avec notre module OpenCart..

Allez-y et ouvrez système / bibliothèque / uberGallery / resources / UberGallery.php et trouvez la ligne suivante:

'file_path' => htmlentities ($ relativePath),

Remplacez-le par ce qui suit:

'file_path' => htmlentities (UBER_ORIG_IMG_PATH. $ key),

C'est tout. La raison derrière cela est le chemin chemin du fichier est traité dans le script UberGallery principal. Dans notre cas, nous aurons le répertoire des images originales dans un emplacement complètement différent de celui d'UberGallery. Donc, c'est une solution simple.

Enfin, créez un nouveau répertoire image / uberGallery et le rendre accessible en écriture par le serveur Web. C'est l'endroit où nous allons télécharger les images originales de la galerie.

Configuration d'un fichier frontal - en bref

Passons rapidement en revue la configuration de fichier requise pour le serveur frontal..

catalogue / controller / module / uber_gallery.php: C'est un fichier de contrôleur qui fournit la logique d'application du contrôleur habituel dans OpenCart.
catalogue / langue / anglais / module / uber_gallery.php: C'est un fichier de langue qui aide à configurer les étiquettes de langue.
catalogue / vue / thème / défaut / modèle / module / uber_gallery.tpl: Il s'agit d'un fichier de modèle de vue contenant le XHTML du formulaire de configuration.

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

Créer des fichiers de module

Allez-y et créez un fichier catalogue / controller / module / uber_gallery.php avec le contenu suivant.

load-> language ('module / uber_gallery'); define ('UBER_ORIG_IMG_PATH', HTTP_SERVER.'image / uberGallery / '); include_once (DIR_SYSTEM.'library / uberGallery / resources / UberGallery.php '); $ gallery = UberGallery :: init (); $ data ['heading_title'] = $ setting ['name']; $ data ['responsive_css_url'] = HTTP_SERVER. "système / bibliothèque / uberGallery / ressources / thèmes / uber-responsive / css / style.css"; $ data ['uber_css_url'] = HTTP_SERVER. "système / bibliothèque / uberGallery / resources / UberGallery.css"; $ data ['cbox_url'] = HTTP_SERVER. "système / bibliothèque / uberGallery / resources / colorbox / 1 / colorbox.css"; $ data ['js_url'] = HTTP_SERVER. "système / bibliothèque / uberGallery / ressources / colorbox / jquery.colorbox.js"; $ data ['gallery'] = $ gallery; if (file_exists (DIR_TEMPLATE. $ this-> config-> get ('config_template'). '/template/module/uber_gallery.tpl')) return $ this-> load-> view ($ this-> config-> get ('config_template'). '/template/module/uber_gallery.tpl', $ data);  else return $ this-> load-> view ('default / template / module / uber_gallery.tpl', $ data);

En partant du haut, le UBER_ORIG_IMG_PATH Il faut que vous sachiez qu'il est constant, car cela a été présenté au début de cet article. Nous avons utilisé cela pour effectuer un correctif simple dans le script UberGallery lui-même.

En outre, il y a un extrait important dans le indice méthode qui inclut la bibliothèque UberGallery et crée l'objet de galerie correspondant.

define ('UBER_ORIG_IMG_PATH', HTTP_SERVER.'image / uberGallery / '); include_once (DIR_SYSTEM.'library / uberGallery / resources / UberGallery.php '); $ gallery = UberGallery :: init ();

Ensuite, nous devons inclure quelques fichiers CSS et JavaScript requis par le script UberGallery..

$ data ['responsive_css_url'] = HTTP_SERVER. "système / bibliothèque / uberGallery / ressources / thèmes / uber-responsive / css / style.css"; $ data ['uber_css_url'] = HTTP_SERVER. "système / bibliothèque / uberGallery / resources / UberGallery.css"; $ data ['cbox_url'] = HTTP_SERVER. "système / bibliothèque / uberGallery / resources / colorbox / 1 / colorbox.css"; $ data ['js_url'] = HTTP_SERVER. "système / bibliothèque / uberGallery / ressources / colorbox / jquery.colorbox.js";

Donc, c'est tout pour le contrôleur. Passons à notre prochain fichier.

Créer un fichier de langue catalogue / langue / anglais / module / uber_gallery.php avec le contenu suivant.

Il fournit juste le titre de notre bloc de galerie dans le front-end.

Enfin, passons à notre fichier de gabarit de vue. Créer un fichier catalogue / vue / thème / défaut / modèle / module / uber_gallery.tpl avec le contenu suivant.

      
  createGallery (DIR_SYSTEM. '… / image / uberGallery'); ?>

Encore une fois, c'est assez simple et habituel - nous chargeons des fichiers CSS et JavaScript suivis du script d'initialisation de colorbox qui construit la galerie. En outre, nous devons appeler le créerGalerie méthode que nous avons passé la $ galerie objet du contrôleur. Cela devrait mettre fin à notre configuration de fichier front-end.

À la fin, il reste encore une étape à franchir avant de pouvoir réellement tester notre galerie. Téléchargez quelques images sur le image / uberGallery répertoire comme il est le chemin que nous avons fourni comme argument lorsque nous avons appelé le créerGalerie méthode dans notre fichier de modèle.

Attribuer le module uberGallery à la présentation de la page d'accueil

Dirigez-vous vers le back-end et accédez à Système> Conception> Mises en page. Modifier le Accueil mise en page et ajouter notre uberGallery module au Contenu bas position, comme indiqué dans la capture d'écran suivante.

Frappé le sauvegarder bouton pour valider les modifications et accéder à la page d’accueil. À votre grande surprise, vous devriez voir une jolie galerie d’images sur cette page! Nous avons également intégré colorbox, ce qui vous permet de cliquer sur l'image et d'assister à une superbe fonctionnalité de diaporama superposée..

Jouez avec et je suis sûr que vous serez heureux du fait que votre travail acharné a porté ses fruits! Quoi qu’il en soit, c’était encore simple efficace démonstration de ce que vous pourriez faire avec un module personnalisé OpenCart.

Donc, c’est tout pour ce tutoriel, et cela termine également la série. J'espère que je serai bientôt de retour avec quelques nouveautés rafraîchissantes dans OpenCart. Jusque-là, permettez-moi d'aller prendre un café et de lire quelques-uns des excellents tutoriels sur Envato Tuts +, comme d'habitude!

Conclusion

Dans cette série, nous avons intégré le célèbre script de galerie Web UberGallery à OpenCart. Dans la série en deux parties, nous avons maîtrisé deux aspects différents des modules personnalisés dans OpenCart et achevé avec succès la mise en œuvre du back-end et du front-end..

Je suis fermement convaincu que cela a également servi à démontrer ce dont sont capables les modules personnalisés OpenCart. Utilisez le flux de commentaires ci-dessous, conçu exclusivement pour vous permettre de publier vos commentaires et vos questions.!

Code