How do I hide out of stock items on Search Results page? Debut Theme

New Member
5 0 0

Hi, can someone help? I am usong Debut Theme and wish to hide Out of Stock items on the Search results page.

 

Here is the search liquid code:

{% paginate search.results by 10 %}

<div class="page-width">
{% if search.performed == false %}
<div class="text-center">
<h1 class="h2">{{ 'general.search.title' | t }}</h1>
{% else %}
<div class="section-header text-center">
<h1 class="h2">
<span class="visually-hidden">{{ 'general.search.heading' | t: count: search.results_count }}:</span>
{{ 'general.search.results_with_count' | t: terms: search.terms, count: search.results_count }}
</h1>
{% endif %}
<div class="grid">
<div class="grid__item medium-up--two-fifths medium-up--push-three-tenths">
<form action="/search" method="get" role="search" class="search">
<div aria-live="polite" class="form-message form-message--error search-result-error-message hide" data-search-error-message>
<ul id="error-search-form">
<li>{{ 'general.search.empty_search_message' | t }}</li>
</ul>
</div>

<div class="input-group">
<input type="search"
id="SearchInput"
class="input-group__field search__input"
name="q"
value="{{ search.terms | escape }}"
placeholder="{{ 'general.search.placeholder' | t }}"
aria-label="{{ 'general.search.placeholder' | t }}"
>
<span class="input-group__btn">
<button id="SearchResultSubmit" class="btn search__submit" type="submit">{{ 'general.search.submit' | t }}</button>
</span>
</div>
</form>
</div>
</div>

{% if search.performed and search.results_count == 0 %}
<hr class="hr--small hr--invisible" aria-hidden="true" />
<div class="rte">
<p>{{ 'general.search.no_results_html' | t: terms: search.terms }}</p>
</div>
{% endif %}
</div>
</div>


{% if search.performed %}
{% if search.results_count > 0 %}
<hr aria-hidden="true" />
{% endif %}
<h2 class="visually-hidden">{{ 'general.search.heading' | t: count: search.results_count }}</h2>
<ul class="page-width list-view-items">
{% for item in search.results %}
<li class="list-view-item">
{% if item.object_type == 'product' %}
{% include 'product-card-list', product: item %}
{% else %}
<div class="product-card product-card--list">
<a href="{{ item.url }}" class="full-width-link">
<span class="visually-hidden">{{ item.title }}</span>
</a>
<div class="list-view-item__link">
{% if item.image %}
<div class="list-view-item__image-column">
<div class="list-view-item__image-wrapper product-card__image-wrapper">
<img class="list-view-item__image" src="{{ item.image.src | img_url: '600x600' }}" alt="{{ item.image.alt | escape }}">
</div>
</div>
{% endif %}

<div class="list-view-item__title-column">
<div class="list-view-item__title" aria-hidden="true">
<span class="product-card__title">{{ item.title }}</span>
</div>
<div>
{% if item.published_at %}{{ item.published_at | date: "%b %d, %Y" }} &#8212; {% endif %}
{{ item.content | strip_html | truncate: 200 }}
</div>
</div>
</div>
</div>
{% endif %}
</li>
{% endfor %}
</ul>

{% if paginate.pages > 1 %}
{% include 'pagination' %}
{% endif %}
{% endif %}

{% endpaginate %}

 

Thanks for the answer!!!! 

0 Likes
Highlighted
Astronaut
878 104 194

I think you can put an if statement in the {% if item.type == "product" %} section. Like:

 

{% if item.object_type == 'product' %}
  {% if item.available %}
    {% include 'product-card-list', product: item %}
  {% endif %}
{% else %}

I assume that the "item" as a "product" will have access to the product object methods. This will only work if you are tracking inventory on the product. Give it a shot and let me know if it works.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
New Member
5 0 0

search.jpg

I pasted the code and now it hides products but keeps the "place" for them. Can you help? :)

0 Likes
Astronaut
878 104 194

I'm not sure whats up, but I think this may be because in your forloop you're still opening the <li> even if it's not a product. I would put it in both the if and the else statement, and remove it after the {% endif %}:

 

 

{% if item.object_type == 'product' %}
<li class="list-view-item">
{% include 'product-card-list', product: item %}
</li>
{% else %}
<li>
<div class="product-card product-card--list">
<a href="{{ item.url }}" class="full-width-link">
<span class="visually-hidden">{{ item.title }}</span>
</a>
<div class="list-view-item__link">
{% if item.image %}
<div class="list-view-item__image-column">
<div class="list-view-item__image-wrapper product-card__image-wrapper">
<img class="list-view-item__image" src="{{ item.image.src | img_url: '600x600' }}" alt="{{ item.image.alt | escape }}">
</div>
</div>
{% endif %}

<div class="list-view-item__title-column">
<div class="list-view-item__title" aria-hidden="true">
<span class="product-card__title">{{ item.title }}</span>
</div>
<div>
{% if item.published_at %}{{ item.published_at | date: "%b %d, %Y" }} &#8212; {% endif %}
{{ item.content | strip_html | truncate: 200 }}
</div>
</div>
</div>
</div>
</li>
{% endif %}

