使用Ajax / jQuery更新div

Question

I have a Magento shop and i need to get the sidebar cart updated after adding a product to it.

But i can't make it working... I've tried a lot of things but i'm out of options.

I have this function:

function setLocationAjax(url, id)
{
    url = url.replace("checkout/cart", "ajax/index");
    url += 'isAjax/1/';
    if ('https:' == document.location.protocol) {
        url = url.replace('http:', 'https:');
    }
    $('#ajax_loading' + id).css('display', 'block');
    try {
        $.ajax({
            url:url,
            dataType:'jsonp',
            success:function (data) {
                $('#ajax_loading' + id).css('display', 'none');
                showMessage(data.message);
                if (data.status != 'ERROR' && $('.cart_sidebar_container').length) {
                    $('.cart_sidebar_container').replaceWith(data.cart_top);
                }
            }
        });
    } catch (e) {
    }
}

And this is the HTML/PHP code:

<?php $_cartQty = $this->getSummaryCount(); if ( is_null($_cartQty) ) $_cartQty = 0; ?>
<?php $params = $this->getRequest()->getParams(); if(empty($params['isAjax'])) : ?>
<div class="cart-top-title"><a href="<?php echo $this->getUrl('checkout/cart') ?>" class="clearfix"><span class="icon"></span><?php echo $this->__('Shopping cart'); ?></a></div>
<?php endif; ?>
<div class="cart_sidebar_container">
<div class="cart-top">
    <a class="summary" href="<?php echo $this->getUrl('checkout/cart') ?>"></a>
    <span><?php echo $this->__('BAG').' ('.$_cartQty.')'; ?></span>
</div>
<div class="details details-sidebar">
    <div class="details-border"></div>
    <?php $_items = $this->getRecentItems() ?>
    <?php if(count($_items)): ?>
    <p class="block-subtitle text-recently"><?php echo $this->__('Recently added item(s)') ?></p>
    <ol id="cart-sidebar" class="mini-products-list">
        <?php foreach($_items as $_item): ?>
        <?php echo $this->getItemHtml($_item) ?>
        <?php endforeach; ?>
    </ol>
    <div class="subtotal-wrapper">
        <div class="subtotal">
            <?php if ($this->canApplyMsrp()): ?>
            <span class="map-cart-sidebar-total"><?php echo $this->__('ORDER TOTAL WILL BE DISPLAYED BEFORE YOU SUBMIT THE ORDER'); ?></span>
            <?php else: ?>
                <span class="label"><?php echo $this->__('Cart Subtotal:') ?></span> <?php echo Mage::helper('checkout')->formatPrice($this->getSubtotal()) ?>
            <?php if ($_subtotalInclTax = $this->getSubtotalInclTax()): ?>
                <br />(<?php echo Mage::helper('checkout')->formatPrice($_subtotalInclTax) ?> <?php echo Mage::helper('tax')->getIncExcText(true) ?>)
                <?php endif; ?>
            <?php endif; ?>
        </div>
    </div>
    <div class="buttons">
        <div class="button_wrap">
            <button type="button" title="<?php echo $this->__('View Cart') ?>" class="button btn-continue" onclick="setLocation('<?php echo $this->getUrl('checkout/cart') ?>')"><span><span><?php echo $this->__('View Cart') ?></span></span></button>
        </div>
        <?php if($_cartQty && $this->isPossibleOnepageCheckout()): ?>
            <?php echo $this->getChildHtml('extra_actions') ?>
            <div class="button_wrap">
                <button type="button" title="<?php echo $this->__('Checkout') ?>" class="button btn-checkout" onclick="setLocation('<?php echo $this->getCheckoutUrl() ?>')"><span><span><?php echo $this->__('Continue to Checkout') ?></span></span></button>
            </div>
        <?php endif ?>
    </div>
    <?php else: ?>
    <p class="a-center"><?php echo $this->__('You have no items in your shopping cart.') ?></p>
    <?php endif ?>
</div>

Can someone help me with this?

