Stilizzare i progetti in loco in Clerk.io

I design determinano il modo in cui i prodotti devono essere resi visivamente nelle raccomandazioni, nella ricerca e nelle e-mail di Clerk.io. Un Design può essere utilizzato in molti blocchi di contenuto.

Il linguaggio di progettazione è una versione modificata di Handlebars. È possibile leggere qui [Website Design Language] (https://docs.clerk.io/docs/clerkjs-template-language).

Creare un nuovo design

Nel menu di sinistra di my.clerk.io, selezionare Design da Ricerca, Raccomandazioni o Email, a seconda del contenuto per cui si sta creando un design.

Nella pagina successiva, selezionare Nuovo design dall’angolo in alto a destra.

Quindi, scegliere il tipo di contenuto con cui si desidera iniziare il progetto. In questo esempio, utilizziamo il Cursore prodotto.

Quindi, selezionare Next nell’angolo in basso a destra.

Nella sezione successiva è possibile assegnare un nome al proprio progetto. Una volta fatto questo, selezionare Avanti.

A questo punto si potrà scegliere se lavorare al progetto attraverso il Design Editor o il Codice.

NOTA: Se avete poca esperienza con il codice, in particolare con HTML e CSS, vi consigliamo di usare il Design Editor.

Una volta scelto, selezionare Crea progetto. Verrà visualizzato il progetto pronto per l’uso, al quale è possibile apportare qualsiasi modifica con pochi clic.

Modifica di diverse parti di un disegno nel codice

HTML

Il codice HTML viene utilizzato per rendere l’HTML del blocco Clerk.io, compresi i dati del prodotto e il contenitore che lo circonda.

Gli attributi possono essere inseriti tramite il nostro linguaggio di template e poi utilizzati come parte del design. Assicuratevi che gli attributi personalizzati che desiderate utilizzare nei vostri progetti siano sincronizzati con Clerk.io.

CSS

È possibile utilizzare questo editor per scrivere CSS personalizzati da utilizzare nei template. Ogni CSS scritto sarà iniettato nella parte superiore della pagina.

I codici embed di Clerk.io iniettano semplicemente tutto nel vostro negozio web, il che significa che tutti i vostri css esistenti possono essere resi disponibili nel vostro design.

Per modificare qualsiasi CSS nel vostro progetto, individuate innanzitutto la classe o il valore ID che desiderate modificare nel contenitore CSS del progetto. È quindi possibile modificare i componenti esistenti del CSS di quell’elemento o aggiungere_ elementi alla visualizzazione di quella classe/ID.

Copiare un progetto esistente e convertirlo in un progetto Clerk.io

Se nel vostro negozio web avete disegni esistenti che desiderate utilizzare con Clerk.io, avete la possibilità di convertirli e copiarli nei vostri Clerk.io Designs. Questo può essere particolarmente utile quando si considera il design della pagina di ricerca del proprio negozio web.

Dopo aver identificato il design che si desidera replicare, la copia e la modifica del design in un Design Clerk.io richiede 3 fasi principali:

1. Copia + incolla il tuo progetto esistente

Innanzitutto, individuare il design attualmente utilizzato nei file del tema del proprio negozio web che si desidera copiare in Clerk.io, quindi copiare e incollare nel contenitore HTML di un design Clerk.io vuoto.

Se al progetto è associato del CSS, includerlo nel contenitore CSS sotto l’HTML.

2. Sostituire i valori delle variabili con il valore dell’attributo Clerk.io e la sintassi

Per utilizzare gli attributi del vostro negozio nel vostro progetto Clerk.io, assicuratevi di cambiare il nome del valore con quello utilizzato nei vostri dati Clerk.io e di aggiornare la sintassi {%raw%} {{ attribute }}.

• Ad esempio, se si fa riferimento a un listino prezzo nel proprio negozio web, l’attributo potrebbe chiamarsi listino_prezzo nei propri Dati Clerk.io e dovrebbe quindi essere referenziato come {{ product.list_price }} nel proprio Progetto Clerk.io.{%endraw%}

3. Avvolgere il progetto in un ciclo Prodotto

L’ultimo passo consiste nell’aggiungere un ciclo for al progetto copiato e modificato, per garantire che il codice del progetto iteri per i prodotti applicabili nel contenuto della ricerca o delle raccomandazioni.

Per farlo, basta aggiungere {%raw%} {% for product in products %} prima del cursore principale