Recommendations

Richten Sie Empfehlungen ein, nachdem Sie Ihre Daten synchronisiert haben. Wählen Sie die Experiences nach den Empfehlungen Best Practices aus und passen Sie dann deren Platzierung und Kontext an Ihr Theme an.

Elemente erstellen #

Jedes Element kombiniert eine Produktlogik, ein Design und Einstellungen dafür, wo es angezeigt wird.

1. Gehen Sie zu Recommendations > Designs > New Design und wählen Sie eine Product Slider-Vorlage. Konfigurieren Sie sie im Design Editor oder verwenden Sie ein Code Design.
2. Gehen Sie zu Recommendations > Elements > New Element.
3. Geben Sie dem Element einen beschreibenden Namen und wählen Sie den Element type, das Design und die Produktanzahl.
4. Speichern Sie es in In preview.
5. Öffnen Sie Insert into website und wählen Sie Injektion oder Embedded Code.

Ein Design kann mehreren Elementen dienen. Verwenden Sie den generierten Embed-Code und die Element-ID aus Ihrem eigenen Store. IDs wie @product-page-alternatives sind Beispiele, keine erforderlichen Namen oder ideal.shop Modul-IDs.

Kontext identifizieren #

Produkt-, Kategorie-, Artikel- und Warenkorb-Empfehlungen benötigen IDs, die importierten Datensätzen entsprechen. Finden Sie die ID-Quelle unabhängig vom Selektor, der die Platzierung steuert.

1. Öffnen Sie die entsprechende Storefront-Seite und inspizieren Sie deren HTML mit den Entwicklertools Ihres Browsers.
2. Suchen Sie nach einem Attribut, das die aktuelle Produkt-, Kategorie- oder Artikel-ID enthält. Für Warenkörbe inspizieren Sie jede Produktzeile.
3. Finden Sie den entsprechenden Datensatz in Clerk.io und vergleichen Sie die IDs. Ersetzen Sie keine SKU, keinen URL-Slug oder Warenkorb-Zeilen-ID, es sei denn, es handelt sich ebenfalls um die importierte Datensatz-ID.
4. Wiederholen Sie den Vorgang auf einer anderen Seite und nach einer Navigation, um sicherzustellen, dass sich der Wert korrekt ändert.

Theme-Beispiele #

Diese Selektoren und Attribute wurden im Theme von Fodmagasinet identifiziert. Prüfen Sie sie in Ihrem Webshop, bevor Sie sie in die Injektions-ID-Einstellungen des Elements eintragen.

Zum Beispiel zeigt die Gehwol Lipidro-Seite die Produkt-ID 262327. Verifizieren Sie diese gegenüber Ihrem eigenen importierten Datensatz, anstatt den Wert einfach zu kopieren.

Gehen Sie nicht davon aus, dass body[data-page-id] eine Produkt- oder Kategorie-ID enthält. Prüfen Sie die Bedeutung auf jedem Seitentyp. Wo die Integration einen verlässlichen Clerk.js Kontext setzt, können Sie auch den Clerk.js Kontext als ID-Quelle verwenden.

Warenkorb-IDs #

Eine Warenkorbzeilen-ID identifiziert einen einzelnen Warenkorbeintrag; sie kann sich von der Produkt-ID unterscheiden, die Clerk.io importiert hat. Im Beispiel von Fodmagasinet ist data-basket-id eine Zeilen-ID und data-item-id die Produkt-ID.

Verwenden Sie in den Injektions-Einstellungen den oben genannten Warenkorb-Produktselektor und das Produktattribut. Mehrfache ID-Extraktion sammelt die gefundenen Produkt-IDs für Cross-Sell in einer Liste.

Um die Liste in den Entwicklertools zu inspizieren, sammelt dieses schreibgeschützte Beispiel eindeutige IDs aus dem Theme:

const productIds = [...new Set(
  [...document.querySelectorAll('#basket_container .basket-item-tr[data-item-id]')]
    .map(row => row.getAttribute('data-item-id'))
    .filter(Boolean)
)];
console.log(productIds);

