0

catalog/product/view/type/default.phtml shows availablity and some custom code on the product page.

Is there a way to reload/refresh deault.phtml on the page when the user clicks Add To Cart? without reloading the full page.

My website uses AJAX and here is the code I think I need to modify.

function setAjaxData(data, elm) {
if (data.status == 'ERROR') {
    jQuery(elm).find('i').remove();
    jQuery(elm).find('> span').show();
    showCartBox(data.message);
} else {
    var time = 6;
    var url_view_cart = jQuery('.typo-cart-label').attr('href');
    var txt_view_cart = Translator.translate("Go TO Checkout");  
    var btn_view_cart = '<a class="button btn-cart btn-view-cart" href="http://domain.co.uk/onestepcheckout/index/">'+txt_view_cart+' <span class="count" data-count="'+time+'">'+time+'</span></a>';

    $typo('.typo-maincart').html('');
    if ($typo('.typo-maincart')) {
        $typo('.typo-maincart').append(data.output);
    }
    if ($typo('.header .links')) {
        $typo('.header .links').replaceWith(data.toplink);
    }
    // $typo.colorbox.close();
    // showCartBox(data.message, false);
    jQuery(elm).find('.icon_loading').remove();
    jQuery(elm).append('<i aria-hidden="true" class="icon_check"></i>');
    jQuery('.typo-cart-label .print').addClass('animate-bounceIn active');

    setTimeout(function(){
        jQuery(elm).after(btn_view_cart);
        jQuery(elm).hide();

        var counter = jQuery(elm).find('+ .btn-view-cart span.count');
        var countHide = function(){
            var time = counter.attr('data-count');
            if (time<= 0 || time == 'undefined') {
                $typo.colorbox.close();
                return;
            }
            else time-=1;
            counter.html(time).attr('data-count', time);
            setTimeout(function(){ countHide() }, 1000);
        }

        countHide();
    }, 2000);


    setTimeout(function () {
        jQuery(elm).fadeIn('slow').removeClass('pointer-event');
        jQuery(elm).find('.icon_check').remove();
        jQuery(elm).find('> span').show();
        jQuery(elm).find('+ .btn-view-cart').remove();
    }, 7000);

    $typo("#ajaxcart-scrollbar").mCustomScrollbar({
        theme:"dark-2",
        scrollButtons:{
          enable:true
        }
    });
}

Your help is hugely appreciated.

0

Whats in your default.phtml.. You cannot reload just a whole block or part of a template. What i did in another solution is created a external script outside of magento core just returning the new html code i needed. Then i did a jquery ajax call getting that data and inserting it back into the page.

  • Default.phtml is a default magento template that shows the product availablity. anthing I put in cart.phtml reloads the new data when add to cart is pressed but I cant seem to figure out how it works. – Mike Tim Turner May 12 '16 at 13:39
  • Ahh sorry. Inside the default. Phtml is a product bundle. When the customer adds the item to the cart, it shows a tick next to the item but you can only see it on page reload and as my website uses ajax. the page doesn't reload – Mike Tim Turner May 12 '16 at 13:54
  • Then you really have to do that via a external script. check if a product id is added to the cart and then do it that way via jquery or something. Then on reload its good as well so you dont have to do anything – Kay Int Veen May 12 '16 at 14:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.