Shopify Question posted in
The Shopify help center can be found here.

How can I hide parent element if child element is hidden? – Shopify

Trying to hide a reviews section stars badge on a Shopify store if the product has 0 reviews. Want this to automatically show up once a product receives a review. Here is the code for it below:

HTML

 <div class="spr-badge-container">
    <span class="stamped-product-reviews-badge stamped-main-badge" data-id="{{ product.id }}" data-product-sku="{{ product.handle }}" data-product-type="{{product.type}}" data-product-title="{{product.title}}"  style="display: inline-block;">{{ product.metafields.stamped.badge }}</span>
 </div>


CSS

.stamped-container[data-count="0"][data-version="2"] { 
display:none !important; 
}

This css hides the review stars inside of the "spr-badge-container". What I’m trying to achieve is hide the "spr-badge-container" div if the span inside it is hidden.

Here’s what I’ve tried so far with no results.

jQuery

if($('.stamped-container[data-count="0"][data-version="2"]').is(":hidden")){
$(".spr-badge-container").hide();
}

----

if($('.stamped-container').is(":hidden")){
$(".spr-badge-container").hide();
}

----

if($('.stamped-container').is(":hidden")){
$(".spr-badge-container").css({display:none});
}

----

if($('.stamped-container[data-count="0"][data-version="2"]').is(":hidden")){
$(".spr-badge-container").css({display:none});
}

None of the methods I’ve tried gave any results, so wanted to ask if I’m missing something or if there is another, perhaps easier way of going about this.

Thanks in advance,
J

EDIT – Here is the HTML as rendered by the browser

HTML for review stars section

<div class="spr-badge-container review-margin-cust">
 <span class="stamped-product-reviews-badge stamped-main-badge" data-id="6208427819182" data-product-sku="PRODUCT" data-product-type="" data-product-title="1/2" diameter="" .140"="" height="" clear="" rubber="" bumper"="" style="display: inline-block;">
 <span class="stamped-badge" data-rating="0.0" data-lang="en" aria-label="Rated 0.0 out of 5 stars">
 <span class="stamped-starrating stamped-badge-starrating" aria-hidden="true">
 <i class="stamped-fa stamped-fa-star-o" aria-hidden="true"></i>
 <i class="stamped-fa stamped-fa-star-o" aria-hidden="true"></i>
 <i class="stamped-fa stamped-fa-star-o" aria-hidden="true"></i>
 <i class="stamped-fa stamped-fa-star-o" aria-hidden="true"></i>
 <i class="stamped-fa stamped-fa-star-o" aria-hidden="true"></i>
 </span><span class="stamped-badge-caption" data-reviews="0" data-rating="0.0" data-label="reviews" aria-label="0 reviews" data-version="2">
 </span>
 </span>
 </span>
 </div>


HTML for main reviews section

