• 日常搜索
  • 百度一下
  • Google
  • 在线工具
  • 搜转载
 访客
首页 » 代码教程 » JavaScript » 正文

如何在OpenCart中使用Ajax

ngkoma • 2年前 (2022-06-12) • JavaScript

在 opencart 的核心中包含jquery库使ajax实现变得轻而易举，不仅仅是一种愉快的体验。事实上，如果您尝试专门深入查看视图文件，您会发现遍布整个框架的几个片段显示了 jQuery 的大量使用。

在本文的整个过程中，我们将构建一个自定义页面来演示 Ajax 在 OpenCart 中的使用。这将是一个简单的界面，允许您从下拉框中选择产品，并显示所选产品的漂亮产品摘要块。用例中有趣的部分是产品摘要块的构建方式——它将使用 Ajax 即时准备。当然，这并不能使它成为一个世界级的例子，但我想它会达到展示 OpenCart 中的工作原理的基本目的。

我假设您使用的是最新版本的 OpenCart，即 2.1.xx！此外，本文的主要讨论集中在 Ajax 和 OpenCart 上，因此我将简要介绍 OpenCart 中自定义模块开发的基础知识。但是，如果您不熟悉它，那么快速解释一下中间的代码片段可以确保您可以坚持到最后！

文件组织概览

让我们快速浏览一下自定义页面所需的文件设置。

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

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

  • catalog/view/theme/default/template/ajax/index.tpl：它是一个视图模板文件，包含自定义页面的 Xhtml。

  • catalog/view/theme/default/template/ajax/product.tpl：它是一个视图模板文件，包含 AJAX响应的 XHTML 。

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

创建模块文件

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

<?php
// catalog/controller/ajax/index.php
class ControllerAjaxIndex extends Controller {
  public function index() {
    $this->load->language('ajax/index');
    $this->load->model('catalog/product');
     
    $this->document->setTitle($this->language->get('heading_title'));
     
    // load all products
    $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('heading_title')
    );
 
    $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('common/footer');
    $data['header'] = $this->load->controller('common/header');
 
    if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/ajax/index.tpl')) {
      $this->response->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));
    }
  }
  
  // ajax call method
  public function ajaxGetProduct() {
    if (isset($this->request->get['product_id'])) {
      $product_id = (int) $this->request->get['product_id'];
 
      if ($product_id > 0) {
        // load the particular product requested in ajax
        $this->load->model('catalog/product');
        $product = $this->model_catalog_product->getProduct($product_id);
        $data['product'] = $product;
         
        // prepare thumb image
        $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->currency->format($this->tax->calculate($product['price'], $product['tax_class_id'], $this->config->get('config_tax')));
         
        $this->load->language('product/product');
        $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->response->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));
        }
      }
    }
  }
}

首先，index控制器的方法用于加载语言和模型文件，并为通常的 OpenCart 模板设置公共变量。我们正在加载核心本身中可用的产品模型，因此我们不必复制代码来获取产品信息。

加载产品模型后，我们正在使用该getProducts方法加载所有产品。最后，我们index通过设置index.tpl为我们的主模板文件来结束该方法。

接下来是重要的 ajaxGetProduct方法，它用于根据 Ajax 调用中传递的产品 ID 构建产品摘要块，我们很快将在模板文件中看到。它加载与我们在方法中所做的相同的产品模型index，并调用该 getProduct方法以根据产品 ID 获取特定的产品信息。

最后将product.tpl模板设置为该方法的模板。针对我们案例中的需求，我们使用模板来构建我们的 Ajax 输出，但您也可以改为发送 JSON 响应。

继续前进，让我们创建一个语言文件catalog/language/english/ajax/index.php来保存静态标签信息。

<?php
// catalog/language/english/ajax/index.php
// Heading
$_['heading_title']            = 'Simple Ajax Example';
$_['text_product_dropdown_label']   = 'Select Product';

视图模板文件是本教程上下文中最重要的文件之一，应catalog/view/theme/default/template/ajax/index.tpl使用以下内容创建。

