DOCS

Install

/

Installa Hello legacy

Scopri come installare Hello sul sito del tuo negozio.

Se stai utilizzando Shopify, BigCommerce, Magento, Miva o X-Cart, ti preghiamo di leggere la pagina di integrazione del plugin corrispondente.

Lo script qui sotto aggiungerà la bandiera di Zonos Hello al tuo sito, riconoscerà il paese da cui i tuoi clienti stanno visitando, li saluterà e fornirà informazioni generali su dazi e tasse per il loro paese (base).

Funzionalità aggiuntive sono disponibili con un minimo lavoro di sviluppo (mostrato di seguito).

Aggiungi Hello al tuo sito 

1

Aggiungi lo script di Hello - base

Aggiungere questo script al codice del tuo sito aggiungerà la bandiera di Zonos Hello al tuo sito web, riconoscerà il paese da cui i tuoi clienti stanno visitando, li saluterà e fornirà informazioni generali su dazi e tasse per il loro paese.

COMPETENZE NECESSARIE : Competenze web di base

Per installare Hello, applica lo script personalizzato contenente la tua chiave univoca del sito nel tuo sito web prima del tag di chiusura body.

Hello script di integrazione

1
<script src="https://hello.zonos.com/hello.js?siteKey=YOURSITEKEY"></script>

Zonos Hello deve essere caricato prima che venga aggiunta qualsiasi funzionalità aggiuntiva. Si prega di includere eventuali funzionalità aggiuntive dopo lo script sopra.

Non hai già uno script? ?Clicca qui per scaricare.

2

Genera stime di dazi e tasse

COMPETENZE NECESSARIE : Competenze di base per sviluppatori

Quando questa funzionalità è abilitata, Hello può fornire stime di dazi e tasse quando un prodotto viene visualizzato o aggiunto al carrello. Hello può anche visualizzare citazioni complete di dazi e tasse per l'intero carrello quando la pagina viene visualizzata.

La citazione di dazi e tasse può essere posizionata su ciascuna pagina del prodotto o sulla tua pagina principale del prodotto, a seconda di come è configurata la tua piattaforma.

Per aggiungere la citazione di dazi e tasse, applica uno script che assomiglia a quello mostrato di seguito. I due campi richiesti sono name e price.

Esempio: Di seguito è riportato un esempio di come apparirà e funzionerà lo script sulla tua pagina.

Hello integration script

1
2
3
4
5
6
7
8
9
10
11
12
13
zonos.quote({
  items: [
    {
      name: 'The name of the product',
      price: 19.95,
      quantity: 2,
      image: 'https://example.com/product-123.png',
      url: 'https://example.com/product-123',
      sku: '123',
    },
  ],
  currencyCode: 'USD',
});

Gli script che possono essere utilizzati dovranno essere adattati per funzionare con il tuo sito. Assicurati che uno dei seguenti script che utilizzi sia posizionato dopo il primo Zonos Hello Script.

Se non stai utilizzando una piattaforma, puoi utilizzare il seguente per acquisire dinamicamente i dettagli del tuo prodotto. Questo script acquisirà il primo prodotto disponibile. Puoi anche adattare questo script per essere utilizzato nella pagina del carrello del tuo sito. Dovrai eseguire un ciclo attraverso tutti i prodotti e i loro dati, quindi inviarli a zonos.quote.

Hello script di integrazione

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<script>
  var zPrice = '';
  var zName = '';
  var zImg = '';

  try {
    if (document.querySelector('ID OR CLASSNAME') != null) {
      zPrice = document.querySelectorAll('ID OR CLASSNAME').innerText;
    }

    if (document.querySelector('ID OR CLASSNAME') != null) {
      zName = document.querySelector('ID OR CLASSNAME').innerText;
    }

    if (document.querySelector('.ID OR CLASSNAME') != null) {
      zImg = document.querySelector('ID OR CLASSNAME').src;
    }

    zonos.quote({
      items: [
        {
          name: zName,
          price: zPrice,
          image: zImg,
        },
      ],
      currencyCode: 'USD',
    });
  } catch (error) {}
</script>

Puoi aggiungere valori aggiuntivi dai campi dell'elemento qui sotto e anche cambiare il currencyCode per essere la tua valuta predefinita.

Shopify e BigCommerce

Se stai utilizzando Shopify o BigCommerce, utilizza il codice qui sotto.

Shopify
BigCommerce

Se stai utilizzando Shopify come tua piattaforma, abbiamo uno script che puoi utilizzare che estrarrà i dati del prodotto dai dettagli del prodotto Shopify.

Il codice qui sotto ha una funzione che verrà eseguita sulle pagine dei prodotti e sulla pagina del carrello.

Hello integrazione script

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<script>
    function znDutyTaxEstimateOnDetailPage() {
        {% if product and product.price %}
          zonos.quote({
            items: [{ price: "{{ product.price | money_without_currency }}", name: "{{product.title | replace: '"', '\"'}}", url: "{{ shop.secure_url }}{{ product.url }}", image: "https:{{ product.featured_image | product_img_url: 'medium' }}"}],
            currencyCode: '{{ shop.currency }}'

          });

      {% endif %}

  }

  function znDutyTaxEstimateOnCartPage() {
  if (window.location.href.indexOf("cart") > -1) {
  zonos.quote({
  items: [
  {% for item in cart.items %}
  { price: "{{ item.price | money_without_currency }}", quantity: {{item.quantity}}, name: "{{ item.title | replace: '"', '\"'}}", url: "{{ shop.secure_url }}{{item.url}}", image: "https:{{item.image| product_img_url: 'medium'}}"},
  {% endfor %}
  ],currencyCode: '{{ shop.currency }}'});
  }
  }

  znDutyTaxEstimateOnDetailPage();
  znDutyTaxEstimateOnCartPage();
