JetBlocks - Shopping cart, hide counter if empty

Lonsdale201 commented 3 years ago

Hi.

In a future could you add option, to hide the counter, if empty?

I writed a little Jquery to do this manually:

jQuery(document).ready(function( $ ){
$(".jet-blocks-cart__count-val").filter(function() {
  return $(this).text().trim() === "0"; // if the value equal 0
}).closest('.jet-blocks-cart__count').hide(); // choose the main element which want to hide
});

ardaniela commented 3 years ago

Sorry but... 😓 where can I put that (I mean in what file)

Lonsdale201 commented 3 years ago

Sorry but... 😓 where can I put that (I mean in what file)

You can use code snippet plugin , or Elementor pro custom codes features too, to use the code. :)

ardaniela commented 3 years ago

Sorry but I used code snippet and then send me that error when I applied it 👉"syntax error, unexpected '$', expecting variable (T_VARIABLE)" at line 1

And I'm using that plugin

Lonsdale201 commented 3 years ago

Sorry but I used code snippet and then send me that error when I applied it 👉"syntax error, unexpected '$', expecting variable (T_VARIABLE)" at line 1

And I'm using that plugin

Sorry, I was not clear. You can use an extension where you can use multiple code types (html, css js). What you want to use is for php. My code is Jquery. If you have Elementor Pro you can use the Custom Code function that way:

<script>
    jQuery(document).ready(function( $ ){
$(".jet-blocks-cart__count-val").filter(function() {
  return $(this).text().trim() === "0"; // if the value equal 0
}).closest('.jet-blocks-cart__count').hide(); // choose the main element which want to hide
});

</script>

If you don't have it, for example: https://hu.wordpress.org/plugins/custom-css-js/

ardaniela commented 3 years ago

Hello there It worked fine (it hid the zero), it just doesn't work with ajax, that is, I need to reload the page to show the counter with the added products.

I already spoke to croconblock support, maybe they have one.

rtpHarry commented 2 years ago

Good simple snippet.

I used it with the Elementor Custom Code feature and set it to <body> - end. Then I remove the ready() wrapper so that it does it straight away and you don't see it pop.

I agree this should be made into a feature though as it clashes with ajax cart management. For example, if you are on the basket page and remove all the products via ajax, it doesn't trigger when it gets to zero.

rtpHarry commented 2 years ago

I revisited this today and implemented the core technique, using MutationObserver api, to make it react to ajax updates.

<script>
(function($) {
    var _getAmountList = $('.jet-blocks-cart__count');
    _getAmountList.each(
        function() {
            var $targetNode = $(this);

            var callback = function(mutationsList, observer) {
                for (var mutation of mutationsList) {
                    if (mutation.type === 'childList') {
                        var $valNode = $targetNode.find('.jet-blocks-cart__count-val');
                        calculateCartCountVisibility($valNode);
                    }
                }
            };

            var observer = new MutationObserver(callback);

            observer.observe($targetNode[0], { childList: true });
        }
    );

    function calculateCartCountVisibility($valNode) {
        if ($valNode.text().trim() === '0') {
            $valNode.parent().hide();
        } else {
            $valNode.parent().show();
        }
    }
}(jQuery));
</script>

Now when you remove items and it goes down to zero the badge is hidden. If you go back up it returns.

This snippet is also working for me when the page loads with 0 in the cart, so I guess it is being triggered somehow on initial load. Not sure if that is because of the way MutationObserver works or if JetBlocks is making some change to the dom?

This flips the original technique around a little bit, as the jet-blocks-cart__count-val element is destroyed so you need to watch the jet-blocks-cart__count for the changes.

To use it:

Go to Admin > Elementor > Custom Code
Set the location to <body> - End
Add the snippet above in for the content

Probably somebody can optimise the JavaScript a bit more?

Also it assumes that you already have jQuery included somewhere on the page so it will need adding if not.

xC4M commented 2 years ago

@rtpHarry It works for me, but the zero (0) appears while the website is loading at the beginning https://prnt.sc/U0BoMCKJSdBV , but after some seconds it hides. Did you find a way to avoid this situation?, I tried setting it to , but it doesn't work.

rtpHarry commented 2 years ago

Hmm, I'm not sure.

You could try finding the css class that is controlled by the script, and setting that to display: none; as the script will override its display at page load.

I'm not sure about the exact class, you would need to track down what I was referencing when I wrote the $valNode.parent() - just look at the parent of the .jet-blocks-cart__count-val in your site.

Or you could enable a preloader functionality if your theme has it, which would wait until the page has done all its loading before displaying it.

tudorachedesign commented 5 months ago

You can solve the initial "0" if cart is empty by adding this CSS:

    .jet-blocks-cart__count {
        display: none; /* Nascondi di default */
    }

And as the script you can use:

 <script>
(function($) {
    var _getAmountList = $('.jet-blocks-cart__count');
    _getAmountList.each(
        function() {
            var $targetNode = $(this);

            var callback = function(mutationsList, observer) {
                for (var mutation of mutationsList) {
                    if (mutation.type === 'childList') {
                        var $valNode = $targetNode.find('.jet-blocks-cart__count-val');
                        calculateCartCountVisibility($valNode);
                    }
                }
            };

            var observer = new MutationObserver(callback);

            observer.observe($targetNode[0], { childList: true });
        }
    );

    function calculateCartCountVisibility($valNode) {
        if ($valNode.text().trim() === '0') {
            $valNode.parent().hide();
        } else {
            $valNode.parent().show();
        }
    }
}(jQuery));
</script>

Crocoblock / suggestions

JetBlocks - Shopping cart, hide counter if empty #3854