将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> <?php echo $product['manufacturer']; ?></p>
<p><b><?php echo $text_model; ?></b> <?php echo $product['model']; ?></p>
</div>
这里没什么好想的,我们只包含了一个基本的产品摘要块XHTML。
因此,就文件设置而言就是这样。 在下一节中,我们将通过前端来测试到目前为止已构建的内容。
前端测试
因此,我们已经完成了所有艰苦的工作,现在是时候进行一些测试了! 转到OpenCart的前端,然后访问URL http://www.yourstore.com/index.php?route=ajax/index 。 它应该显示一个漂亮的界面,如以下屏幕截图所示。
![自定义页面下拉菜单](https://cms-assets.tutsplus.com/uploads/users/413/posts/25928/image/ajax-and-opencart-dropdown.png)
这是我们的自定义页面,并显示一个包含所有产品列表的下拉框。 现在,让我们尝试从选择框中选择一个产品,它将在后台调用Ajax。
因此,您应该在下拉框的正下方看到一个不错的产品摘要块,如以下屏幕截图所示。
![AJAX预览](https://cms-assets.tutsplus.com/uploads/users/413/posts/25928/image/ajax-and-opencart-ajax-preview.png)
如果您已按照本教程进行操作并按照说明实施了所有文件,那么它对您以及对我来说都应该顺利运行! 当然,这只是Ajax如何在OpenCart中工作的非常简单的演示,但是您可以根据需要将其扩展到下一个层次。
继续进行下去,尝试使用Ajax制作一些交互式的东西,因为这是学习的最佳方法。 所以,今天就这样,我会很快再带一些令人兴奋的东西。
结论
正是OpenCart的Ajax成为了本文的重点。 与往常一样,我们采用了自定义模块的方法进行演示,并制作了一个简单而有效的用例。
与往常一样,如果您正在寻找其他OpenCart工具,实用程序,扩展等,以便可以在自己的项目中使用或用于自己的教育,请不要忘记查看我们在市场上提供的产品 。
我希望它能为您提供有用的信息,不要犹豫,留下您的疑问和评论!
翻译自: https://code.tutsplus.com/tutorials/how-to-use-ajax-with-opencart--cms-25928