Я пытаюсь скрыть элемент (no-results-wrapper), если отображаются результаты поиска.
Прямо сейчас, когда есть результаты поиска, элемент (no-results-wrapper) отображается на очень дно результатов. Я хочу, чтобы элемент был скрыт, если есть результаты поиска.
Я пытался использовать {% if search.terms == blank%}, чтобы показать элемент, только если результаты поиска пустые, но это не сработало. Любая помощь будет оценена.
{%- if settings.basel_search_widget != 'disable' -%}
<div class="search-button basel-search-{{settings.basel_search_widget}}">
<a href="#"><i class="fa fa-search"></i></a>
<div class="basel-search-wrapper">
<div class="basel-search-inner">
<span class="basel-close-search">{{ 'general.search.close_search' | t }}</span>
<form role="search" method="get" class="searchform{%- if settings.ajax_search %} basel-ajax-search{%- endif -%}" action="/search">
<div>
<label class="screen-reader-text"></label>
<input type="text" placeholder="{{ 'general.search.placeholder' | t }}" value="{{ search.terms | escape }}" name="q" autocomplete="off">
{%- if settings.only_search_products -%}<input type="hidden" name="type" value="product" />{%- endif -%}
<button type="submit">{{ 'general.search.submit' | t }}</button>
</div>
</form>
<div class="search-results-wrapper">
<div class="basel-search-results">
<div class="autocomplete-wrapper">
<div class="autocomplete-suggestions" style="position: absolute; max-height: 300px; z-index: 9999;"></div>
{% if search.terms == blank %}
<div class="no-results-wrapper">
<div class="search-bar-item">
<div class="canvas ratio-2-3">
<div class="product-image-color-overlay" style="z-index: 10; background-color: #efefef;">
<div class="display-table">
<div class="display-table-cell">
<div class="search-bar-no-result-item">
<p>HMMM...</p>
<p>NOT SURE WHAT YOU’RE
LOOKING FOR?</p>
<p><a href="#">Shop New Arrivals</a>
<a href="#">Shop Latest</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="search-bar-item">
<a href="#">
<div class="canvas ratio-2-3">
<div class="image-over-canvas bkg-image-focus-center-top" style="background-image: url('//cdn');"></div>
<div class="product-image-color-overlay"></div>
</div>
<div class="product-card-details">
<div class="product-card-title">One-Pieces</div>
</div>
</a>
</div>
<div class="search-bar-item">
<a href="#">
<div class="canvas ratio-2-3">
<div class="image-over-canvas bkg-image-focus-center-top" style="background-image: url('//cdn');"></div>
<div class="product-image-color-overlay"></div>
</div>
<div class="product-card-details">
<div class="product-card-title">New Arrivals</div>
</div>
</a>
</div>
<div class="search-bar-item">
<a href="#">
<div class="canvas ratio-2-3">
<div class="image-over-canvas bkg-image-focus-center-top" style="background-image: url('//cdn');"></div>
<div class="product-image-color-overlay"></div>
</div>
<div class="product-card-details">
<div class="product-card-title">Holiday</div>
</div>
</a>
</div>
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
</div>
{%- endif -%}