Für eingebetteten Code geben Sie die aktuellen IDs als JSON-Array an, z. B. data-products='[123,456]'. Aktualisieren Sie diese und laden Sie das Element nach einer basket-Änderung über die dokumentierte Integration neu; lassen Sie keine feste Beispiels-Liste im Produktivbetrieb.

Fehlender Kontext #

Falls keine zuverlässige ID verfügbar ist, bitten Sie den Theme-Entwickler, die importierten Produkt-/Kategorie-/Artikel-IDs und Warenkorb-Produkt-IDs über feste Attribute oder Clerk.js Kontext verfügbar zu machen. Sie müssen auch nach Navigationen und Warenkorb-Änderungen (einschließlich leerem Warenkorb) aktualisiert werden.

Platzierungen konfigurieren #

Wählen Sie stabile, eindeutige Ziele im Content-Bereich des Webshops. Vermeiden Sie generierte Klassen oder eine Modulnummer, die aus einem anderen Webshop übernommen wurde.

In Insert into website > Using injection konfigurieren Sie die URL-Zielgruppen, den Ziel-Selektor und die Position. Verwenden Sie Before oder After für Geschwister, oder Inside first / Inside last für Inhalte innerhalb des Ziels.

Prüfen Sie, dass der Selektor auf jeder vorgesehenen Seite (auch nach dynamischer Navigation) genau einmal matched. Verwenden Sie die Element-Einstellungen für alle Injektions-Optionen.

Fodmagasinet-Beispiele #

Bei Produktseiten mit Beschreibung-Tabs ist .item-page .tabs-outer-container ein Beispielziel für Alternativen mit Before. Cross-Sell nutzt Before .item-page #ratings und platziert es hinter der Beschreibung und vor den Bewertungen.

Hat ein Produkt keine Tabs, prüfen Sie die übrigen Inhalte und wählen Sie ein stabiles Fallback. In diesem Theme kann #ratings als Fallback dienen, falls vorhanden. Machen Sie Fallback-Bedingungen gegenseitig ausschließend, damit Alternativen nur einmal ausgegeben werden und die beabsichtigte Reihenfolge mit Cross-Sell erhalten bleibt.

Warenkorb-Empfehlungen können After body[data-page-type="basket"] #basket-form nutzen. Prüfen Sie, dass das injizierte Element innerhalb der Checkout-Breite über dem Footer bleibt. Geben Sie ein separates Ziel an oder blenden Sie das Element aus, wenn ein leerer Warenkorb das Formular unterdrückt.

Für Artikel inspizieren Sie die tatsächliche Artikel-Inhalts-Umhüllung und fügen nach dem Inhalt, aber vor Navigation oder Footer-Modulen ein. Startseiten- und Artikel-Modul-IDs, exakte Layouts und Überschriften sind je nach Webshop festzulegen.

Wenn Sie native Empfehlungen ersetzen, blenden Sie deren Anzeige aus oder deaktivieren Sie sie, nachdem Sie die Clerk.io-Platzierung geprüft haben. Erhalten Sie manuell konfigurierte Produktbeziehungen, damit der Webshop sie wiederverwenden kann. Vermeiden Sie Replace auf einem Wrapper, der fremde Inhalte enthält.

Optionale Kategorie-Schwellenwerte benötigen eine zuverlässige Gesamtsumme oder verifizierte Paginierungsinfos. Das Zählen nur sichtbarer Karten kann Empfehlungen auf Folgeseiten großer Kategorien ausblenden. Wählen Sie Ihre eigene Schwelle und testen Sie die erste und letzte Seite.

Kaufaktionen #

Nutzen Sie das native Kaufverhalten des Webshops, damit Varianten, Warenkorbsummen und Fehler konsistent funktionieren. Ein Produktseiten-Link ist der sichere Ausgangspunkt, wenn zusätzliche Auswahl notwendig ist.

Prüfen Sie eine native Kauf-Schaltfläche, deren Event-Handler und die Kaufanfrage in den Entwicklertools anhand eines abgestimmten Testwarenkorbs. Bestätigen Sie Endpoint, Request-Methode, Payload, Variantenanforderungen, Response-Handling und Warenkorb-Refresh, bevor Sie eine Clerk.io-Schaltfläche anbinden.

