Bug when I .load in opencart

Question

I edited my checkout/cart.tpl and initially everything looks fine, but then when I "add cart" something the code changes automatically and everything be strange.

EXAMPLES

1- when I enter in website and look to cart, everything looks fine:

2- THE BUG/MISTAKE. When I update my cart, when I click in "Add cart" only appear this part of my cart, without prices and checkout etc:

HTML/cart.TPL

<div id="cart">
  <a href="#" data-loading-text="<?php echo $text_loading; ?>"><img src="images/bag.png" alt="Bag" />Cart: <span id="cart-total"><?php echo $text_items; ?></span></a>
  <div class="cart_menu">
    <?php if ($products || $vouchers) { ?>
    <div class="cart_items">
        <?php foreach ($products as $product) { ?>
          <div class="c_item_img floatleft">
          <?php if ($product['thumb']) { ?>
                            <a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" title="<?php echo $product['name']; ?>" /></a>
            <?php } ?>
            </div>


            <div class="c_item_totals floatleft">
                            <div class="c_item_totals_detail floatleft">
                                <a href="<?php echo $product['href']; ?>"><h5><?php echo $product['name']; ?></h5></a>
                                <span><?php echo $product['quantity']; ?> x <?php echo $product['total']; ?></span>
                            </div>
                            <div class="close_icon_cart floatleft">
                                <img src="images/close.png" onclick="cart.remove('<?php echo $product['key']; ?>');" title="<?php echo $button_remove; ?>" alt="" />
                            </div>
                        </div>



            <?php } ?>
            </div>


    <div class="cart_totals">
    <?php foreach ($totals as $total) { ?>
                        <div class="c_totals_left floatleft">
                            <p></p>
                        </div>
                        <div class="c_totals_right floatleft">
                            <p><?php echo $total['title']; ?>   <?php echo $total['text']; ?></p>
                             </div>
                             <?php } ?>

                        </div>


        <div class="cart_view_bottom">
                        <div class="c_totals_left floatleft">
                            <a href="<?php echo $cart; ?>"><?php echo $text_cart; ?></a>
                        </div>
                        <div class="c_totals_right floatleft">
                            <a href="<?php echo $checkout; ?>"><?php echo $text_checkout; ?></a>
                        </div>
                    </div>


    <?php } else { ?>
    <div class="cart_items">
      <p class="text-center"><?php echo $text_empty; ?></p>
    </div>
    <?php } ?>
            </div>  
            </div>

.JS

<script type="text/javascript"><!--
$('#button-cart').on('click', function() {
    $.ajax({
        url: 'index.php?route=checkout/cart/add',
        type: 'post',
        data: $('#product input[type=\'text\'], #product input[type=\'hidden\'], #product input[type=\'radio\']:checked, #product input[type=\'checkbox\']:checked, #product select, #product textarea'),
        dataType: 'json',
        beforeSend: function() {
            $('#button-cart').button('loading');
        },
        complete: function() {
            $('#button-cart').button('reset');
        },
        success: function(json) {
            $('.alert, .text-danger').remove();
            $('.form-group').removeClass('has-error');

            if (json['error']) {
                if (json['error']['option']) {
                    for (i in json['error']['option']) {
                        var element = $('#input-option' + i.replace('_', '-'));

                        if (element.parent().hasClass('input-group')) {
                            element.parent().after('<div class="text-danger">' + json['error']['option'][i] + '</div>');
                        } else {
                            element.after('<div class="text-danger">' + json['error']['option'][i] + '</div>');
                        }
                    }
                }

                if (json['error']['recurring']) {
                    $('select[name=\'recurring_id\']').after('<div class="text-danger">' + json['error']['recurring'] + '</div>');
                }

                // Highlight any found errors
                $('.text-danger').parent().addClass('has-error');
            }

            if (json['success']) {
                $('.breadcrumb').after('<div class="alert alert-success">' + 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 > div').load('index.php?route=common/cart/info .cart_menu .cart_items');
            }
        }
    });
});
//--></script> 

I already tried put all div classes in JavaScript but it didn't work, unfortunately.

Answer 1

I'm almost positive that your problem is due to the fact that you have used the id "cart" in your checkout/cart template which is already in use by the cart module handled by module/cart. It's important to understand that these are two different things and the cart id needs be unique - especially when you are using javascript to update it's contents.

Try changing the id in checkout/cart.tpl to something other than "cart".