Blocco Empty cart

Il blocco Empty cart è il contenuto mostrato quando il carrello non ha articoli, in genere un messaggio e un pulsante per continuare lo shopping, in modo che un drawer vuoto resti comunque utile e coerente con il tuo brand. Appare solo nello stato vuoto del carrello; altri blocchi (come Header) possono affiancarlo in quello stesso stato.

• Il blocco appare solo quando il carrello è vuoto. Non appena un acquirente aggiunge un articolo, il carrello passa allo stato pieno e questo blocco viene sostituito dal layout del carrello pieno.
• Nell’editor, il link della CTA è inerte, quindi cliccarlo non ti porta altrove mentre stai progettando.

• Regione: body.
• Massimo: 1 per stato del carrello.
• Stato: solo carrello vuoto. Questo blocco non appare nello stato pieno. I nuovi carrelli includono anche un Header nello stato vuoto per impostazione predefinita; vedi Come funzionano i carrelli?.
• Aggiunto ai nuovi carrelli per impostazione predefinita. Non bloccato — puoi rimuoverlo o nasconderlo.

Supporta un template personalizzato dalla sua scheda Code, che sostituisce il markup integrato di questo blocco con il tuo JSX. Queste sono le props che riceve. Personalizza lo stile di questo blocco con la sua sezione Design nel pannello delle impostazioni. Si tratta di override per singolo blocco che si sovrappongono al tuo design globale e vi ricadono quando sono vuoti. La sezione Text in Design ti consente di controllare la tipografia di due elementi. Usa il selettore Text element per passare da uno all’altro. Message — il testo del messaggio dello stato vuoto. Il grassetto e il colore del testo si impostano nel Rich Text Editor sopra (nella scheda Settings), non qui. Button label — il testo sul pulsante continua lo shopping. Il colore del testo si imposta nella sezione Button di Design. La sezione Button ti consente di personalizzare lo stile del pulsante CTA indipendentemente dal design globale dei pulsanti. Usa il toggle Default / Hover per passare da uno stato all’altro. Cosa sono le impostazioni di design? Scopri di più qui: Impostazioni di design.