Hi community,
we are using product recommendations on our product pages.
Unfortunately Shopify by standard does not display the recomendations when the product is currently sold out.
You can the define the products in the search and discovery app but you cannot change the filter options.
How can we change that via code?
I have found the corresponding code in the main-product.liquid file, but I am not able to do this. It seems that the products to display are calculated somewhere and stored in ‘recommendations.products’ but I cannot find where this function is.
Here the code I found:
{%- when 'complementary' -%}
<product-recommendations class="complementary-products quick-add-hidden no-js-hidden{% if block.settings.make_collapsible_row %} is-accordion{% endif %}{% if block.settings.enable_quick_add %} complementary-products-contains-quick-add{% endif %}" data-url="{{ routes.product_recommendations_url }}?section_id={{ section.id }}&product_id={{ product.id }}&limit={{ block.settings.product_list_limit }}&intent=complementary">
{%- if recommendations.performed and recommendations.products_count > 0 -%}
<aside aria-label="{{ 'accessibility.complementary_products' | t }}" {{ block.shopify_attributes }}{% if block.settings.make_collapsible_row %} class="product__accordion accordion"{% endif %}>
<div class="complementary-products__container">
{%- if block.settings.make_collapsible_row -%}
<details id="Details-{{ block.id }}-{{ section.id }}" open>
<summary>
{%- endif %}
<div class="summary__title">
{%- if block.settings.make_collapsible_row -%}
{% render 'icon-accordion', icon: block.settings.icon %}
<h2 class="h4 accordion__title">{{ block.settings.block_heading }}</h2>
{%- else -%}
<h2 class="h3 accordion__title">{{ block.settings.block_heading }}</h2>
{%- endif -%}
</div>
{%- if block.settings.make_collapsible_row -%}
{% render 'icon-caret' %}
</summary>
{%- endif -%}
<slideshow-component class="slider-mobile-gutter">
{%- assign number_of_slides = recommendations.products_count | plus: 0.0 | divided_by: block.settings.products_per_page | ceil -%}
<div id="Slider-{{ block.id }}" class="contains-card contains-card--product complementary-slider grid grid--1-col slider slider--everywhere" role="list"{% if number_of_slides > 1 %} aria-label="{{ 'general.slider.name' | t }}"{% endif %}>
{%- for i in (1..number_of_slides) -%}
<div id="Slide-{{ block.id }}-{{ forloop.index }}" class="complementary-slide complementary-slide--{{ settings.card_style }} grid__item slider__slide slideshow__slide" tabindex="-1" role="group"{% if number_of_slides > 1 %} aria-roledescription="{{ 'sections.slideshow.slide' | t }}" aria-label="{{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"{% endif %}>
<ul class="list-unstyled" role="list">
{%- for product in recommendations.products limit: block.settings.products_per_page offset: continue -%}
<li>
{% render 'card-product',
card_product: product,
media_aspect_ratio: block.settings.image_ratio,
show_secondary_image: false,
lazy_load: false,
show_quick_add: block.settings.enable_quick_add,
section_id: section.id,
horizontal_class: true,
horizontal_quick_add: true
%}
</li>
{%- endfor -%}
</ul>
</div>
{%- endfor -%}
</div>
{%- if number_of_slides > 1 -%}
<div class="slider-buttons no-js-hidden">
<button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'general.slider.previous_slide' | t }}">{% render 'icon-caret' %}</button>
<div class="slider-counter slider-counter--{{ block.settings.pagination_style }}{% if block.settings.pagination_style == 'counter' or block.settings.pagination_style == 'numbers' %} caption{% endif %}">
{%- if block.settings.pagination_style == 'counter' -%}
<span class="slider-counter--current">1</span>
<span aria-hidden="true"> / </span>
<span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
<span class="slider-counter--total">{{ number_of_slides }}</span>
{%- else -%}
<div class="slideshow__control-wrapper">
{%- for i in (1..number_of_slides) -%}
<button class="slider-counter__link slider-counter__link--{{ block.settings.pagination_style }} link" aria-label="{{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}" aria-controls="Slider-{{ block.id }}">
{%- if block.settings.pagination_style == 'numbers' -%}{{ forloop.index }}{% else %}<span class="dot"></span>{%- endif -%}
</button>
{%- endfor -%}
</div>
{%- endif -%}
</div>
<button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'general.slider.next_slide' | t }}">{% render 'icon-caret' %}</button>
</div>
{%- endif -%}
</slideshow-component>
{%- if block.settings.make_collapsible_row -%}
</details>
{%- endif -%}
</div>
</aside>
{%- endif -%}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-complementary-products.css' | asset_url | stylesheet_tag }}
{%- if block.settings.enable_quick_add -%}
{{ 'quick-add.css' | asset_url | stylesheet_tag }}
<script src="{{ 'quick-add.js' | asset_url }}" defer="defer"></script>
{%- endif -%}
</product-recommendations>
{%- when 'icon-with-text' -%}
{% render 'icon-with-text',
block: block
%}
{%- endcase -%}
{%- endfor -%}
<a href="{{ product.url }}" class="link product__view-details animate-arrow">
{{ 'products.product.view_full_details' | t }}
{% render 'icon-arrow' %}
</a>
</product-info>
</div>
{%- if section.settings.media_position == 'right' -%}
{% comment %} Duplicate gallery to display after product content on tablet/desktop breakpoint {% endcomment %}
<div class="grid__item product__media-wrapper small-hide">
{% render 'product-media-gallery', variant_images: variant_images, is_duplicate: true %}
</div>
{%- endif -%}
</div>
We are using Taste Theme 9.0. Website link is https://vapes4you.de
Help is highly appreciated.
Kind regards
V4Y