<div class="stamped-container" data-count="0" data-widget-style="standard2" data-widget-language=""
    data-widget-sort="recent" data-widget-load-type="pagination" data-widget-show-graph="false"
    data-widget-show-sort="false" data-widget-show-date="true" data-widget-type="standard2"
    data-widget-show-summary-photo="true" data-widget-show-summary-recommend="true" data-widget-show-tab-reviews="true"
    data-widget-show-avatar="true" data-widget-show-location="true" data-widget-show-verified="true"
    data-widget-show-share="true" data-widget-show-votes="true" data-widget-show-qna="true"
    data-widget-show-product-variant="true" data-version="2">
    <div class="stamped-header-title"> Customer Reviews </div>
    <div class="stamped-header">
        <div class="stamped-summary" data-count="0">
            <div style="width:200px;float:left;" class="summary-overview">
                <span class="stamped-summary-caption stamped-summary-caption-1">
                    <span class="stamped-summary-text-1" data-count="0" data-rating="0.0">0.0</span>

                </span>
                <span class="stamped-starrating stamped-summary-starrating" aria-hidden="true"> <i
                        class="stamped-fa stamped-fa-star-o" aria-hidden="true"></i><i
                        class="stamped-fa stamped-fa-star-o" aria-hidden="true"></i><i
                        class="stamped-fa stamped-fa-star-o" aria-hidden="true"></i><i
                        class="stamped-fa stamped-fa-star-o" aria-hidden="true"></i><i
                        class="stamped-fa stamped-fa-star-o" aria-hidden="true"></i> </span>
                <span class="stamped-summary-caption stamped-summary-caption-2">
                    <span class="stamped-summary-text" data-count="0" data-rating="0.0">Based on 0 Reviews</span>
                </span>
            </div>
            <div class="stamped-summary-ratings" data-count="0" aria-hidden="true" style="">
                <div class="summary-rating" data-count="0">
                    <div class="summary-rating-title">5 ★</div>
                    <div class="summary-rating-bar" data-rating="5">
                        <div class="summary-rating-bar-content" style="width:0%;" data-rating="0">0%&nbsp;</div>
                    </div>
                    <div class="summary-rating-count">0</div>
                </div>
                <div class="summary-rating" data-count="0">
                    <div class="summary-rating-title">4 ★</div>
                    <div class="summary-rating-bar" data-rating="4">
                        <div class="summary-rating-bar-content" style="width:0%;" data-rating="0">0%&nbsp;</div>
                    </div>
                    <div class="summary-rating-count">0</div>
                </div>
                <div class="summary-rating" data-count="0">
                    <div class="summary-rating-title">3 ★</div>
                    <div class="summary-rating-bar" data-rating="3">
                        <div class="summary-rating-bar-content" style="width:0%;" data-rating="0">0%&nbsp;</div>
                    </div>
                    <div class="summary-rating-count">0</div>
                </div>
                <div class="summary-rating" data-count="0">
                    <div class="summary-rating-title">2 ★</div>
                    <div class="summary-rating-bar" data-rating="2">
                        <div class="summary-rating-bar-content" style="width:0%;" data-rating="0">0%&nbsp;</div>
                    </div>
                    <div class="summary-rating-count">0</div>
                </div>
                <div class="summary-rating" data-count="0">
                    <div class="summary-rating-title">1 ★</div>
                    <div class="summary-rating-bar" data-rating="1">
                        <div class="summary-rating-bar-content" style="width:0%;" data-rating="0">0%&nbsp;</div>
                    </div>
                    <div class="summary-rating-count">0</div>
                </div>
            </div>
            <div class="stamped-summary-photos stamped-summary-photos-container" aria-hidden="true"
                style="display:none;">
                <div class="stamped-photos-title"> Customer Photos </div>
                <div style="position:relative;overflow: hidden;">
                    <div class="stamped-photos-carousel" data-total="0">
                        <div> </div>
                    </div>
                </div>
                <div class="stamped-photos-carousel-btn-left"> <span class="btn-slide-left" data-direction="left"><i
                            class="fa fa-chevron-left" aria-hidden="true"></i></span> </div>
                <div class="stamped-photos-carousel-btn-right"> <span class="btn-slide-right" data-direction="right"><i
                            class="fa fa-chevron-right" aria-hidden="true"></i></span> </div>
            </div>


            <span class="stamped-summary-actions">
                <span class="stamped-summary-actions-newreview"
                    onclick="StampedFn.toggleForm('review','6208427819182');return false;" style="cursor: pointer;"
                    tabindex="0">Write a Review</span>
                <span class="stamped-summary-actions-newquestion" style="cursor: pointer;display:none;"
                    onclick="StampedFn.toggleForm('question', '6208427819182');return false;" tabindex="0">Ask a
                    Question</span>
            </span>
        </div>
    </div>
    <div class="stamped-content">
        <div class="stamped-tab-container" style="display:none;">
            <ul class="stamped-tabs">
                <li id="tab-reviews" class="active" data-type="reviews" data-count="0" aria-label="Reviews"
                    tabindex="0">Reviews</li>
                <li id="tab-questions" data-type="questions" style="display:none;" data-count="0" aria-label="Questions"
                    tabindex="0" data-new-tab="">Questions</li>
            </ul>
        </div>

        <form method="post" id="new-review-form_6208427819182" class="new-review-form"
            onsubmit="event.preventDefault(); StampedFn.submitForm(this);" style="display:none;">

            <input type="hidden" name="productId" value="6208427819182">
            <div class="stamped-form-title" style=" display:none;">Write a review</div>
            <fieldset class="stamped-form-contact">
                <legend style="display:none;">Author</legend>
                <div class="stamped-form-contact-name">
                    <label class="stamped-form-label" for="review_author_6208427819182">Name</label>
                    <input class="stamped-form-input stamped-form-input-text " id="review_author_6208427819182"
                        type="text" name="author" required="" value="" placeholder="Enter your name"
                        autocomplete="name">
                </div>
                <div class="stamped-form-contact-email">
                    <label class="stamped-form-label" for="review_email_6208427819182">Email</label>
                    <input class="stamped-form-input stamped-form-input-email " id="review_email_6208427819182"
                        type="email" name="email" required="" value="" placeholder="[email protected]"
                        autocomplete="email">
                </div>
                <div class="stamped-form-contact-location">
                    <label class="stamped-form-label" for="review_location_6208427819182">Location</label>
                    <input class="stamped-form-input stamped-form-input-text " id="review_location_6208427819182"
                        type="text" name="location" value="" placeholder="e.g Paris, France"
                        autocomplete="shipping country">
                </div>
            </fieldset>
            <fieldset class="stamped-form-review">
                <legend style="display:none;">Rating</legend>
                <div class="stamped-form-review-rating">
                    <label class="stamped-form-label" for="reviewRating">Rating</label>
                    <input type="text" id="reviewRating" name="reviewRating"
                        style="font-size: 0px; border: none; height: 1px; width: 1px; margin: 0; padding: 0; line-height: 0px; min-height: 0px;"
                        required="">

                    <div class="stamped-form-input stamped-starrating"> <a
                            onclick="StampedFn.setRating(this);return false;" class="stamped-fa stamped-fa-star-o"
                            data-value="1" tabindex="0" aria-label="1 star rating"><span
                                style="display:none;">1</span></a> <a onclick="StampedFn.setRating(this);return false;"
                            class="stamped-fa stamped-fa-star-o" data-value="2" tabindex="0"
                            aria-label="2 stars rating"><span style="display:none;">2</span></a> <a
                            onclick="StampedFn.setRating(this);return false;" class="stamped-fa stamped-fa-star-o"
                            data-value="3" tabindex="0" aria-label="3 stars rating"><span
                                style="display:none;">3</span></a> <a onclick="StampedFn.setRating(this);return false;"
                            class="stamped-fa stamped-fa-star-o" data-value="4" tabindex="0"
                            aria-label="4 stars rating"><span style="display:none;">4</span></a> <a
                            onclick="StampedFn.setRating(this);return false;" class="stamped-fa stamped-fa-star-o"
                            data-value="5" tabindex="0" aria-label="5 stars rating"><span
                                style="display:none;">5</span></a> </div>
                </div>
                <div class="stamped-form-review-title">
                    <label class="stamped-form-label" for="review_title_6208427819182">Title of Review</label>
                    <input class="stamped-form-input stamped-form-input-text" id="review_title_6208427819182"
                        type="text" name="reviewTitle" required="" value="" placeholder="Give your review a title">
                </div>
                <div class="stamped-form-review-body">
                    <label class="stamped-form-label" for="review_body_6208427819182">How was your overall
                        experience?</label>
                    <div class="stamped-form-input">
                        <textarea class="stamped-form-input stamped-form-input-textarea" id="review_body_6208427819182"
                            data-product-id="6208427819182" name="reviewMessage" required="" rows="10"
                            maxlength="5000"></textarea>
                    </div>
                </div>
            </fieldset>
            <fieldset class="stamped-form-custom-questions">
                <legend style="display:none;">Questions</legend>

            </fieldset>
            <fieldset class="stamped-form-actions">
                <legend style="display:none;">Photos</legend>
                <span class="stamped-file-holder">

                </span>
                <span class="stamped-file-uploader" style="display:none;">
                    <label for="stamped-file-uploader-input">
                        <span style="display:none;">Upload</span>
                        <input id="stamped-file-uploader-input" type="file" name="stamped-file-uploader-input"
                            class="stamped-file-uploader-input" multiple="" data-product-id="6208427819182"
                            style="display:none;">

                        <span class="stamped-file-uploader-btn"
                            style="border:1px solid #333;padding: 6px 10px; font-size:13px; border-radius: .3em;">
                            <i class="stamped-fa stamped-fa-camera"></i>
                            <span class="stamped-file-uploader-btn-label2"></span>
                        </span>
                    </label>
                </span>
                <span class="stamped-file-loading hide" style="display:none;">
                    <i class="fa fa-spinner fa-spin" aria-hidden="true"></i>
                </span>

                <input id="stamped-button-submit" type="submit"
                    class="stamped-button stamped-button-primary button button-primary btn btn-primary" value="Submit">
            </fieldset>
        </form>
        <div class="stamped-messages">
            <div class="stamped-thank-you">
                <p>Thank you for submitting a review!</p>
                <p>Your input is very much appreciated. Share it with your friends so they can enjoy it too!</p>
                <div class="stamped-share-links"><a class="facebook"><span><i
                                class="stamped-fa stamped-fa-facebook"></i>Facebook</span></a><a
                        class="twitter"><span><i class="stamped-fa stamped-fa-twitter"></i>Twitter</span></a></div>
            </div>
            <div class="stamped-empty-state" style="display:none;">
                <div>Be the first to review this item</div>
            </div>
        </div>
        <div class="stamped-reviews-filter" id="stamped-reviews-filter" data-show-filters="">
            <span class="stamped-sort-select-wrapper">
                <select id="stamped-sort-select" class="stamped-sort-select" onchange="StampedFn.sortReviews(this);"
                    aria-label="Sort reviews" tabindex="0">
                    <option value="featured" selected="">Sort</option>
                    <option value="recent">Most Recent</option>
                    <option value="highest-rating">Highest Rating</option>
                    <option value="lowest-rating">Lowest Rating</option>
                    <option value="most-votes">Most Helpful</option>
                </select>
            </span>

            <div class="stamped-reviews-filter-label">Filter Reviews:</div>

            <div class="stamped-reviews-search-text" style="display:none;">
                <span class="stamped-reviews-search-icon stamped-fa stamped-fa-search"></span>
                <input id="stamped-reviews-search-input" class="stamped-reviews-search-input" type="text"
                    placeholder="Search Reviews" aria-label="Search reviews input">
                <span class="stamped-reviews-search-button"></span>
                <span class="stamped-reviews-search-clear" tabindex="0" aria-label="Clear search input"
                    style="display:none;">×</span>
            </div>

            <div class="stamped-filters-wrapper">
                <div class="stamped-summary-keywords">
                    <ul class="stamped-summary-keywords-list">

                    </ul>
                </div>

                <div class="stamped-filter-selects">

                    <span class="stamped-sort-select2-wrapper" style="display:none;">
                        <select id="stamped-sort-select2" class="stamped-sort-select"
                            onchange="StampedFn.sortReviews(this);" aria-label="Sort reviews and ratings" tabindex="0"
                            style="display:none;">
                            <option value="featured" selected="">Sort</option>
                            <option value="recent">Most Recent</option>
                            <option value="highest-rating">Highest Rating</option>
                            <option value="lowest-rating">Lowest Rating</option>
                            <option value="most-votes">Most Helpful</option>
                        </select>
                    </span>
                </div>
            </div>

            <div class="stamped-summary-actions-clear" tabindex="0" role="button" aria-label="Clear filters"
                style="cursor: pointer;display:none;">Clear filters</div>

            <div class="stamped-summary-actions-mobile-filter" tabindex="0" role="button" aria-label="More filters"
                style="cursor: pointer;display:none;"><i class="stamped-fa stamped-fa-params"></i> More Filters</div>
        </div>
        <div class="stamped-reviews"></div>
    </div>
</div>

Also, the full css hiding these elements

CSS

 #stamped-main-widget .stamped-container[data-count="0"] { display: none !important; }
     .stamped-container[data-count="0"][data-version="2"] { display:none !important; }
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The above answer worked a charm, Thank you so much! I edited it slightly to get the complete result I needed.

    CSS

    .spr-badge-container {
        display: none;
    }

    #stamped-main-widget .stamped-container[data-count="0"] {
        display: none !important;
    }

    JS

    window.onload = () => {
        if (jQuery('.stamped-container').data('count') != '0') {
            $(".spr-badge-container").css('display', 'block');
        }
    }

    Once again, big thanks! I was stuck on this for a while.


  2. 0

    Okay, according to your description you try this approach, by default hide them all .spr-badge-container
    and then on page load check the count and if there is value then show or otherwise leave it hidden.

    CSS:

    .spr-badge-container{ display: none;}

    JS:

    winodw.onload = ()=>{
 if(jQuery('.stamped-container').data('count') != '0' ){
   $(".spr-badge-container").css('display', 'block');
   // use CSS or show to display the container
   $(".spr-badge-container").show();
 }
}

    Note: JS code using jQuery so must be loaded after the jQuery lib load, otherwise code not works.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search