Aggiungere l'icona del carrello d'acquisto a un sito web personalizzato

È possibile aggiungere l'icona del carrello d'acquisto a un sito web personalizzato con l'aiuto dell'estensione Carrello d'acquisto aggiuntivo. L'icona permette ai clienti di vedere quanti articoli hanno aggiunto al loro ordine e di procedere al checkout.

È possibile cambiare l'aspetto dell'icona del carrello predefinita e la sua posizione nella pagina, impostare il reindirizzamento a una pagina personalizzata e applicare delle animazioni con l'aiuto dei parametri speciali aggiunti al codice di integrazione. Combinando più parametri all'interno di uno stesso codice di integrazione è possibile creare un'icona del carrello in linea con il design del negozio.

Aggiungere un Carrello d'acquisto predefinito

Se il negozio Ecwid è inserito in un sito web personalizzato, è possibile aggiungere l'icona del carrello d'acquisto con l'aiuto di alcune righe di codice. Occorre copiare e incollare il codice nel proprio sito web.

Per aggiungere l'icona del carrello d'acquisto a un sito web realizzato su misura:

1. Nel pannello di controllo di Ecwid, andare su Canali di vendita.
2. Nella sezione "Vendi dal tuo sito Web", fare clic sul blocco Sito personalizzato.
3. Scorrere al blocco Estensioni negozio → Borsa della spesa aggiuntiva.
4. Fare clic su Aggiungi borsa della spesa, dopodiché il codice del carrello d'acquisto verrà copiato negli Appunti:
   
5. Andare all'area amministratore del proprio sito web e aprire la pagina in cui si desidera visualizzare il carrello d'acquisto.
6. Incollare il codice del carrello d'acquisto appena copiato nel codice sorgente della pagina. A seconda della piattaforma utilizzata, potrebbe essere HTML, scheda sorgente o un pulsante separato per aggiungere codice. In caso di dubbi sull'aggiunta di codici personalizzati al proprio sito web, contattare lo sviluppatore del sito per istruzioni più dettagliate.
7. Salvare e pubblicare le modifiche.

Una volta salvate e pubblicate le modifiche, l'icona del carrello d'acquisto apparirà sul sito web.

Cambiare il layout del Carrello d'acquisto

È possibile cambiare il layout predefinito del carrello d'acquisto aggiungendo il parametro data-layout al contenitore "ec-cart-widget" del codice di integrazione, come mostrato nell'esempio seguente:

<div data-layout="VALUE" class="ec-cart-widget"></div>
<div><script data-cfasync="false" type="text/javascript"
src="https://app.ecwid.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8"></script><script>Ecwid.init();</script></div>

dove:
VALUE è uno dei valori supportati del parametro data-layout;
STORE_ID è l'ID del negozio Ecwid.

Nella tabella sotto riportata è possibile trovare i valori supportati e vedere come sarà visualizzato ciascun layout.

Valore	Layout
SMALL_ICON
SMALL_ICON_COUNTER
COUNTER_ONLY
TITLE_COUNTER
MEDIUM_ICON_COUNTER
MEDIUM_ICON_TITLE_COUNTER
BIG_ICON_TITLE_SUBTOTAL
BIG_ICON_DETAILS_SUBTOTAL

Mostrare o nascondere il Carrello d'acquisto vuoto

È possibile mostrare o nascondere l'icona del carrello d'acquisto quando esso è vuoto con l'aiuto del parametro data-show-empty-cart del contenitore "ec-cart-widget" del codice di integrazione, come mostrato nell'esempio seguente:

<div data-show-empty-cart="VALUE" class="ec-cart-widget"></div>
<div><script data-cfasync="false" type="text/javascript"
src="https://app.ecwid.com/script.js?STORE_ID&data_platform=code"
charset="utf-8"data-fixed="TRUE"></script><script>Ecwid.init();</script></div>

dove:
VALUE può essere TRUE o FALSE;
STORE_ID è l'ID del negozio Ecwid.

Cambiare l'icona del Carrello d'acquisto

È possibile cambiare l'icona predefinita del carrello d'acquisto aggiungendo il parametro data-icon al contenitore "ec-cart-widget" del codice di integrazione, come mostrato nell'esempio seguente:

<div data-icon="VALUE" class="ec-cart-widget"></div>
<div><script data-cfasync="false" type="text/javascript"
src="https://app.ecwid.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8"></script><script>Ecwid.init();</script></div>

