Super theme, Impact! Eins meiner favs... Aber es hat eine eigene Logik wie die related products angezeigt werden. Mehr dazu hier.
Der Product Recommendations API, der hier gepostet ist, um verwandte Produkte auf der Produktseite anzuzeigen - verwendet standardmäßig Kaufhistorie, Produktbeschreibung und gemeinsame Kollektionen, um Empfehlungen zu generieren.
Allerdings möchtest du die Empfehlungen nur auf Produkte aus der gleichen Kollektion beschränken. Dafür musst du den Code anpassen, da Shopify nicht direkt eine Filterung nach Kollektionen ermöglicht - Kollektionen sind bloß virtuelle Gruppierungen von Produkten und keine Daten-Endpunkte. Du musst also das Code zur Filterung nach Kollektion anpassen.
Sprich, zwei Dinge tun:
- Den API-Request so modifizieren, dass nur Produkte aus der gleichen Kollektion berücksichtigt werden.
- Einen zusätzlichen Filter im JavaScript-Code einfügen, der die angezeigten Produkte auf die richtige Kollektion einschränkt.
Erst eine Theme Kopie erstellen und ersetze den obigen Code mit diesem:
<div
class="product-recommendations"
data-url="{{ routes.product_recommendations_url }}?section_id={{ section.id }}&product_id={{ product.id }}&limit=10&intent=related"
data-collection="{{ product.collections.first.handle }}"
>
{%- if recommendations.performed? and recommendations.products_count > 0 -%}
<h2>Ähnliche Produkte aus der gleichen Kollektion</h2>
<ul id="filtered-recommendations">
{%- for product in recommendations.products -%}
{% if product.collections contains product.collections.first %}
<li class="product">
<a href="{{ product.url }}">
<img
class="product__img"
src="{{ product.featured_image | image_url: width: 300, height: 300 }}"
alt="{{ product.featured_image.alt }}"
/>
<p class="product__title">{{ product.title }}</p>
<p class="product__price">{{ product.price | money}}</p>
</a>
</li>
{% endif %}
{%- endfor -%}
</ul>
{%- endif -%}
</div>
Dann sicherstellen, dass nur Produkte aus der gleichen Kollektion angezeigt werden. Shopify liefert bis zu 10 Produkte in den Empfehlungen, aber du musst sie filtern. Ersetze den vorhandenen JavaScript-Code mit diesem:
const handleIntersection = (entries, observer) => {
if (!entries[0].isIntersecting) return;
observer.unobserve(productRecommendationsSection);
const url = productRecommendationsSection.dataset.url;
const currentCollection = productRecommendationsSection.dataset.collection;
fetch(url)
.then(response => response.text())
.then(text => {
const html = document.createElement('div');
html.innerHTML = text;
const recommendations = html.querySelector('.product-recommendations');
if (recommendations && recommendations.innerHTML.trim().length) {
productRecommendationsSection.innerHTML = recommendations.innerHTML;
// Filtern der empfohlenen Produkte nach der aktuellen Kollektion
const recommendationItems = document.querySelectorAll(".product-recommendations .product");
recommendationItems.forEach(item => {
const productUrl = item.querySelector("a").getAttribute("href");
// Führe einen Fetch-Request aus, um zu prüfen, ob das empfohlene Produkt in der gleichen Kollektion ist
fetch(productUrl)
.then(response => response.text())
.then(productHtml => {
const tempDiv = document.createElement('div');
tempDiv.innerHTML = productHtml;
const productCollections = tempDiv.querySelector("meta[property='product:collection']");
if (!productCollections || !productCollections.content.includes(currentCollection)) {
item.remove(); // Entferne Produkte, die nicht zur gleichen Kollektion gehören
}
});
});
}
})
.catch(e => {
console.error(e);
});
};
const productRecommendationsSection = document.querySelector('.product-recommendations');
const observer = new IntersectionObserver(handleIntersection, {rootMargin: '0px 0px 200px 0px'});
observer.observe(productRecommendationsSection);
- Der Liquid-Code ruft Produktempfehlungen ab und zeigt nur die Produkte, die in mindestens einer gleichen Kollektion sind.
- Der JS-Code überprüft jedes empfohlene Produkt und stellt sicher, dass es aus der gleichen Kollektion wie das aktuelle Produkt stammt.
- Falls Shopify Empfehlungen aus einer anderen Kollektion vorschlägt, entfernt das JS diese bevor sie angezeigt werden.
