Recommendations

Configura le recommendations dopo aver sincronizzato i tuoi dati. Scegli le esperienze seguendo le raccomandazioni di best practice e poi adatta la loro posizione e il loro contesto al tuo tema.

Crea Elementi #

Ogni Elemento combina una logica prodotto, un Design e impostazioni per dove appare.

1. Vai su Recommendations > Designs > New Design e scegli un template Product Slider. Configuralo nel Design Editor oppure usa un code Design.
2. Vai su Recommendations > Elements > New Element.
3. Dai all’Elemento un nome descrittivo e scegli il suo Element type, il Design e il numero di prodotti.
4. Salvalo in In preview.
5. Apri Insert into website e scegli l’injection oppure il codice embedded.

Un Design può servire diversi Elementi. Usa il codice di embed generato e l’ID dell’Elemento dal tuo Store. Gli ID come @product-page-alternatives sono esempi, non nomi obbligatori o module ID ideal.shop.

Identifica il Contesto #

Le recommendations su prodotto, categoria, articolo e carrello necessitano degli ID che corrispondono ai record importati. Trova la fonte dell’ID separatamente dal selettore che controlla la posizione.

1. Apri la pagina corrispondente nello storefront e ispeziona il suo HTML con gli strumenti di sviluppo del browser.
2. Cerca un attributo contenente l’ID di prodotto, categoria o articolo corrente. Per i carrelli, ispeziona ogni riga prodotto.
3. Trova il record corrispondente in Clerk.io e confronta gli ID. Non sostituire un SKU, uno slug URL o un basket line ID a meno che non sia anche l’ID importato del record.
4. Ripeti su un’altra pagina e dopo la navigazione per confermare che il valore cambia correttamente.

Esempi di Tema #

Questi selettori e attributi sono stati identificati nel tema di Fodmagasinet. Verificali sul tuo webshop prima di inserirli nelle impostazioni dell’ID injection dell’Elemento.

Ad esempio, la pagina Gehwol Lipidro mostra l’ID prodotto 262327. Verificalo rispetto al tuo record importato invece di copiarlo.

Non dare per scontato che body[data-page-id] contenga un ID prodotto o categoria. Verifica il suo significato su ciascun tipo di pagina. Laddove l’integrazione imposta un contesto Clerk.js affidabile, puoi anche usare il contesto Clerk.js come fonte ID.

ID del Carrello #

Un basket line ID identifica una voce del carrello; può essere diverso dall’ID prodotto importato tramite Clerk.io. Nell’esempio di Fodmagasinet, data-basket-id è un line ID, mentre data-item-id è l’ID prodotto.

Nelle impostazioni di injection, usa il selettore del prodotto carrello e l’attributo prodotto sopra. Estrazione multipla di ID raccoglie tutti gli ID prodotto trovati in un’unica lista per il cross-sell.

Per ispezionare la lista negli strumenti di sviluppo, questo esempio in sola lettura raccoglie ID unici dal tema:

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);

Per il codice embedded, fornisci gli ID attuali come un array JSON, ad esempio data-products='[123,456]'. Aggiornali e aggiorna l’Elemento tramite l’integrazione documentata ogni volta che il carrello cambia; non lasciare una lista di esempio fissa in produzione.

Mancanza di Contesto #

Se non esiste un ID affidabile, chiedi allo sviluppatore del tema di esporre tramite attributi stabili o nel contesto Clerk.js gli ID importati di prodotto/categoria/articolo e quelli dei prodotti nel carrello. Devono aggiornarsi dopo la navigazione e i cambi nel carrello, compreso lo stato di carrello vuoto.

Configura le Posizioni #

Scegli target stabili e unici nell’area contenuto del webshop. Evita classi generate o un numero di modulo copiato da un altro webshop.

In Insert into website > Using injection, configura il targeting dell’URL, il selettore target e la posizione. Usa Before o After per i sibling, oppure Inside first / Inside last per i contenuti all’interno del target.

Controlla che il selettore corrisponda una sola volta su ciascuna pagina desiderata, anche dopo navigazione dinamica. Usa le impostazioni Element per tutte le opzioni di injection.

Esempi Fodmagasinet #

Per le pagine prodotto con tab descrittive, .item-page .tabs-outer-container è un target di esempio per i prodotti alternativi con Before. Il cross-sell usa Before .item-page #ratings, posizionandosi subito dopo la descrizione e prima delle recensioni.

Per un prodotto senza tab, ispeziona il resto del contenuto e scegli un fallback stabile. In questo tema, #ratings può essere un fallback se presente. Rendi le condizioni di fallback mutualmente esclusive così le alternative si renderizzano una sola volta e mantengono l’ordine previsto rispetto al cross-sell.

