Knowledge base
Guide
Accademia
Tutorial video
Prova a cercare:
Articoli visualizzati di recente:

Sommario

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.

Per gli utenti che usano il Sito istantaneo, Wix e Wordpress: sono disponibili delle specifiche istruzioni per personalizzare l'icona del carrello d'acquisto sul Sito istantaneo (Blocco Intestazione), su Wix (in inglese) e su Wordpress.

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 Panoramica.
  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:
    adding_shopping_bag.png
  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 shopping-bag-small-icon.png
SMALL_ICON_COUNTER shopping-bag-small-icon-counter.png
COUNTER_ONLY shopping-bag-counter-only.png
TITLE_COUNTER shopping-bag-title-counter.png
MEDIUM_ICON_COUNTER shopping-bag-medium-icon-counter.png
MEDIUM_ICON_TITLE_COUNTER shopping-bag-medium-icon-title-counter.png
BIG_ICON_TITLE_SUBTOTAL shopping-bag-big-icon-title-subtotal.png
BIG_ICON_DETAILS_SUBTOTAL shopping-bag-big-icon-details-subtotal.png

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.

Il codice funziona solo per l'icona del carrello d'acquisto mobile.

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 shopping-bag-bag.png
CART shopping-bag-cart.png
BASKET shopping-bag-basket.png

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.

Parametro Valore Descrizione
data-fixed TRUE / FALSE Visualizza l'icona del carrello in una posizione fissa mentre si scorre la pagina. Usare il parametro "data-fixed-position" per definire la posizione dell'icona.
data-fixed-position TOP_LEFT / TOP_RIGHT / BOTTOM_LEFT / BOTTOM_RIGHT Definisce la posizione fissa in cui sarà visualizzata l'icona del carrello. Per visualizzare l'icona del carrello in una posizione fissa, bisogna includere nel codice anche il parametro "data-fixed".
data-horizontal-indent Numero intero positivo incluso zero Definisce il margine orizzontale tra il widget del carrello d'acquisto e il bordo dello schermo o un contenitore iframe.
data-vertical-indent Numero intero positivo incluso zero Definisce il margine verticale tra il widget del carrello d'acquisto e il bordo dello schermo o un contenitore iframe.

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.

Questo articolo ti è stato utile?

Fantastico! Grazie per il tuo feedback!

Grazie per il tuo feedback!

Ci dispiace molto! Cosa è andato storto?
Utenti che ritengono sia utile: 173 su 262
10
Utilizziamo i cookie e tecnologie simili per ricordare le tue preferenze, misurare l'efficacia delle nostre campagne e analizzare i dati non personalizzati per migliorare le prestazioni del nostro sito. Scegliendo "Accetta", acconsenti all'utilizzo dei cookie.
Accetta i cookie Rifiuta