script prevent updating updating minicart info

Bjarne Fyrstenborg 1284 posts 4038 karma points MVP 8x c-trib

Jan 05, 2012 @ 12:26

Hi..

Previously I added this code in the end of updatePageUI function in teaCommerce_Advanced.js to update Cloud Zoom, fancybox and a carousel, but then I noticed it's preventing it from updating the minicart info + go back to step 1, when I empty the cart.

$('.cloud-zoom, .cloud-zoom-gallery').CloudZoom();
    $("#product .cloud-zoom").fancybox({
          'centerOnScroll' : true,
          'transitionIn'  :  'elastic',
          'transitionOut'  :  'none',
          'speedIn'    :  600,
          'speedOut'    :  200,
          'overlayShow'  :  true,
          'overlayColor'  :  '#000',
          'cyclic'    :  true,
          'easingIn'    :  'easeInOutExpo',
          'hideOnContentClick' : false
    });

    $('#carousel ul').carouFredSel({
          prev: '#prev',
          next: '#next',
          pagination: "#pager",
          auto: false,
          pauseOnHover: true,
          items : {
            visible: 4,
          },
          scroll : {
            items: 1,
            duration: 1000,
          }
    });

If I empty the cart I get this:

and have to refresh the page myself to get this:

I was in doubt whether to place the code in end of updatePageUI function or as the code below related to this post:

if(data.CurrentCountryChanged || data.CurrentCurrencyChanged){
    updatePageUI();
    <!-- Above code here -->
  }
});

But if I remove the script from updatePageUI function and paste the here instead it still seems to work with Cloud Zoom, fancybox and the carousel and then also go back to step1 and updating the cart info after empty the cart in step1, step2, step3...

Bjarne

Copy Link

Anders Burla 2560 posts 8256 karma points

Jan 05, 2012 @ 15:59

Hi Bjarne

Looks like you have a javascript problem. You should try and use FireBug for firefox and try and step through the different methods and see where the bug happens. Try and out comment the cloud zoom code and see if it then works. If so you know the problem is with that code.

Kind regards
Anders

Copy Link

Bjarne Fyrstenborg 1284 posts 4038 karma points MVP 8x c-trib

Jan 05, 2012 @ 16:08

Hi Anders

Well it works fine when I paste the code here:

if(data.CurrentCountryChanged|| data.CurrentCurrencyChanged){
    updatePageUI();
    <!--Update Cloud Zoom, Fancybox, carousel,..-->
  }
});

instead of inside the updatePageUI function..
I have changes it here: http://sub.ak-security.dk/da/shop.aspx ...you are welcome to add products to the cart and test it.. It doesn't seem to give any problem..

But it's perhaps better to have it inside the updatePageUI function?

When I just remove the script from updatePageUI function it also works.. but then there is the problem when updating currency or variant.

Bjarne

Copy Link

Anders Burla 2560 posts 8256 karma points

Jan 05, 2012 @ 16:19

If it works - dont fix it :) But sounds weird that just because its inside the method things go wrong. Must be because the updatePageUI is invoked from different other places and it doesnt work there. But you will have to debug that.

Kind regards
Anders

Copy Link

Bjarne Fyrstenborg 1284 posts 4038 karma points MVP 8x c-trib

Jan 05, 2012 @ 17:15

Yes.. I tried something different to place the code inside the "invoke-xslt" function inside updatePageUI instead and that works..

function updatePageUI() {
  /*
  All xslt's that can be invoked in this way have information in a div
  with the class "invokeXSLT". For every one of them we update the UI.
  */
  jQuery('div.invokeXSLT:not(div#products div.product div.invokeXSLT)').each(function () {
    var invokeXSLT = jQuery(this),
        parent = invokeXSLT.parent(),
        productid = parent.attr('productid') || _nodeId;
        htmlFromServer = TeaCommerce.invokeXSLT(invokeXSLT.text(), productid,
        {
          umbracoLanguageId: _languageId,
          async: false
        });
    parent.before(htmlFromServer).remove();
    
    $('.cloud-zoom, .cloud-zoom-gallery').CloudZoom();
    $("#product .cloud-zoom").fancybox({
          'centerOnScroll' : true,
          'transitionIn'  :  'elastic',
          'transitionOut'  :  'none',
          'speedIn'    :  600,
          'speedOut'    :  200,
          'overlayShow'  :  true,
          'overlayColor'  :  '#000',
          'cyclic'    :  true,
          'easingIn'    :  'easeInOutExpo',
          'hideOnContentClick' : false
    });

    $('#carousel ul').carouFredSel({
          prev: '#prev',
          next: '#next',
          pagination: "#pager",
          auto: false,
          pauseOnHover: true,
          items : {
            visible: 4,
          },
          scroll : {
            items: 1,
            duration: 1000,
          }
    });
    
    
    
  });
  
  <!-- Cloud Zoom, Fancybox, carousel script was placed here before - but doesn't updated the cart info and go back to step 1. -->
}

This might be a better solution? So the updatePageUI function is called instead where it's needed..

Bjarne

Copy Link

Bjarne Fyrstenborg 1284 posts 4038 karma points MVP 8x c-trib

Jan 11, 2012 @ 16:32

There still seems to be a problem with update the cart after empty the cart .. it is updated when I delete each product, but not when use empty cart from the minicart.

If I remove the scripts, Cloud Zoom, Fancybox and carousel it works.. but it won't be updated after changing currency or variant.

Firebug says gives me this error when I empty the cart:

$(".cloud-zoom, .cloud-zoom-gallery").CloudZoom is not a function

$('.cloud-zoom, .cloud-zoom-gallery').CloudZoom();

But even when I remove Cloud Zoom, it's still a problem..

If I move all the three scripts inside to here:

if(data.CurrentCountryChanged|| data.CurrentCurrencyChanged){
    updatePageUI();
    <!--UpdateCloudZoom,Fancybox, carousel,..-->
  }
});

then it empty the cart, update the cart info to "The cart is empty text" and I don't get that error in Firebug about Cloud Zoom.

Bjarne

Copy Link

is working on a reply...

Flag this post as spam?

Script prevent updating updating minicart info