</script>

Campi di quotazione 

CampoTipo di datoDescrizione
itemsarray

OBBLIGATORIO

Un elenco di articoli da includere nella quotazione
currencyCodestringI prezzi degli articoli verranno visualizzati nella valuta specificata dal codice valuta di tre caratteri. Predefinito: USD
includedTaxRatenumberL'imposta sugli articoli rate se l'articolo include l'imposta
showDecimalboolAttiva o disattiva la visualizzazione del valore decimale sulle valute convertite

Campi dell'articolo 

CampoTipo di datoDescrizione
namestring

OBBLIGATORIO

Il nome del prodotto
pricenumber

OBBLIGATORIO

Prezzo unitario di un singolo prodotto
quantityintegerIl numero di prodotti nel carrello. Predefinito: 1
imagestringURL dell'immagine del prodotto
urlstringURL del prodotto individuale
hsCodestringIl Codice Armonizzato (codice HS) per il tuo prodotto
categorystringLa categoria del prodotto sul tuo sito
countrystringCodice ISO a due caratteri del paese da cui proviene questo prodotto
customizationstringPersonalizzazione del prodotto (es. taglia, colore)
descriptionstringLa descrizione dettagliata del prodotto
skustringL'UPC o SKU del prodotto

Man mano che fornisci ulteriori dettagli a Zonos riguardo al tuo prodotto, l'accuratezza della stima di solito migliorerà.

Personalizza Hello 

Cambia la posizione della bandiera

COMPETENZE NECESSARIE : Competenze di base per sviluppatori

Per impostazione predefinita, la bandiera di Zonos Hello apparirà nell'angolo in basso a destra della tua pagina.

Qui troverai alcune informazioni su come cambiare la posizione della bandiera e su come nascondere determinati elementi del tuo sito web che non vuoi che gli utenti internazionali vedano.

Esempio: Nascondere la spedizione gratuita agli utenti internazionali; questo ti permetterà anche di nascondere Zonos Hello ai clienti domestici e a paesi specifici.

Se la posizione viene lasciata vuota, il codice utilizzerà il valore predefinito.

Hello script di integrazione

1
2
zonos.config({ location: 'right bottom attached' });
zonos.config({ location: '' });

Per l'angolo in basso a sinistra:

zonos.config({location: 'left'});

Per l'angolo in alto a sinistra con un dialogo informativo flottante:

zonos.config({location: 'left top floating'});

  • flottante si riferisce al Hello dialogo informativo che galleggia al centro della pagina.
  • attaccato si riferisce al Hello dialogo informativo che si apre sopra la bandiera.
  • flottante è preferito quando si posiziona la bandiera in alto.

Nascondere contenuti specifici

COMPETENZE NECESSARIE: Competenze di base per sviluppatori

La classe z-intl si basa sul paese domestico attuale. Se Hello è impostato su un paese internazionale, la classe z-intl agirà come una classe nascosta, nascondendo il contenuto a cui è legata .z-intl.

Usa il seguente CSS per nascondere il contenuto. Sostituisci .your-content con il contenuto flottante che desideri nascondere.
.z-intl .your-content { display: none; }

Ora puoi nascondere Hello dai tuoi clienti domestici in modo che altri dialoghi siano nuovamente visibili.

Hello integrazione script

1
2
3
4
5
6
#zonos {
  display: none;
}
.z-intl #zonos {
  display: block;
}

Nascondi per paesi specifici

Aggiungi l'#zonos id combinato con il codice del paese che funge anche da classe CSS per quel paese alla funzione .z-intl { display: none; }.

La riga dovrebbe apparire in questo modo:

Hello integrazione script

1
2
3
.z-intl #zonos.US {
  display: none;
}

Attivare/disattivare il splash

COMPETENZE NECESSARIE : Competenze di base per sviluppatori

Lo splash si riferisce al pop-up e all'ingrandimento della Zonos finestra di dialogo, che contiene informazioni aggiuntive riguardanti la specifica politica doganale e fiscale del loro paese.\

Se desideri ATTIVARE e visualizzare lo splash di Zonos Hello per la prima visita dei tuoi clienti:

Hello script di integrazione

1
zonos.config({ showSplash: true });

Se desideri disattivare il Zonos Hello splash per la prima visita dei tuoi clienti:

Hello integrazione script

1
zonos.config({ showSplash: false });

Nota: Qualsiasi Zonos personalizzazione dovrà essere all'interno di un script tag.

Domande frequenti 

Non sono uno sviluppatore e ho bisogno di assistenza. Quali sono le mie opzioni?

Se hai domande, ti preghiamo di contattare il nostro team di supporto. Se non hai le risorse per completare l'integrazione e hai bisogno di assistenza, ti preghiamo di contattare il nostro team di servizi professionali.

Questa pagina è stata utile?