Dodaj Hello do swojej strony
Dodaj skrypt Hello - podstawowy
Dodanie tego skryptu do kodu Twojej strony doda flagę Zonos Hello do Twojej witryny, rozpozna kraj, z którego odwiedzają Cię klienci, powita ich i poda ogólne informacje o cłach i podatkach dla ich kraju.
UMIEJĘTNOŚCI POTRZEBNE: Podstawowe umiejętności internetowe
Aby zainstalować Hello, wprowadź niestandardowy skrypt zawierający Twój unikalny klucz witryny na swojej stronie przed zamykającym tagiem body
.
Hello skrypt integracyjny
<script src="https://hello.zonos.com/hello.js?siteKey=YOURSITEKEY"></script>
Zonos Hello musi być załadowany przed dodaniem jakiejkolwiek dodatkowej funkcjonalności. Proszę dołączyć wszelkie dodatkowe funkcje po powyższym skrypcie.
Nie masz jeszcze skryptu? Kliknij tutaj, aby pobrać.
Generowanie szacunkowych opłat celnych i podatków
UMIEJĘTNOŚCI POTRZEBNE: Podstawowe umiejętności programistyczne
Gdy ta funkcja jest włączona, Hello może dostarczać szacunkowe opłaty celne i podatki, gdy produkt jest wyświetlany lub dodawany do koszyka. Hello może również wyświetlać pełne wyceny opłat celnych i podatków dla całego koszyka, gdy strona jest wyświetlana.
Wycena opłat celnych i podatków może być umieszczona na każdej stronie produktu lub na głównej stronie produktu, w zależności od tego, jak jest skonfigurowana Twoja platforma.
Aby dodać wycenę opłat celnych i podatków, zastosuj skrypt, który wygląda jak poniżej. Dwa wymagane pola to name
i price
.
Przykład: Poniżej znajduje się przykład, jak skrypt będzie wyglądał i działał na Twojej stronie.
Hello integracyjny skrypt
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',
});
Skrypty, które mogą być używane, będą musiały zostać dostosowane, aby działały na Twojej stronie. Upewnij się, że którykolwiek z poniższych skryptów, które używasz, jest umieszczony po początkowym Zonos Hello skrypcie.
Jeśli nie używasz platformy, możesz użyć poniższego skryptu, aby dynamicznie pobrać szczegóły swojego produktu. Ten skrypt pobierze pierwszy dostępny produkt. Możesz również dostosować ten skrypt do użycia na stronie koszyka Twojej witryny. Będziesz musiał przejść przez wszystkie produkty i ich dane, a następnie wysłać to do zonos.quote.
Hello skrypt integracyjny
<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>
Możesz dodać dodatkowe wartości z pól przedmiotów poniżej i również zmienić
currencyCode
na swoją domyślną walutę.
Shopify i BigCommerce
Jeśli używasz Shopify lub BigCommerce, użyj poniższego kodu.
Jeśli używasz Shopify jako swojej platformy, mamy skrypt, którego możesz użyć, aby pobrać dane produktu z szczegółów produktu Shopify.
Poniższy kod zawiera funkcję, która będzie działać na stronach produktów i stronie koszyka.
Hello integration script
<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>
Pola cytatów
Pole | Typ danych | Opis |
---|---|---|
items | array WYMAGANE | Lista przedmiotów do uwzględnienia w ofercie |
currencyCode | string | Ceny przedmiotów będą wyświetlane w walucie określonej przez trzyznakowy kod waluty. Domyślnie: USD |
includedTaxRate | number | Stawka podatku rate jeśli przedmiot zawiera podatek |
showDecimal | bool | Włącza lub wyłącza wyświetlanie wartości dziesiętnej w przeliczonej walucie |
Pola przedmiotu
Pole | Typ danych | Opis |
---|---|---|
name | string WYMAGANE | Nazwa produktu |
price | number WYMAGANE | Cena jednostkowa pojedynczego produktu |
quantity | integer | Liczba produktów w koszyku. Domyślnie: 1 |
image | string | URL obrazu produktu |
url | string | URL do pojedynczego produktu |
hsCode | string | Zharmonizowany kod (kod HS) dla Twojego produktu |
category | string | Kategoria produktu na Twojej stronie |
country | string | Dwuznakowy kod ISO kraju, z którego pochodzi ten produkt |
customization | string | Personalizacja produktu (np. rozmiar, kolor) |
description | string | Szczegółowy opis produktu |
sku | string | UPC lub SKU produktu |
Im więcej szczegółów podasz Zonos o swoim produkcie, tym dokładność wyceny zazwyczaj będzie lepsza.
Dostosuj Hello
Zmień lokalizację flagi
UMIEJĘTNOŚCI POTRZEBNE: Podstawowe umiejętności programistyczne
Domyślnie flaga Zonos Hello pojawi się w prawym dolnym rogu Twojej strony.
Tutaj znajdziesz informacje na temat zmiany lokalizacji flagi oraz ukrywania niektórych elementów Twojej strony internetowej, których nie chcesz, aby międzynarodowi klienci widzieli.
Przykład: Ukrywanie darmowej wysyłki przed międzynarodowymi klientami; to również pozwoli Ci ukryć Zonos Hello przed krajowymi klientami i z określonych krajów.
Jeśli lokalizacja zostanie pozostawiona pusta, kod użyje domyślnej lokalizacji.
Hello skrypt integracyjny
zonos.config({ location: 'right bottom attached' });
zonos.config({ location: '' });
Dla dolnego lewego rogu:
zonos.config({location: 'left'});
Dla górnego lewego rogu z pływającym oknem informacyjnym:
zonos.config({location: 'left top floating'});
floating
odnosi się do Hello okna informacyjnego, które unosi się w centrum strony.attached
odnosi się do Hello okna informacyjnego, które otwiera się nad flagą.floating
jest preferowane przy pozycjonowaniu flagi natop
.
Ukryj konkretne treści
UMIEJĘTNOŚCI POTRZEBNE: Podstawowe umiejętności programistyczne
Klasa z-intl
opiera się na aktualnym kraju domowym. Jeśli Hello jest ustawione na kraj międzynarodowy, klasa z-intl
będzie działać jako klasa ukryta, ukrywając treści, do których jest przypisana .z-intl
.
Użyj poniższego CSS, aby ukryć treści. Zastąp
.your-content
treścią pływającą, którą chcesz ukryć.
.z-intl .your-content { display: none; }
Teraz możesz ukryć Hello przed swoimi krajowymi klientami, aby inne okna były znowu widoczne.
Hello skrypt integracyjny
#zonos {
display: none;
}
.z-intl #zonos {
display: block;
}
Ukryj dla konkretnych krajów
Dodaj identyfikator #zonos połączony z kodem kraju, który pełni również rolę klasy CSS dla danego kraju, do funkcji .z-intl { display: none; }
.
Linia powinna wyglądać mniej więcej tak:
Hello integracyjny skrypt
.z-intl #zonos.US {
display: none;
}
Włącz/wyłącz splash
UMIEJĘTNOŚCI POTRZEBNE : Podstawowe umiejętności programistyczne
Splash odnosi się do wyskakującego okna i powiększenia okna dialogowego Zonos, które zawiera dodatkowe informacje dotyczące specyficznej polityki celnej i podatkowej w ich kraju.\
Jeśli chcesz WŁĄCZYĆ i wyświetlić splash Zonos Hello podczas pierwszej wizyty Twoich klientów:
Hello integration script
zonos.config({ showSplash: true });
Jeśli chcesz WYŁĄCZYĆ splash Zonos Hello dla pierwszej wizyty swoich klientów:
Hello skrypt integracyjny
zonos.config({ showSplash: false });
Uwaga: Wszelkie Zonos dostosowania muszą być umieszczone wewnątrz tagu
script
.
Najczęściej zadawane pytania
Nie jestem deweloperem i potrzebuję pomocy. Jakie mam opcje?
Jeśli masz pytania, skontaktuj się z naszym zespołem wsparcia. Jeśli nie masz zasobów, aby zakończyć integrację i potrzebujesz pomocy, skontaktuj się z naszym zespołem usług profesjonalnych.
Zainstaluj Hello legacy
Dowiedz się, jak zainstalować Hello na stronie swojego sklepu.
Jeśli korzystasz z Shopify, BigCommerce, Magento, Miva lub X-Cart, przeczytaj odpowiednią stronę integracji wtyczki.
Poniższy skrypt doda flagę Zonos Hello do Twojej strony, rozpozna kraj, z którego odwiedzają Cię klienci, powita ich i poda ogólne informacje o cłach i podatkach dla ich kraju (podstawowe).
Dodatkowe funkcje są dostępne przy minimalnej pracy deweloperskiej (pokazane poniżej).