如何在OpenCart中使用Ajax

将jQuery库包含在OpenCart的核心中使Ajax实现变得轻而易举，而不仅仅是令人愉快的体验。 实际上，如果您尝试专门挖掘视图文件，则会发现在整个框架中分布着几个片段，这些片段表明了jQuery的大量使用。

在本文的整个过程中，我们将构建一个自定义页面来演示Ajax在OpenCart中的使用。 这将是一个简单的界面，可让您从下拉框中选择一种产品，并显示所选产品的漂亮产品摘要块。 用例中有趣的部分是产品摘要模块的构建方式-它将使用Ajax即时准备。 当然，这并不是使它脱颖而出的例子，但我想它将达到显示事物在OpenCart中如何工作的基本目的。

我假设您使用的是OpenCart的最新版本，即2.1.xx！ 另外，本文的主要讨论集中在使用OpenCart的Ajax，因此我将介绍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.tpl设置为主模板文件来结束index方法。

接下来是重要的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的末尾， 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 。 它应该显示一个漂亮的界面，如以下屏幕截图所示。

这是我们的自定义页面，并显示一个包含所有产品列表的下拉框。 现在，让我们尝试从选择框中选择一个产品，它将在后台调用Ajax。

因此，您应该在下拉框的正下方看到一个不错的产品摘要块，如以下屏幕截图所示。

如果您已按照本教程进行操作并按照说明实施了所有文件，那么它对您以及对我来说都应该顺利运行！ 当然，这只是Ajax如何在OpenCart中工作的非常简单的演示，但是您可以根据需要将其扩展到下一个层次。

继续进行下去，尝试使用Ajax制作一些交互式的东西，因为这是学习的最佳方法。 所以，今天就这样，我会很快再带一些令人兴奋的东西。

结论

正是OpenCart的Ajax成为了本文的重点。 与往常一样，我们采用了自定义模块的方法进行演示，并制作了一个简单而有效的用例。

与往常一样，如果您正在寻找其他OpenCart工具，实用程序，扩展等，以便可以在自己的项目中使用或用于自己的教育，请不要忘记查看我们在市场上提供的产品 。

我希望它能为您提供有用的信息，不要犹豫，留下您的疑问和评论！

翻译自: https://code.tutsplus.com/tutorials/how-to-use-ajax-with-opencart--cms-25928