javascript - 在 OpenCart 中，我们如何实时更新数据

Question

好吧，我是 OpenCart 的新手。最近开始研究 Opencart 文件系统中的代码。我的目标是在页眉上显示购物车 div 以显示在其他部分，如常见的右或页脚。因此，在查看了 header.php 和 header.tpl 之后，我做了一些更改。在 footer.php 我写了-

$data['cart'] = $this->load->controller('common/cart');

在footer.tpl 上，我只是简单地回应了$cart。

但结果不是我想要的。看一些截图——

http://postimg.org/image/7v77iswgz/

http://postimg.org/image/thi05wgfj/

所以我的问题是，我必须怎么做才能在不刷新页面的情况下更新总价。如果您可以另外提供任何链接，我可以从中学习如何使用代码自定义 opencart，那就太好了。

Answer 1

请检查 common.js 文件并修改var cart以在您的页脚中添加数据。

var cart = {
    'add': function(product_id, quantity) {
        $.ajax({
            url: 'index.php?route=checkout/cart/add',
            type: 'post',
            data: 'product_id=' + product_id + '&quantity=' + (typeof(quantity) != 'undefined' ? quantity : 1),
            dataType: 'json',
            beforeSend: function() {
                $('#cart > button').button('loading');
            },
            success: function(json) {
                $('.alert, .text-danger').remove();

                $('#cart > button').button('reset');

                if (json['redirect']) {
                    location = json['redirect'];
                }

                if (json['success']) {
                    $('#content').parent().before('<div class="alert alert-success"><i class="fa fa-check-circle"></i> ' + json['success'] + '<button type="button" class="close" data-dismiss="alert">&times;</button></div>');

                    $('#cart-total').html(json['total']);

                    $('html, body').animate({ scrollTop: 0 }, 'slow');

                    $('#cart > ul').load('index.php?route=common/cart/info ul li');
                }
            }
        });
    },
    'update': function(key, quantity) {
        $.ajax({
            url: 'index.php?route=checkout/cart/edit',
            type: 'post',
            data: 'key=' + key + '&quantity=' + (typeof(quantity) != 'undefined' ? quantity : 1),
            dataType: 'json',
            beforeSend: function() {
                $('#cart > button').button('loading');
            },
            success: function(json) {
                $('#cart > button').button('reset');

                $('#cart-total').html(json['total']);
//add your footer button here
                if (getURLVar('route') == 'checkout/cart' || getURLVar('route') == 'checkout/checkout') {
                    location = 'index.php?route=checkout/cart';
                } else {
                    $('#cart > ul').load('index.php?route=common/cart/info ul li');
                }
            }
        });
    },
    'remove': function(key) {
        $.ajax({
            url: 'index.php?route=checkout/cart/remove',
            type: 'post',
            data: 'key=' + key,
            dataType: 'json',
            beforeSend: function() {
                $('#cart > button').button('loading');
            },
            success: function(json) {
                $('#cart > button').button('reset');

                $('#cart-total').html(json['total']);
//Add your footer button here
                if (getURLVar('route') == 'checkout/cart' || getURLVar('route') == 'checkout/checkout') {
                    location = 'index.php?route=checkout/cart';
                } else {
                    $('#cart > ul').load('index.php?route=common/cart/info ul li');
                }
            }
        });
    }
}