Solved

How to hide blank metafields.

judu
Tourist
8 0 3

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.

Accepted Solution (1)

Weaverse
Shopify Partner
50 15 21

This is an 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>
Helping merchants build super unique, high-performance storefronts using Weaverse + Hydrogen.
Looking for Development & Agency partners.
If you find the answer helpful, give it a thumbs up!
Our App: Weaverse Hydrogen Theme Customizer

View solution in original post

Replies 11 (11)

Weaverse
Shopify Partner
50 15 21

This is an 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>
Helping merchants build super unique, high-performance storefronts using Weaverse + Hydrogen.
Looking for Development & Agency partners.
If you find the answer helpful, give it a thumbs up!
Our App: Weaverse Hydrogen Theme Customizer
judu
Tourist
8 0 3

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

Raj29
Visitor
3 0 0

Why should I insert this codes ?

 

Ransam
Visitor
1 0 0

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.

 

Metafields pic.png

RSL1
Tourist
4 0 0

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
Visitor
3 0 0

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
Shopify Partner
2883 551 860

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

Let's say you have the following metafield:

diego_ezfy_0-1679457759884.png


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
Visitor
2 0 0

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
Shopify Partner
2405 223 534

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

flareAI : Get Sales from Google Search, on Autopilot
$10+ billion in eCommerce on Google Search, every day. Find out how much you are missing
Raj29
Visitor
3 0 0

Why should I insert this codes

studiocosette
Visitor
1 0 0

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