<!-- catalog/view/theme/default/template/ajax/index.tpl -->
<?php echo $header; ?>
<div class="container">
  <ul class="breadcrumb">
    <?php foreach ($breadcrumbs as $breadcrumb) { ?>
    <li><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a></li>
    <?php } ?>
  </ul>
  <div class="row"><?php echo $column_left; ?>
    <?php if ($column_left && $column_right) { ?>
    <?php $class = 'col-sm-6'; ?>
    <?php } elseif ($column_left || $column_right) { ?>
    <?php $class = 'col-sm-9'; ?>
    <?php } else { ?>
    <?php $class = 'col-sm-12'; ?>
    <?php } ?>
    <div id="content" class="<?php echo $class; ?>"><?php echo $content_top; ?>
      <h2><?php echo $heading_title; ?></h2>
      <fieldset id="account">
      <div>
        <label class="col-sm-2 control-label" for="product"><?php echo $text_product_dropdown_label; ?></label>
        <div class="col-sm-10">
          <select name="product" class="form-control" id="product">
            <option>-- <?php echo $text_product_dropdown_label; ?> --</option>
            <?php foreach ($products as $product) { ?>
              <option value="<?php echo $product['product_id']; ?>"><?php echo $product['name']; ?></option>
            <?php } ?>
          </select>
        </div>
      </div>
      </fieldset>
      <div id="product_summary"></div>
      <?php echo $content_bottom; ?></div>
    <?php echo $column_right; ?></div>
</div>
<?php echo $footer; ?>
 
<script type="text/javascript">
  $('#product').on('change', function() {
    $.ajax({
      url: 'index.php?route=ajax/index/ajaxGetProduct&product_id=' + this.value,
      dataType: 'html',
      success: function(htmlText) {
        $('#product_summary').html(htmlText);
      },
      error: function(xhr, ajaxOptions, thrownError) {
        alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
      }
    });
  });
</script>

我们感兴趣的片段是在末尾index.tpl，使用 jQuery 方法绑定更改和 Ajax事件的 JavaScript 代码。当用户从下拉框中选择产品时，会触发 change 事件，最终进行 Ajax 调用。在 Ajax 调用中，我们将product_id附加的作为 GET 查询字符串变量发送。

另一方面，正如我们已经在控制器设置中讨论的那样，ajaxGetProduct发送基于 product_id查询字符串变量的产品摘要块的 XHTML。在成功方法中，我们将 XHTML 响应附加到 id 属性设置为 product_summary 的 div 标记。

最后，继续catalog/view/theme/default/template/ajax/product.tpl为 Ajax 调用创建一个包含以下内容的模板文件。

<!-- catalog/view/theme/default/template/ajax/product.tpl -->
<div style="border: 1px solid #CCC;padding:10px;margin:10px;">
  <h3><?php echo $product['name']; ?> - <?php echo $price; ?></h3>
  <p><img src="<?php echo $thumb; ?>"/></p>
  <p><b><?php echo $text_manufacturer; ?></b>&nbsp;<?php echo $product['manufacturer']; ?></p>
  <p><b><?php echo $text_model; ?></b>&nbsp;<?php echo $product['model']; ?></p>
</div>

这里没什么特别的——我们刚刚包含了一个基本的产品摘要块 XHTML。

所以，就文件设置而言，就是这样。在我们的下一部分中，我们将通过前端来测试我们到目前为止所构建的内容。

前端测试

所以我们已经完成了所有艰苦的工作，现在是时候进行一些测试了！前往 OpenCart 的前端并访问 URL http://www.yourstore.com/index.php?route=ajax/index。它应该显示一个漂亮的界面，如下面的屏幕截图所示。

如何在OpenCart中使用Ajax 第1张这是我们的自定义页面，它显示一个包含所有产品列表的下拉框。现在，让我们尝试从选择框中选择一个产品，它会在后台进行 Ajax 调用。

结果，您应该会在下拉框下方看到一个漂亮的产品摘要块，如以下屏幕截图所示。

如何在OpenCart中使用Ajax 第2张如果您已按照本教程操作并按照说明实现了所有文件，那么它应该对您和我一样顺利运行！当然，这是 Ajax 如何在 OpenCart 中工作的一个非常简单的演示，但是您可以根据自己的要求将其扩展到下一个级别。

继续玩它，并尝试使用 Ajax 制作一些交互式的东西，因为它是最好的学习方式。所以，今天就到这里了，我很快就会回来，带来一些更令人高兴的东西。

结论

Ajax 与 OpenCart 是今天文章的中心吸引力。像往常一样，我们采用自定义模块的方法来演示它，并制作了一个简单而有效的用例。 


文章目录
  • 文件组织概览
  • 创建模块文件
  • 前端测试
  • 结论

    • 如无特殊说明，文章均为本站原创，如若转载，请注明出处：老吴教程
    视频资源部分来自互联网，勿轻易相信视频广告！请自行鉴别避免上当受骗！
    文章标题：如何在OpenCart中使用Ajax
    文章地址：https://www.weixiaolive.com/en/index.php/post/400.html

    相关推荐

      最新文章 | 热门文章 | 随机文章

    站长SO库
    源码
    阿里云