I need to reload the current code and now it's replacing the div with another small div which loads the cart on hover.

Thank you!

Regards, Robert

Answer 1

I have really no idea which one that could be...

This is the whole code in ajaxcart.js:

//called from quick view iframe
function setAjaxData(data,iframe){
//showMessage(data.message);
if (data.status != 'ERROR' && jQuery('.cart-top-container').length) {
    jQuery('.cart-top-container').replaceWith(data.cart_top);
}
}

function showMessage(message)
{
jQuery('body').append('<div class="alert"></div>');
var $alert = jQuery('.alert');
$alert.slideDown(400);
$alert.html(message).append('<button></button>');
jQuery('button').click(function () {
    $alert.slideUp(400);
});
$alert.slideDown('400', function () {
    setTimeout(function () {
        $alert.slideUp('400', function () {
            jQuery(this).slideUp(400, function(){ jQuery(this).detach(); })
        });
    }, 7000)
});
}

jQuery(function($) {

$('.btn-cart').live('click', function () {
    if ( $(this).hasClass('show-options') ) return false;
    if ( $(window).width() < 769 )  {
        return false;
    }
    var cart = $('.cart-top');
    var imgtodrag = $(this).parents('li.item').find('a.product-image img:not(.back_img)').eq(0);
    if (imgtodrag) {
        var imgclone = imgtodrag.clone()
            .offset({ top:imgtodrag.offset().top, left:imgtodrag.offset().left })
            .css({'opacity':'0.7', 'position':'absolute', 'height':'150px', 'width':'150px', 'z-index':'1000'})
            .appendTo($('body'))
            .animate({
                'top':cart.offset().top + 10,
                'left':cart.offset().left + 30,
                'width':55,
                'height':55
            }, 1000, 'easeInOutExpo');
        imgclone.animate({'width':0, 'height':0}, function(){ $(this).detach() });
    }
    return false;
});


if ( Shopper.quick_view ) {
    $('li.item').live({
        mouseenter: function(){ $(this).find('.quick-view').css('display', 'block'); },
        mouseleave: function(){ $(this).find('.quick-view').hide(); }
    });
}

$('.fancybox').live('click', function() {
    if ( $(window).width() < 769 )  {
        window.location = $(this).next().attr('href');
        return false;
    }
    var $this = $(this);
    var quick_view_href = $this.attr('href');
    if ( Shopper.category != '') {
        quick_view_href += 'qvc/'+Shopper.category+'/';
    }
    if ('https:' == document.location.protocol) {
        quick_view_href = quick_view_href.replace('http:', 'https:');
    }
    $.fancybox({
        hideOnContentClick:true,
        width:800,
        autoDimensions:true,
        type:'iframe',
        href: quick_view_href,
        showTitle:true,
        scrolling:'no',
        onComplete:function () {
            $('#fancybox-frame').load(function () { // wait for frame to load and then gets it's height
                $('#fancybox-content').height($(this).contents().find('body').height() + 30);
                $.fancybox.resize();
            });
        }
    });
    return false;
});

$('.show-options').live('click', function(){
    $('#fancybox' + $(this).attr('data-id')).trigger('click');
    return false;
});
$('.ajax-cart').live('click', function(){
    setLocationAjax($(this).attr('data-url'), $(this).attr('data-id'));
    return false;
});

function setLocationAjax(url, id)
{
    url = url.replace("checkout/cart", "ajax/index");
    url += 'isAjax/1/';
    if ('https:' == document.location.protocol) {
        url = url.replace('http:', 'https:');
    }
    $('#ajax_loading' + id).css('display', 'block');
    try {
        $.ajax({
            url:url,
            dataType:'jsonp',
            success:function (data) {
                $('#ajax_loading' + id).css('display', 'none');
                showMessage(data.message);
                if (data.status != 'ERROR' && $('.cart-top-container').length) {
                    $('.cart-top-container').replaceWith(data.cart_top);
                }
            }
        });
    } catch (e) {
    }
}

});