The number that indicates the nr. items in the minicart needs to be loaded with ajax

This topic has 4 replies, 2 voices, and was last updated 9 months, 1 weeks ago ago by Rose Tyler

  • Avatar: Clau8826
    Clau8826
    Participant
    March 19, 2024 at 07:45

    Hi,

    I have a problem that i realized when a customer told me, quote “Your site keeps adding and then removing items in the cart when i browse the page”

    Actually he was wrong, the site does not add and remove items, the site is fine

    But the problem is only visual, related with the little number that displays the current number of items in the mini cart , this one: https://prnt.sc/dyt9B1_hZmju

    That number is not loaded with ajax. So if a site has page caching it will cache the text 1, 2 ,3 or whatever the number of items was at the time the page was cached

    So lets assume a page was cached from a browsing session that had 2 items in cache. Then the next time ANOTHER visitor visits that page it will display 2 and then after a second or so it will update the number to the actual correct number of items you have

    So, it will display 2 and then quickly switch to 0 after 1-2 seconds
    Then if you refresh it will do the same

    Now if another page is cached from another user’s session you could end up with a different number 🙂

    So it is just visual thing

    Other themes solved this by simply loading that number with ajax. So, when you visit a page there will be a little spinner that is spinning until the correct number is loading.
    Or, leave the number space blank and then the correct number appears

    Any chance you are willing to solve this in the upcoming update?

    PS: The same thing for wishlist items ofcourse
    PS2: Your demos have greater problems with cache . If i go on your demo and add an item to cart it will still display 0

    I hope you understand the issue

    Currently i disabled page caching on my site to avoid this issue

    Thank you in advance

    Files is visible for topic creator and
    support staff only.
    3 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    March 19, 2024 at 09:54

    Hello, Clau8826,

    Thank you for reaching out to us with your concerns regarding the mini cart item count display on your website.

    We kindly suggest that you enable the “Always Load ‘Wc-Cart-Fragments'” option located within Theme Options > Speed Optimization. After doing so, please observe the functionality to see if the issue has been resolved.

    Best Regards,
    8Theme’s Team

    Avatar: Clau8826
    Clau8826
    Participant
    March 19, 2024 at 10:03

    Hi. That is already enabled

    Like I have explained in my original message the actual items and the cart are ok

    BUT the displayed number is not loaded with ajax so therefore it gets page cached

    Again , this is very important … the items and the cart are ok … it is only the fact that if the homepage(or any other page) gets cached from a browsing session with 0 items in cart … if a customer enters the homepage and he has 3 items in cart then the minicart will show 0 at first ( because that was page cached ) and then after 1-2 seconds max it will switch back to 3 ( his actual number )

    I am not sure how to explain it better

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    March 19, 2024 at 12:44

    Hello, Clau8826,

    We hope this message finds you well.

    The explanation provided was indeed accurate; the process functions as described, and unfortunately, we do not have the capability to alter this process.

    As a potential solution, you could implement a loader in place of the basket while it is loading via AJAX. This would prevent the 1-2 seconds of emptiness that currently occurs. Here is an example that could be integrated, which would display a loader while the site is loading: https://prnt.sc/pmtBXGO6GeN7

    body:not(.et-preloader-hide) .et_b_header-cart .et-cart-quantity {
        text-indent: -100vw;
    }
    
    body:not(.et-preloader-hide) .et_b_header-cart .et-cart-quantity:before {
        content: '';
        position: absolute;
        width: .5em;
        height: .5em;
        border: .05em solid currentColor;
        border-radius: 50%;
        border-left-color: transparent;
        animation: rotate .5s linear infinite;
    }

    Best Regards,
    8Theme’s Team

  • Viewing 4 results - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.