Le recommendations carrello possono usare After su body[data-page-type="basket"] #basket-form. Verifica che l’Elemento iniettato resti entro la larghezza della cassa e sopra il footer. Prevedi un target separato o nascondi l’Elemento se un carrello vuoto omette il form.

Per gli articoli, ispeziona il contenitore effettivo del contenuto e inserisci dopo, prima di navigazione o moduli footer non correlati. Gli ID modulo homepage e articolo, i layout esatti e i titoli devono essere scelti per il tuo webshop.

Se sostituisci recommendations native, nascondi o disabilita la loro visualizzazione dopo aver confermato il posizionamento di Clerk.io. Mantieni le relazioni prodotto configurate manualmente così che il webshop possa riutilizzarle. Evita Replace su wrapper contenenti altri contenuti non correlati.

Le soglie opzionali di categoria devono basarsi su un totale affidabile o informazioni di paginazione verificate. Calcolare solo le card visibili può nascondere recommendations alle pagine successive di una categoria numerosa. Scegli la tua soglia e testa la prima e l’ultima pagina.

Azioni d’Acquisto #

Riutilizza il comportamento nativo di acquisto del webshop così varianti, totali del carrello ed errori funzionano coerentemente. Un link alla pagina prodotto è il punto di partenza sicuro se sono richieste scelte aggiuntive.

Ispeziona un controllo di acquisto nativo, il suo event handler e la request di acquisto negli strumenti sviluppo usando un carrello di test concordato. Conferma endpoint, metodo, payload, requisiti variante, gestione risposta e refresh del carrello prima di collegare un tasto Clerk.io.

Su Fodmagasinet, il flusso nativo verificato usava /basket/add con items_id e quantity, tramite ajax_post e basket_add_receive. Questi endpoint, campi e funzioni sono esempi dal tema: riutilizza la loro signature e gestione effettiva dal webshop.

Per i prodotti semplici, verifica che una sola azione aggiunga la quantità prevista e aggiorni il carrello nativo. Per prodotti che richiedono taglia, colore o altre scelte, apri product.url per la selezione a meno che la tua integrazione supporti esplicitamente tali scelte.

Non dedurre requisiti variante da stock o da un prezzo principale a zero. Tieni visibili e azionabili gli errori nativi. Consulta la variant FAQ per il motivo per cui un message-adapter di risposta non è una soluzione generale.

Card Dati #

Usa le stesse regole di card prodotto verificate in Search e Recommendations. Ispeziona esempi importati di un prodotto semplice, scontato, non disponibile e con varianti prima di adattare un template.

I dati prodotto restituiti da Fodmagasinet usano price e list_price. Per esempio, il prodotto 430087 restituiva entrambi come 99, quindi non deve avere badge sconto o prezzo vecchio. Usa sempre list_price per questa mappatura; non sostituire con retail_price.

Il seguente esempio minimo Liquid linka alla pagina prodotto e assume che il price importato sia stato validato. L’handling dell’acquisto, le etichette stock e i markup di sconto sono deliberatamente lasciati alla tua mappatura dati verificata.

{% 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 %}

Per una mappatura list_price verificata, usa lo stesso confronto sia per il badge che il prezzo barrato:

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

Verifica i tipi campo e traduci l’etichetta prima di usare questo esempio. Per uno sconto, richiedi un prezzo regolare numerico superiore al prezzo vendita. Usa sempre lo stesso campo sia per il prezzo vecchio che il badge. Non mischiare list_price per il badge e retail_price per il prezzo vecchio.

Laddove siano disponibili prezzi varianti importati, mostra il prezzo più basso acquistabile con etichetta localizzata Da (come Fra in danese). Verifica disponibilità varianti, IVA, valuta ed eventuale sconto mostrato sulla stessa variante.

Ad esempio, il prodotto Fodmagasinet 285207 restituiva price: 0, list_price: 0, e variant_prices: [109,65]. La sua card può mostrare Da 65,00 kr. usando l’array variante verificato invece di mostrare zero. Non mostrare un prezzo principale di zero.

La visualizzazione Liquid di questo tema usa product.variant_prices | min | money_eu 2, seguito da kr.. Verifica che il tuo array contenga le varianti effettivamente acquistabili e adatta etichetta e formato valuta per il tuo Store.

Un prezzo calcolato in card non cambia il price principale importato usato per l’ordinamento. Correggi la fonte o la mappatura se l’ordinamento usa ancora un prezzo errato o zero. Consulta la price FAQ.

Concludi con la checklist di setup.