How can I hide all blank metafields on my webpage?

[judu]

Hello, 

I've searched this community on how to hide blank metafields. The only partial solution I found is by doing the following steps and inputting this code below:

https://community.shopify.com/c/shopify-design/hiding-collapsible-rows-with-a-blank-metafield/m-p/19...

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<script>
const pfInterval = setInterval(() => {
var block = document.querySelectorAll('.product__accordion.accordion.quick-add-hidden')[1]
var blockApp = block.querySelector('.accordion__content')
if(blockApp ){
clearInterval(pfInterval)
if(blockApp.childElementCount === 0) {
    blockApp.parentElement.remove()
}
}
},100)
</script>

My remaining issue is that I have more than 1 blank metafield and this code only hides 1 blank metafield while leaving the remaining blank metafields displayed. How do I hide all the blank metafields? Thank you in advance for your help.

[Weaverse · Accepted solution]

Hello,

To hide all blank metafields using the code you provided, you can modify the code slightly to loop through all the collapsible rows and hide those with empty metafields. Here's an updated code snippet you can use:

<script>
const interval = setInterval(() => {
  const blocks = document.querySelectorAll('.product__accordion.accordion.quick-add-hidden')
  let allMetafieldsEmpty = true
  for (let i = 0; i < blocks.length; i++) {
    const block = blocks[i]
    const blockApp = block.querySelector('.accordion__content')
    if (blockApp) {
      if (blockApp.childElementCount === 0) {
        blockApp.parentElement.remove()
      } else {
        allMetafieldsEmpty = false
      }
    }
  }
  if (allMetafieldsEmpty) {
    clearInterval(interval)
  }
}, 100)
</script>

[judu]

This worked great, thank you so much for your help! ◡̈ 

[Raj29]

Why should I insert this codes ?

[Ransam]

Hi I entered the above code to Hide the visible Metafields that have no contents. It worked but I can still see visible lines that separates the 3 metafields sections. Any solution ? Thank you.

[RSL1]

I still seem to be having the issue. I've added the code as mentioned. https://shop.robotsmashingleague.com/products/repeat-max-motor-mounts-pair

[Kiran7]

Where should I insert this code? I have image with text sections on product page both rendered with metafields , will this code work for such sections or only text?. Will the empty place holder of image be gone when I use this code? Please help

[diego_ezfy]

You can wrap it around a {% if %}. 

Let's say you have the following metafield:

If you want to show it only when it is not empty, use it like this:

{% assign test_me = product.metafields.custom.test_me %}


{% if test_me != blank %}
{{ test_me }}
{% endif %}

Kind regards,
Diego

[Brayden078]

To hide all the blank metafields, you can modify the existing code to loop through all the collapsible rows and hide the ones that have no content. Here's an updated code that should work:

<script>
const pfInterval = setInterval(() => {
const blocks = document.querySelectorAll('.product__accordion.accordion.quick-add-hidden');
let allBlocksHaveContent = true;

for (let i = 0; i < blocks.length; i++) {
const block = blocks[i];
const blockApp = block.querySelector('.accordion__content');

if (blockApp) {
if (blockApp.childElementCount === 0) {
blockApp.parentElement.remove();
} else {
allBlocksHaveContent = false;
}
}
}

if (allBlocksHaveContent) {
clearInterval(pfInterval);
}
}, 100);
</script>

 This code selects all the collapsible rows with the class product__accordion.accordion.quick-add-hidden, and loops through each of them. For each row, it checks if the content of the collapsible row is empty. If it's empty, it removes the entire row. If it's not empty, it sets a flag allBlocksHaveContent to false.   itunes for chromebook

 After the loop, if allBlocksHaveContent is still true, it clears the interval to stop the script from running. If allBlocksHaveContent is false, the script waits another 100ms and then runs the loop again.

[flareAI]

Hello @judu,

This is Gina from flareAI app helping Shopify merchants get $5Million+ in sales from Google Search, on autopilot.

To hide all blank metafields on your Shopify store, you can modify the code you have provided to iterate over all metafield blocks and hide them if they are blank.

This is the modified code:

<script>
const pfInterval = setInterval(() => {
  var blocks = document.querySelectorAll('.product__accordion.accordion.quick-add-hidden');
  var allEmpty = true;
  
  blocks.forEach(block => {
    var blockApp = block.querySelector('.accordion__content');
    if (blockApp) {
      if (blockApp.childElementCount === 0) {
        blockApp.parentElement.remove();
      } else {
        allEmpty = false;
      }
    }
  });
  
  if (allEmpty) {
    clearInterval(pfInterval);
  }
}, 100);
</script>

This code will loop through all metafield blocks with the class "product__accordion.accordion.quick-add-hidden" and check if the ".accordion__content" element is empty. If it is, it will remove the parent element. If all metafields are empty, it will clear the interval and stop checking.

Gina

[Raj29]

Why should I insert this codes

[studiocosette]

It works! I inserted in Theme.liquid before  </body>