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

Highlighted
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
Shopify Partner
1280 169 402

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 my solution helped you, please like and accept as solution!
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
Highlighted
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
Shopify Partner
1280 169 402

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 my solution helped you, please like and accept as solution!
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
Highlighted
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
Highlighted
Shopify Partner
1280 169 402
{% 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 my solution helped you, please like and accept as solution!
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
Highlighted
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
Highlighted
Shopify Partner
1280 169 402

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 my solution helped you, please like and accept as solution!
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
Highlighted
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
Highlighted
Shopify Partner
1280 169 402

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 my solution helped you, please like and accept as solution!
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