DOCS

Install

/
Hello•
HemGlobal e-handel Integration Installera

Installera Hello legacy

Lär dig hur du installerar Hello på din butiks webbplats.

Om du använder Shopify, BigCommerce, Magento, Miva eller X-Cart vänligen läs den motsvarande plugin-integrationssidan.

Skriptet nedan kommer att lägga till Zonos Hello-flaggan på din webbplats, känna igen vilket land dina kunder besöker från, hälsa dem och ge allmän information om tull och skatter för deras land (grundläggande).

Ytterligare funktioner är tillgängliga med minimal utvecklingsinsats (visas nedan).

Lägg till Hello på din webbplats 

1

Lägg till Hello-skriptet - grundläggande

Att lägga till detta skript i din webbplats kod kommer att lägga till Zonos Hello-flaggan på din webbplats, känna igen vilket land dina kunder besöker från, hälsa dem och ge allmän information om tull och skatter för deras land.

KUNSKAPER SOM BEHÖVS: Grundläggande webbkunskaper

För att installera Hello, applicera det anpassade skriptet som innehåller din unika webbplatsnyckel i din webbplats innan den avslutande body-taggen.

Hello integrationsskript

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

Zonos Hello måste laddas innan någon ytterligare funktionalitet läggs till. Vänligen inkludera eventuella ytterligare funktioner efter ovanstående skript.

Har du inte redan ett skript? ? Klicka här för att ladda ner.

2

Generera uppskattad tull och skatt

KUNSKAPER SOM BEHÖVS : Grundläggande utvecklarkunskaper

När denna funktion är aktiverad kan Hello ge uppskattningar av tull och skatt när en produkt visas eller läggs till i kundvagnen. Hello kan också visa fullständiga tull- och skatteuppskattningar för hela kundvagnen när sidan visas.

Tull- och skatteuppskattningen kan placeras på varje produktsida eller din huvudsakliga produktsida, beroende på hur din plattform är inställd.

För att lägga till tull- och skatteuppskattningen, tillämpa ett skript som ser ut som det som visas nedan. De två obligatoriska fälten är name och price.

Exempel: Nedan är ett exempel på hur skriptet kommer att se ut och fungera på din sida.

Hello integrationsskript

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',
});

Scripts som kan användas måste justeras för att fungera på din webbplats. Vänligen se till att några av de följande skripten du använder placeras efter den initiala Zonos Hello Skriptet.

Om du inte använder en plattform kan du använda följande för att dynamiskt hämta dina produktdetaljer. Detta skript kommer att hämta den första tillgängliga produkten. Du kan också justera detta skript för att användas på varukostnadssidan på din webbplats. Du kommer att behöva loopa genom alla produkter och deras data, och sedan skicka det till zonos.quote.

Hello integrationsskript

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>

Du kan lägga till ytterligare värden från artikel fälten nedan och även ändra currencyCode till att vara din standardvaluta.

Shopify och BigCommerce

Om du använder Shopify eller BigCommerce, använd koden nedan.

Shopify
BigCommerce

Om du använder Shopify som din plattform, har vi ett skript som du kan använda som kommer att hämta produktdata från dina Shopify produktdetaljer.

Koden nedan har en funktion som kommer att köras på produkt sidorna och kundvagnssidan.

Hello integrationsskript

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>

Citatfält 

FältDatatypBeskrivning
itemsarray

OBLIGATORISKT

En lista över artiklar som ska ingå i citatet
currencyCodestringPriserna på artiklarna kommer att visas i den valuta som anges av den tre tecken långa valutakoden. Standard: USD
includedTaxRatenumberSkattesatsen rate för artikeln om artikeln inkluderar skatt
showDecimalboolSlår på eller av visning av decimalvärdet på konverterade valutor

Artikelfält 

FältDatatypBeskrivning
namestring

OBLIGATORISKT

Produktnamnet
pricenumber

OBLIGATORISKT

Enhetspriset för en enskild produkt
quantityintegerAntalet produkter i kundvagnen. Standard: 1
imagestringURL till produktbilden
urlstringURL till den enskilda produkten
hsCodestringHarmoniserad kod (HS-kod) för din produkt
categorystringProduktens kategori på din webbplats
countrystringTvå tecken ISO-kod för landet där denna produkt härstammar ifrån
customizationstringProduktanpassning (t.ex. storlek, färg)
descriptionstringDen detaljerade beskrivningen av produkten
skustringUPC eller SKU för produkten

När du ger mer information till Zonos om din produkt, kommer noggrannheten i uppskattningen vanligtvis att förbättras.

Anpassa Hello 

Ändra flaggans placering

KUNSKAPER SOM BEHÖVS: Grundläggande utvecklarkunskaper

Som standard kommer Zonos Hello-flaggan att visas i det nedre högra hörnet av din sida.

Här hittar du information om hur du ändrar placeringen av flaggan samt döljer vissa element på din webbplats som du inte vill att internationella kunder ska se.

Exempel: Dölja fri frakt från internationella kunder; detta gör det också möjligt för dig att dölja Zonos Hello från inhemska kunder och specifika länder.

Om platsen lämnas tom kommer koden att använda standardinställningen.

Hello integrationsskript

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

För det nedre vänstra hörnet:

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

För det övre vänstra hörnet med en flytande informationsdialog:

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

  • floating hänvisar till Hello informationsdialogen som flyter i mitten av sidan.
  • attached hänvisar till Hello informationsdialogen som öppnas över flaggan.
  • floating föredras när flaggan placeras på top.

Dölja specifikt innehåll

KUNSKAPER SOM BEHÖVS: Grundläggande utvecklarkunskaper

Klassen z-intl baseras på det nuvarande inhemska landet. Om Hello är inställd på ett internationellt land, kommer klassen z-intl att fungera som en dold klass, vilket döljer det innehåll som .z-intl är kopplad till.

Använd följande CSS för att dölja innehåll. Ersätt .your-content med flytande innehåll som du vill dölja.
.z-intl .your-content { display: none; }

Nu kan du dölja Hello från dina inhemska kunder så att andra dialoger blir synliga igen.

Hello integrationsscript

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

Dölja för specifika länder

Lägg till #zonos-id kombinerat med landskoden som också fungerar som CSS-klass för det landet till funktionen .z-intl { display: none; }.

Raden bör se ut som följande:

Hello integrationsskript

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

Slå på/av splashen

KUNSKAPER SOM BEHÖVS : Grundläggande utvecklarkunskaper

Splash hänvisar till pop-up-fönstret och förstoring av Zonos dialogrutan, som innehåller ytterligare information om deras lands specifika tull- och skattepolicy.\

Om du vill slå PÅ och visa Zonos Hello splashen för dina kunders första besök:

Hello integrationsscript

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

Om du vill stänga AV Zonos Hello splash för dina kunders första besök:

Hello integrationsskript

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

Notera: Eventuella Zonos anpassningar måste vara inuti en script tagg.

Vanliga frågor 

Jag är inte utvecklare och behöver hjälp. Vilka alternativ har jag?

Om du har frågor, vänligen kontakta vårt supportteam. Om du inte har resurserna för att slutföra integrationen och behöver hjälp, vänligen kontakta vårt Professional Services team.

Var den här sidan hjälpsam?

© 2024 Zonoszonos.com
På den här sidan:
  • Installera Hello legacy
  • Lägg till Hello på din webbplats
  • Citatfält
  • Artikelfält
  • Anpassa Hello
  • Vanliga frågor