Auf Fodmagasinet nutzte der verifizierte native Flow /basket/add mit items_id und quantity, via ajax_post und basket_add_receive. Diese Endpoint-, Feld- und Funktionsnamen sind Theme-Beispiele; übernehmen Sie deren echte Signatur und Handling aus dem Webshop.

Bei einfachen Produkten testen Sie, dass eine Aktion die beabsichtigte Menge hinzufügt und den nativen Warenkorb aktualisiert. Bei Produkten mit Größe, Farbe oder weiterer Auswahl öffnen Sie product.url zur Auswahl, sofern Ihre Integration diese Auswahl nicht explizit unterstützt.

Folgern Sie keine Variantenanforderungen aus Lagerbestand oder einem Null-Elternpreis. Zeigen Sie native Fehler sichtbar und bearbeitbar an. Siehe das Variant-FAQ, warum ein Response-Message-Adapter keine generelle Lösung ist.

Kartendaten #

Nutzen Sie dieselben verifizierten Produktkarten-Regeln in Search und Recommendations. Inspizieren Sie importierte Beispiele für ein Einfachprodukt, rabattiertes Produkt, nicht verfügbar und Produkt mit Varianten, bevor Sie ein Template anpassen.

Die zurückgegebenen Produktdaten von Fodmagasinet verwenden price und list_price. Zum Beispiel gab Produkt 430087 beides als 99 zurück, daher darf weder Badge noch alter Preis angezeigt werden. Verwenden Sie für dieses Mapping konsequent list_price; ersetzen Sie es nicht durch retail_price.

Das folgende minimale Liquid-Card verlinkt zur Produktseite und setzt voraus, dass der importierte price verifiziert wurde. Kauf-Handling, Lagerbestand und Rabatt-Markup werden dem verifizierten Datenmapping überlassen.

{% for product in products %}
  <a class="ideal-clerk-card" href="{{ product.url }}" data-event-type="product-click">
    <img src="{{ product.image }}" alt="{{ product.name }}" loading="lazy">
    <span>{{ product.name }}</span>
    <span>{{ product.price | money }}</span>
    <span>View product</span>
  </a>
{% endfor %}

Für ein verifiziertes list_price-Mapping verwenden Sie denselben Vergleich für Badge und alten Preis:

{% if product.list_price and product.list_price > product.price %}
  <span class="ideal-clerk-card__badge">Sale</span>
  <del>{{ product.list_price | money }}</del>
{% endif %}

Prüfen Sie Feldtypen und übersetzen Sie das Label, bevor Sie dieses Beispiel verwenden. Für einen Rabatt verlangen Sie einen numerischen regulären Preis, der höher als der Verkaufspreis ist. Verwenden Sie dieses Feld sowohl für den alten Preis als auch das Badge. Mischen Sie nicht list_price im Badge mit retail_price im alten Preis.

Wo importierte Variantenpreise vorhanden sind, zeigen Sie den niedrigsten gültigen kaufbaren Variantenpreis mit einem lokalisierten Ab-Label, wie Fra auf Dänisch. Prüfen Sie Variantenverfügbarkeit, Steuern, Währung und angezeigten Rabatt gegen dieselbe Variante.

Zum Beispiel gab Fodmagasinet Produkt 285207 price: 0, list_price: 0 und variant_prices: [109,65] zurück. Die Karte kann Ab 65,00 kr. mit dem geprüften Variantenpreis-Array anzeigen, statt Null zu zeigen. Zeigen Sie keinen alten Elternpreis von Null.

Die Liquid-Ansicht dieses Themes nutzt product.variant_prices | min | money_eu 2, gefolgt von kr.. Prüfen Sie, dass Ihr eigenes Array die gewünschten kaufbaren Varianten enthält und passen Sie Label und Währungsformat an Ihren Store an.

Ein berechneter Kartenpreis ändert nicht den importierten Eltern-price, der für das Sortieren verwendet wird. Korrigieren Sie die Quelle oder das Import-Mapping, wenn beim Sortieren weiterhin ein falscher Preis verwendet wird. Siehe das Preis-FAQ.

Beenden Sie mit der Setup-Checkliste.