dove:
VALUE è uno dei valori supportati del parametro data-icon;
STORE_ID è l'ID del negozio Ecwid.

Nella tabella sotto riportata è possibile trovare i valori supportati e vedere come sarà visualizzata ciascuna icona.

Valore	Icona
BAG
CART
BASKET

Cambiare la forma del bordo attorno all'icona del Carrello d'acquisto

È possibile cambiare la forma del bordo attorno all'icona del carrello d'acquisto aggiungendo il parametro data-fixed-shape al contenitore "ec-cart-widget" del codice di integrazione, come mostrato nell'esempio seguente:

<div data-fixed-shape="VALUE" class="ec-cart-widget"></div>
<div><script data-cfasync="false" type="text/javascript"
src="https://app.ecwid.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8"></script><script>Ecwid.init();</script></div>

dove:
VALUE è NONE (nessun bordo) / RECT (rettangolo) / PILL (rettangolo arrotondato);
STORE_ID è l'ID del negozio Ecwid.

Usare un'icona del Carrello d'acquisto personalizzata

Per usare sul proprio sito web un'icona del carrello d'acquisto personalizzata:

1. Caricare l'immagine dell'icona desiderata sul proprio hosting o su qualsiasi hosting di immagini in cui è possibile ottenere un link diretto all'immagine caricata. In alternativa, è possibile creare un'immagine SVG dell'icona del carrello d'acquisto.
2. Usare il seguente codice per inserire l'icona del carrello d'acquisto nel proprio sito web:

<div data-custom-icon-url="VALUE" 
class="ec-cart-widget"></div>
<div><script data-cfasync="false" 
type="text/javascript" 
src="https://app.ecwid.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8"></script><script>Ecwid.init();</script></div>

e sostituire:
VALUE con l'URL del file dell'icona personalizzata o con il markup SVG;
STORE_ID con l'ID del proprio negozio Ecwid.

Cambiare la posizione dell'icona del Carrello d'acquisto

È possibile cambiare la posizione dell'icona del carrello d'acquisto con l'aiuto di alcuni parametri da aggiungere al contenitore "ec-cart-widget" del codice di integrazione.

<div data-fixed="VALUE" 
data-fixed-position="VALUE"
data-fixed-shape="VALUE" 
data-horizontal-indent="VALUE" 
data-vertical-indent="VALUE" class="ec-cart-widget"></div>
<div>
<script data-cfasync="false" type="text/javascript" 
src="https://app.ecwid.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8"></script><script>Ecwid.init();</script></div>

dove:
VALUE è uno dei valori supportati di ciascun parametro;
STORE_ID è l'ID del negozio Ecwid.

Nella tabella sotto riportata è possibile trovare i parametri che consentono di cambiare la posizione dell'icona del carrello d'acquisto insieme ai rispettivi valori supportati.

Mostrare o nascondere le animazioni del Carrello d'acquisto

È possibile attivare o disattivare le animazioni dell'icona del carrello d'acquisto con l'aiuto del parametro data-show-buy-animation del contenitore "ec-cart-widget" del codice di integrazione, come mostrato nell'esempio seguente:

<div data-show-buy-animation="VALUE" 
class="ec-cart-widget"></div>
<div><script data-cfasync="false" 
type="text/javascript" 
src="https://app.ecwid.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8"></script><script>Ecwid.init();</script></div>

dove:
VALUE può essere TRUE o FALSE;
STORE_ID è l'ID del negozio Ecwid.

Usare lo stesso design del carrello d'acquisto su tutti i dispositivi

È possibile disabilitare l'adattività del widget del carrello d'acquisto in modo che l'icona abbia lo stesso aspetto su schermi di varie dimensioni, sia desktop che mobile. Per farlo, occorre includere il parametro data-responsive nel contenitore "ec-cart-widget" del codice di integrazione, come mostrato nell'esempio seguente:

<div data-responsive="VALUE" 
class="ec-cart-widget"></div>
<div><script data-cfasync="false" 
type="text/javascript" 
src="https://app.ecwid.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8"></script><script>Ecwid.init();</script></div>

dove:
VALUE può essere TRUE (il carrello di adatta automaticamente a schermi di diverse dimensioni) o FALSE (il carrello ha lo stesso aspetto su schermi di diverse dimensioni);
STORE_ID è l'ID del negozio Ecwid.