Hide empty Collapsible Row in Dawn

Solved

Hide empty Collapsible Row in Dawn

DeeLT
Excursionist
20 0 4
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
Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
8532 1682 1692

This is an accepted solution.

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 and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 5 (5)

EBOOST
Shopify Partner
1045 281 319

Hi @DeeLT ,

May I suggest to update code these steps:

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

EBOOST_1-1672356985580.png

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 %} 

EBOOST_0-1718253962801.png

 

 

 

- 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
- ❤❤DONATE ❤❤
DeeLT
Excursionist
20 0 4

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

Dan-From-Ryviu
Shopify Partner
8532 1682 1692

This is an accepted solution.

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 and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

DeeLT
Excursionist
20 0 4

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
Excursionist
20 0 4

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.