Running the latest version of OpenCart, in product.tpl, there is the following line of code in the javascript at the bottom:

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

This line updated the cart total without having to reload the page, so $('#cart-total').html(json['total']); outputs <span id="cart-total">6 item(s) - $693.50</span>

However, I have customized cart.tpl module and the cart.php language file to display the cart output slightly differently so that it outputs like this:

<span id="cart-total">
     <div class="mini-cart-items">6 Items</div>
     <div class="mini-cart-total">Your total is $693.50</div>
</span>

So, for some reason, when $('#cart-total').html(json['total']); updates the cart total, it removes the two divs I have inside it and just displays the information without the formatting I've set.

Is it possible to update the javascript so that it does not strip the info?

I can supply more of the code if needed for context.

EDTI: This is the entire javascript section that $('#cart-total').html(json['total']); is within:

if (json['success']) {
                $('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');

                $('.success').fadeIn('slow');

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

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

current code, with edits described below:

        if (json['success']) {
            $('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');

            $('.success').fadeIn('slow');

            console.log(json['total']);
            var output = $(json['total']).text().split('-');
            $('.mini-cart-items').html(output[0]);
            $('.mini-cart-total').html('Your total is ' + output[1]);

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

Running the latest version of OpenCart, in product.tpl, there is the following line of code in the javascript at the bottom:

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

This line updated the cart total without having to reload the page, so $('#cart-total').html(json['total']); outputs <span id="cart-total">6 item(s) - $693.50</span>

However, I have customized cart.tpl module and the cart.php language file to display the cart output slightly differently so that it outputs like this:

<span id="cart-total">
     <div class="mini-cart-items">6 Items</div>
     <div class="mini-cart-total">Your total is $693.50</div>
</span>

So, for some reason, when $('#cart-total').html(json['total']); updates the cart total, it removes the two divs I have inside it and just displays the information without the formatting I've set.

Is it possible to update the javascript so that it does not strip the info?

I can supply more of the code if needed for context.

EDTI: This is the entire javascript section that $('#cart-total').html(json['total']); is within:

if (json['success']) {
                $('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');

                $('.success').fadeIn('slow');

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

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

current code, with edits described below:

        if (json['success']) {
            $('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');

            $('.success').fadeIn('slow');

            console.log(json['total']);
            var output = $(json['total']).text().split('-');
            $('.mini-cart-items').html(output[0]);
            $('.mini-cart-total').html('Your total is ' + output[1]);

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

• javascript
• jquery
• opencart

• what is within your json['total']? – thecodeparadox Commented May 7, 2012 at 10:31

4 Answers 4

If you json['total'] contain only numeric amount then you can try this:

$('#cart-total .mini-cart-total').empty().html('Your total is $' + json['total']);

According to your edit:

var output = $(json['total']).text().split('-');

$('.mini-cart-items').html(output[0]);
$('.mini-cart-total').html('Your total is ' + output[1]);

DEMO

I have troble with it too and I find how to resolve problem.

how to work json['total'] I find in catalog/controller/checkout/cart.php

$json['total'] = sprintf($this->language->get('text_items') .......

but it`s not so importantly, 'text_items' placed in two place

catalog/language/russian/module/cart.php

and

catalog/language/russian/checkout/cart.php

it's very interesting, module file use at first, checkout file use with json

here is my 'text_items' , i placed it in two language files

// Text
$_['text_items'] = 'In cart: <div class="header-product">%s product</div> summ %s';

the above works, well u can always give your div an id

<div id="mini-cart-total" class="mini-cart-total">Your total is $574.00</div>

in your script:

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

at the end of the day, $('#id').html(str) replaces all html in the id with what you pass in.

I have solved it by this

setTimeout(function(){
  $('#cart-total').html('Your total is $' + json['total']); 
}, 100);

Just add delay