Hide empty Collapsible Row in Dawn

DeeLT · ‎06-12-2024

We sell a variety of seedlings on our website. We also sell some growing supplies. These products all use the same product template.

I have created a metafield that contains the embed link for a youtube video. I have added a collapsible row with custom liquid and the metafield for the video is in there. It is displaying correctly on products (example here https://8c4caf-34.myshopify.com/products/lettuce-starfighter).

The problem is not all of the products have a product video, so I want to hide the empty element so it doesn't show an empty collapsible row.

I followed this video. https://youtu.be/6XSuYF3rNa4?si=zkdD6Ps5-HngVzFV but the javascript isn't hiding the empty accordions.

Here is the javascript I added in a custom liquid on the template.

{% if product.metafields.custom.video == blank %}
<script>
document.querySelectorAll('.accordion__title').forEach(function(title) {
if (title.textContent.includes('Video')) {
const parentElement = title.closest('.product__accordion');
if (parentElement) {
parentElement.style.display = 'none';
}
}
});
</script>
{% endif %}

Why is it not hiding the empty accordions? Here's a product with an empty accordion. https://8c4caf-34.myshopify.com/products/tower-garden-timer

Dan-From-Ryviu · ‎06-13-2024

Hi @DeeLT

You can simply do that by adding this code to the theme.liquid file, after <head>

<style>
#Details-collapsible_tab_ciUU7d-template--22713603916087__main { display: none; }
#Details-collapsible_tab_ciUU7d-template--22713603916087__main:has(iframe) { display: block !important; } 
</style>

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

EBOOST · ‎06-13-2024

Hi @DeeLT ,

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code

2. sections/main-product.liquid

3. Find code "{%- when 'collapsible_tab' -%}"

4. Refer screenshot to add code

{%  if block.settings.content != blank or block.settings.page.content  != blank %}

{%  endif %}

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free. Github.com/eboost10
- ❤❤DONATE ❤❤Coffee tips

DeeLT · ‎06-13-2024

Thanks for that, however it is removing accordions that are not empty too, as shown in the loom. https://www.loom.com/share/053b9204e3c54640abea95f003d6809e?sid=85a51fcc-fa47-4b21-82b9-a08737161a9c

ausgeknipst · ‎10-23-2024

This worked! Thanks.

Dan-From-Ryviu · ‎06-13-2024

Hi @DeeLT

You can simply do that by adding this code to the theme.liquid file, after <head>

<style>
#Details-collapsible_tab_ciUU7d-template--22713603916087__main { display: none; }
#Details-collapsible_tab_ciUU7d-template--22713603916087__main:has(iframe) { display: block !important; } 
</style>

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

DeeLT · ‎06-25-2024

Thanks! Works like a charm. I have two follow up questions.

1. This shows those that contain "iframe". I have another collapsible row that displays certain metafields on the product. How can I hide the section if the product doesn't have those metafields defined?

Here is a page WITH those "Crop Properties" metafields. https://8c4caf-34.myshopify.com/products/vegetables-pepper-aura

Here is a page WITHOUT those "Crop Properties" metafields. https://8c4caf-34.myshopify.com/products/20-net-pots

2. Adding this code is great, and gets my site where I want it, but is there an easy way to ensure it stays when updating the theme? Or do I just need to manually paste it after updating the theme?

DeeLT · ‎06-25-2024

I figured it out. I inspected the page to find the ID for the other collapsible rows. I said if one has (p) and the other has (a). Works like a charm.