Per trasformare il blocco prodotti creato in un carosello, per permettere ai propri visitatori di scorrere gli articoli raccomandati, consulta questo articolo.

Un must per tutti i tipi di ecommerce sono le righe di articoli per mostrare ai clienti i prodotti o i servizi. Con Datatrics, è possibile ricreare queste righe e utilizzare una strategia di raccomandazione per mostrare gli articoli più rilevanti in questi blocchi.

Per comprendere al meglio le istruzioni di questo articolo suggeriamo, se necessario, di consultare gli altri articoli del nostro help center riguardanti gli articoli importati dentro Datatrics per familiarizzare con parole come content collection, posizioni, template e touchpoint builder o elementi.

Preparazione

Per creare un blocco di prodotti, è necessario decidere cosa mostrare al pubblico e che aspetto deve avere questo touchpoint. In questo articolo, ricreeremo il blocco prodotto mostrato sopra con elementi simili.

Content collection

Innanzitutto, è necessario selezionare una raccolta di contenuti. Si tratta di un insieme dinamico di contenuti basato su regole specifiche. Se un articolo non corrisponde più alle regole (l'articolo è esaurito), verrà scartato automaticamente dalla raccolta.

Posizione

Ogni touchpoint integrato ha bisogno di una posizione creata manualmente in cui essere visualizzato su una pagina. Non è possibile creare una posizione integrata senza aprire il sito web. Nell'articolo sulle posizioni, troverete due modi diversi per trovare il selettore CSS corretto.

Preview defaults

È possibile impostare l'articolopredefinito che deve essere visualizzato in anteprima nella scheda Impostazioni della sezione Template. Nel nostro esempio, utilizziamo uno degli elementi della raccolta di contenuti appena creata.

Creazione del template

Step 1 - (Ri)creare il blocco degli elementi

Il template deve assomigliare a uno degli articoli elencati nel vostro sito web per renderlo identico. In pratica, il template assomiglia a una raccomandazione di prodotto. Il template verrà duplicato più volte per creare una fila di articoli.

Step 2 - Creare un'intestazione

La maggior parte dei blocchi di prodotti ha un'intestazione che annuncia un messaggio speciale, come "Raccomandato per te" o "Visti di recente". Poiché il template del prodotto sarà duplicato, deve essere un template isolato. Altrimenti, il messaggio verrà visualizzato più volte.

L'intestazione è costituita dal messaggio nel carattere che si applica al sito web e da un padding in basso per creare un po' di spazio bianco.

Step 3 - Creare un footer (opzionale)

Per "chiudere" un blocco di prodotti, si potrebbe concludere con qualcosa come una linea divisoria. Poiché il template del prodotto sarà duplicato, deve essere un template isolato. Altrimenti, ci sarà un divisorio sotto ogni elemento. Aggiungere un padding, in modo che sembri una parte del sito web.

Creazione del touchpoint

Quando si ritiene che i template siano pronti, è ancora necessario inserirli in un touchpoint. Per questo è necessario utilizzare il costruttore di touchpoint. Questa sezione è breve, poiché il costruttore di touchpoint è documentato.

Step 4 - Aggiungere un touchpoint

Aprire la journey o la campagna in cui si desidera visualizzare questo touchpoint e fare clic su Aggiungi touchpoint per aprire il touchpoint builder. Assegnare un nome al touchpoint per iniziare.

Step 5 - Assegnare il template e la posizione

Selezionare il template creato. È necessario selezionare più blocchi. Il numero di blocchi dipende da voi. Nel nostro caso, ne selezioniamo 4. Selezionare quindi l'intestazione e il piè di pagina creati.

Ora selezionare la posizione creata. Dopo aver selezionato la posizione, scegliere tra Sostituisci il contenuto esistente, Posiziona prima del contenuto esistente, Posiziona dopo il contenuto esistente.

Step 6 - Selezionare la strategia di raccomandazione e la content collection

Usare Filtered content > Select existing content collection per utilizzare la raccolta di contenuti già preparata e che si desidera mostrare in questo touchpoint, e quindi la strategia di raccomandazione. In questo articolo vengono descritte le strategie di raccomandazione disponibili in Datatrics. In questo esempio, utilizzeremo quella predefinita Lascia decidere all'algoritmo. Fare clic su Avanti nel menu secondario per procedere.

Step 7 - Selezionare l'audience

Ora è possibile selezionare il pubblico che deve vedere questo touchpoint. Questo dipende da voi. Nel nostro caso, vogliamo mostrare questo touchpoint sulla homepage.

Step 8 - Impostazioni aggiuntive

Ora è possibile aggiungere altre impostazioni al touchpoint builder.

Testare il touchpoint

Step 9 - Anteprima e modifica dei template

A questo punto, le basi sono pronte. Tuttavia, nella maggior parte dei casi, è ancora necessario modificare alcuni elementi, perché di solito ci sono ancora alcune piccole differenze tra l'anteprima e la riga esistente sul sito web.

Step 9.1 - Modificare lo spazio tra gli elementi CSS

Utilizzando la classe .datatrics-multiblocks nel CSS, è possibile modificare lo spazio tra gli elementi per applicare la stessa distanza tra i diversi prodotti. Ad esempio:

.datatrics-multiblocks {
    gap: 4.5rem;
}

Step 9.2 - Creazione di touchpoint responsive e mobile-friendly

Con il CSS, è possibile modificare il numero di blocchi di prodotti nella classe .datatrics-multiblocks. È possibile sfruttare questo vantaggio per migliorare la scalabilità del blocco prodotto.

Innanzitutto, è possibile utilizzare la proprietà CSS grid-template-columns per diverse larghezze dello schermo. Per impostazione predefinita, gli elementi vengono visualizzati uno accanto all'altro:

Ma utilizzando grid-template-columns: repeat(2, 1fr); una nuova riga inizierà dopo ogni secondo elemento:

Utilizzando questo CSS, è possibile modificare la scalabilità del blocco prodotti:

@media only screen and (max-width: 725px) {
    /* This code only applies to screens that have a smaller width than 725px */
    
    .datatrics-multiblocks {
        grid-template-columns: repeat(2, 1fr);
    }
    /* This code will show 2 items in per row */
    
    .datatrics-multiblocks > div:nth-child(3) {
        display: none;
    }
    .datatrics-multiblocks > div:nth-child(4) {
        display: none;
    }
    /* This code will hide the latter 2 items */
}

@media only screen and (max-width: 480px) {
    .datatrics-multiblocks {
        grid-template-columns: repeat(1, 1fr);
    }
    /* This shows 1 item per row at screens that have a smaller width than 480px */
}