How to hide sections in an online store when the cart is empty?

[LittlePaddocks]

Hi Everyone. 

Does anyone know a way to hide some sections in my online store when the cart is empty please?

Perhaps some CSS?

Thanks 🙂

[gr_trading]

Hi @LittlePaddocks 

CSS can hide objects on which they applied to you rather need a script that will check the cart count and hide the section you want.

Request you to use the below script to achieve the same and put this script to theme.liquid

$(function(){
jQuery.getJSON("/cart.js", function(data) {
  var u = {}, r, e, f;
  if(data.items.length){
$("#[nodeid]").hide()
   }
})
})

replace [nodeid] to real section ID or you can use .[classname] 

Make sure you have a jQuery plugging script in the header of theme.liquid, if now put the below line before the closing of </head> tag.

  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>

Hope this will help...

[LittlePaddocks]

Hi @gr_trading. Thank you for your reply.

Where would I find the section ID please? Also if i wanted to hide multiple section would I add the first set of code multiple times?

Thank you!

[gr_trading]

You can put as many ID you want to hide in a single line, like below

$("#shopify-section-template--16132814340262__featured_collection,#[anotherid],#[thirdid]").hide()

Don't forget to mark my answer as a solution.

Still facing issues, I can do for you if you are willing to hire.

[LittlePaddocks]

Appreciate your help with this @gr_trading 🙂

Last question... inside the [ ] brackets for the additional ID's do I just add the number or the whole line? ["#shopify-section-template--16132814340262__featured_collection] or [16132814340262]

Thanks!

[gr_trading]

You have to put while text available in id=""

Please refer the screenshot with arrow its pointing to where you will find the section id

[LittlePaddocks]

Thank you @gr_trading 

Could you please just confirm this is written correctly?...

$(function(){
jQuery.getJSON("/cart.js", function(data) {
  var u = {}, r, e, f;
  if(data.items.length){
$(“#id="shopify-section-template--16929332723876__1690487153f6fb2fc5").hide()
   }
})
})

[gr_trading]

U dont need id=" after #

[LittlePaddocks]

Hi @gr_trading ,

I've edited the script as you said and added it to theme.liquid

But unfortunately it doesn't seem to make the section disappear. Maybe I've added it in the wrong place?

Please see screenshots 🙂

Thanks for your help!