Not sure though. I would imagine that was the problem

 

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
New Member
5 0 0

Can you helo me please copy pasting the whoe search.liquid code? I am not sure where to paste what, what to delete what to keep. If I could just have the whole page code, I could not make a mistake. Pleeeease :)

0 Likes
Astronaut
878 104 194
{% paginate search.results by 10 %}

<div class="page-width">
{% if search.performed == false %}
<div class="text-center">
<h1 class="h2">{{ 'general.search.title' | t }}</h1>
{% else %}
<div class="section-header text-center">
<h1 class="h2">
<span class="visually-hidden">{{ 'general.search.heading' | t: count: search.results_count }}:</span>
{{ 'general.search.results_with_count' | t: terms: search.terms, count: search.results_count }}
</h1>
{% endif %}
<div class="grid">
<div class="grid__item medium-up--two-fifths medium-up--push-three-tenths">
<form action="/search" method="get" role="search" class="search">
<div aria-live="polite" class="form-message form-message--error search-result-error-message hide" data-search-error-message>
<ul id="error-search-form">
<li>{{ 'general.search.empty_search_message' | t }}</li>
</ul>
</div>

<div class="input-group">
<input type="search"
id="SearchInput"
class="input-group__field search__input"
name="q"
value="{{ search.terms | escape }}"
placeholder="{{ 'general.search.placeholder' | t }}"
aria-label="{{ 'general.search.placeholder' | t }}"
>
<span class="input-group__btn">
<button id="SearchResultSubmit" class="btn search__submit" type="submit">{{ 'general.search.submit' | t }}</button>
</span>
</div>
</form>
</div>
</div>

{% if search.performed and search.results_count == 0 %}
<hr class="hr--small hr--invisible" aria-hidden="true" />
<div class="rte">
<p>{{ 'general.search.no_results_html' | t: terms: search.terms }}</p>
</div>
{% endif %}
</div>
</div>


{% if search.performed %}
{% if search.results_count > 0 %}
<hr aria-hidden="true" />
{% endif %}
<h2 class="visually-hidden">{{ 'general.search.heading' | t: count: search.results_count }}</h2>
<ul class="page-width list-view-items">
{% for item in search.results %}
{% if item.object_type == 'product' %}
{% if item.available %} <li class="list-view-item"> {% include 'product-card-list', product: item %} </li>
{% endif %} {% else %} <li class="list-view-item"> <div class="product-card product-card--list"> <a href="{{ item.url }}" class="full-width-link"> <span class="visually-hidden">{{ item.title }}</span> </a> <div class="list-view-item__link"> {% if item.image %} <div class="list-view-item__image-column"> <div class="list-view-item__image-wrapper product-card__image-wrapper"> <img class="list-view-item__image" src="{{ item.image.src | img_url: '600x600' }}" alt="{{ item.image.alt | escape }}"> </div> </div> {% endif %} <div class="list-view-item__title-column"> <div class="list-view-item__title" aria-hidden="true"> <span class="product-card__title">{{ item.title }}</span> </div> <div> {% if item.published_at %}{{ item.published_at | date: "%b %d, %Y" }} &#8212; {% endif %} {{ item.content | strip_html | truncate: 200 }} </div> </div> </div> </div> </li> {% endif %} {% endfor %} </ul> {% if paginate.pages > 1 %} {% include 'pagination' %} {% endif %} {% endif %} {% endpaginate %}

Give that a shot. If something's screwed up you can always revert to an older version. 

 

Edit: Forgot to include my original {% if item.available %}-- updated

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
New Member
5 0 0

Fortunately it did not screw up anything :) But nothing changed compared to the original search result page. It still lists all unavailable items.

 

You can see yourself

https://ekszerakcio.hu/search?q=arany

 

Do you have any other idea?

 

 

0 Likes
Astronaut
878 104 194

I don't know if you saw, but I forgot to include my original if statement in the code I pasted for you, I updated it to include the {% if item.available %} code.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
New Member
5 0 0

I appreciate your help!! Thank you. We are getting close :) Now the out of stock products are hidden. But :) 

If there are 10 out of stock hidden product on the page and 1 available product, it only shows the available, then I need to go to the second search result page to see more available items. Any idea how to see all available products after each other?

 

E.g. https://ekszerakcio.hu/search?page=1&q=f%C3%BClbeval%C3%B3

 

There are 2 products on page 2 while there are 22 pages of results. 

 

Can you help?

0 Likes
Astronaut
878 104 194

I didn't think about how the pagination would be affected. Unfortunately, I don't think there's a way to circumvent this issue, as stated at the end of this article:

 

https://www.shopify.com/partners/blog/custom-search

 

This seems like a pretty obvious feature that shopify should deliver, but I don't know how many times I've said that :)

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes