将UberGallery与OpenCart集成：第二部分

在本系列中，我们将探索如何将 UberGallery 脚本与 opencart 集成。为了实现这一点，我们在 OpenCart 中构建了一个模块，这样我们就可以在本地完成这些事情。在本系列的第一部分中，我们讨论了自定义模块的后端部分，最终产品是一个很好的配置表单，它允许我们轻松配置 UberGallery参数。今天，我们将看到它的前端对应物，它实际上在前端显示画廊。

如果您还没有完成第一部分，强烈建议您这样做，因为我们今天要编写的代码在很大程度上依赖于它。在第一部分中，我们完成了后端正常工作的所有先决条件，特别是我们的 UberGallery 配置页面。在这一部分中，我们将专注于前端设置。

让我们继续前进，从前端用户的角度构建有用的东西。

快速修复 UberGallery

我们需要稍微调整 UberGallery 脚本，以使其与我们的 OpenCart 模块顺利运行。

继续打开 并找到以下行：system/library/uberGallery/resources/UberGallery.php

'file_path' => htmlentities($relativePath),

将其替换为以下内容：

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

而已。这背后的原因是file_path核心 UberGallery 脚本中处理的方式。在我们的例子中，与 UberGallery 相比，我们将在一个完全不同的位置拥有原始图像的目录。所以，这是一个简单的修复。

最后，创建一个新目录image/uberGallery并使其可被 Web 服务器写入。这是我们将上传画廊原始图像的地方。

前端文件设置——简而言之

让我们快速浏览一下前端的文件设置require d。

• catalog/controller/module/uber_gallery.php：它是一个控制器文件，提供了 OpenCart 中常用控制器的应用程序逻辑。

• catalog/language/english/module/uber_gallery.php: 这是一个帮助设置语言标签的语言文件。

• catalog/view/theme/default/template/module/uber_gallery.tpl：它是一个视图模板文件，包含配置表单的 XHTML。

所以，这是我们今天要实现的文件的快速列表。

创建模块文件

继续并创建一个catalog/controller/module/uber_gallery.php包含以下内容的文件。

<?php
class ControllerModuleUberGallery extends Controller {
    public function index($setting) {
        $this->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 . "system/library/uberGallery/resources/themes/uber-responsive/css/style.css";
        $data['uber_css_url'] = HTTP_SERVER . "system/library/uberGallery/resources/UberGallery.css";
        $data['cbox_url'] = HTTP_SERVER . "system/library/uberGallery/resources/colorbox/1/colorbox.css";
        $data['js_url'] = HTTP_SERVER . "system/library/uberGallery/resources/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);
        }
    }
}

从顶部开始，您应该注意UBER_ORIG_IMG_PATH const ant，因为它在本文开头已经介绍过。我们用它对 UberGallery 脚本本身进行了简单的修复。

此外，该方法中有一个重要的片段 index包含 UberGallery 库并创建相应的画廊对象。

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

接下来，我们需要包含UberGallery 脚本所需的几个 CSS 和javascript文件。

$data['responsive_css_url'] = HTTP_SERVER . "system/library/uberGallery/resources/themes/uber-responsive/css/style.css";
$data['uber_css_url'] = HTTP_SERVER . "system/library/uberGallery/resources/UberGallery.css";
$data['cbox_url'] = HTTP_SERVER . "system/library/uberGallery/resources/colorbox/1/colorbox.css";
$data['js_url'] = HTTP_SERVER . "system/library/uberGallery/resources/colorbox/jquery.colorbox.js";

所以这就是控制器。让我们继续我们的下一个文件。

创建catalog/language/english/module/uber_gallery.php具有以下内容的语言文件。

<?php
// Heading
$_['heading_title'] = 'uberGallery';

它只是在前端为我们的画廊块提供标题。

最后，让我们继续我们的视图模板文件。创建一个catalog/view/theme/default/template/module/uber_gallery.tpl包含以下内容的文件。

<!-- FIRST DO STATIC, after that CONVERT ALL PATH AND SETTINGS DYNAMIC -->
<link rel="stylesheet" type="text/css" href="<?php echo $uber_css_url; ?>" />
<link rel="stylesheet" type="text/css" href="<?php echo $responsive_css_url; ?>" />
<link rel="stylesheet" type="text/css" href="<?php echo $cbox_url; ?>" />
<script type="text/JavaScript" src="<?php echo $js_url; ?>"></script>
 
<script type="text/javascript">
$(document).ready(function(){
    $("a[rel='colorbox']").colorbox({maxWidth: "90%", maxHeight: "90%", opacity: ".5"});
});
</script>
<h3><?php echo $heading_title; ?></h3>
<div class="row">
  <?php $gallery->createGallery(DIR_SYSTEM.'../image/uberGallery'); ?>
</div>

同样，它是非常简单和常用的东西——我们正在加载 CSS 和 JavaScript 文件，然后是构建画廊的颜色框初始化脚本。此外，我们需要在 从控制器createGallery传递对象时调用该方法。$gallery这应该结束我们的前端文件设置。

最后，在我们继续并实际测试我们的画廊之前还需要一个步骤。将几个图像上传到 目录，因为它是我们在模板文件中image/uberGallery调用该方法时作为参数提供的路径 。createGallery

将 uberGallery 模块分配给主页布局

前往后端并导航到System > Design > Layouts。编辑Home布局并将我们的uberGallery模块添加到 Content Bottom 位置，如下面的屏幕截图所示。

点击保存按钮提交更改并转到前端主页。令您惊讶的是，您应该在该页面上看到一个漂亮的图片库！我们还集成了彩盒，因此您可以单击图像并见证漂亮的叠加式幻灯片功能。

玩它，我相信你会为你的辛勤工作得到回报而感到高兴！无论如何，这只是一个简单而有效的演示，展示了使用 OpenCart 自定义模块可以做什么。

所以，这就是本教程的内容，它也结束了这个系列。希望我能很快回来，在 OpenCart 中带来一些新的和令人耳目一新的东西。在那之前，请允许我像往常一样去喝杯咖啡并阅读一些关于 Envato Tuts+ 的精彩教程！

结论

在本系列中，我们将流行的 Web 画廊脚本 UberGallery 与 OpenCart 集成。在分两部分的系列中，我们攻克了 OpenCart 中自定义模块的几个不同方面，并成功完成了后端和前端的实现。