DOCS

Install

/
Hello•
홈글로벌 전자상거래 통합 설치

Hello 레거시 설치

Hello를 스토어 웹사이트에 설치하는 방법을 알아보세요.

Shopify, BigCommerce, Magento, Miva 또는 X-Cart를 사용하고 있다면 해당 플러그인 통합 페이지를 읽어보세요.

아래 스크립트는 Zonos Hello 플래그를 사이트에 추가하고, 고객이 방문하는 국가를 인식하며, 인사하고, 해당 국가에 대한 일반 세금 및 관세 정보를 제공합니다(기본).

최소한의 개발 작업으로 추가 기능을 사용할 수 있습니다(아래에 표시됨).

사이트에 Hello 추가 

1

Hello 스크립트 추가 - 기본

이 스크립트를 사이트 코드에 추가하면 Zonos Hello 플래그가 웹사이트에 추가되고, 고객이 방문하는 국가를 인식하며, 인사하고, 해당 국가에 대한 일반 세금 및 관세 정보를 제공합니다.

필요한 기술: 기본 웹 기술

Hello를 설치하려면 고유한 사이트 키가 포함된 사용자 정의 스크립트를 웹사이트의 닫는 body 태그 전에 적용하세요.

Hello 통합 스크립트

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

Zonos Hello는 추가 기능이 추가되기 전에 로드되어야 합니다. 위 스크립트 이후에 추가 기능을 포함해 주십시오.

스크립트가 없으신가요? 여기에서 다운로드하세요.

2

예상 세금 및 관세 생성

필요한 기술: 기본 개발자 기술

이 기능이 활성화되면, Hello는 제품이 조회되거나 장바구니에 추가될 때 세금 및 관세 추정치를 제공할 수 있습니다. Hello는 페이지가 조회될 때 전체 장바구니에 대한 세금 및 관세 견적도 표시할 수 있습니다.

세금 및 관세 견적은 각 제품 페이지 또는 귀하의 주요 제품 페이지에 표시될 수 있으며, 이는 귀하의 플랫폼 설정에 따라 다릅니다.

세금 및 관세 견적을 추가하려면 아래에 표시된 것과 유사한 스크립트를 적용하십시오. 두 개의 필수 필드는 name과 price입니다.

예시: 아래는 스크립트가 귀하의 페이지에서 어떻게 보이고 작동하는지에 대한 예시입니다.

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

사이트에 맞게 조정해야 하는 스크립트를 사용해야 합니다. 사용 중인 스크립트는 초기 Zonos Hello 스크립트 이후에 배치되어야 합니다.

플랫폼을 사용하지 않는 경우, 다음 스크립트를 사용하여 제품 세부정보를 동적으로 가져올 수 있습니다. 이 스크립트는 사용 가능한 첫 번째 제품을 가져옵니다. 이 스크립트는 사이트의 장바구니 페이지에서도 사용할 수 있도록 조정할 수 있습니다. 모든 제품과 해당 데이터를 반복한 다음, 이를 zonos.quote에 전송해야 합니다.

Hello 통합 스크립트

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>

항목 필드에서 아래의 추가 값을 추가할 수 있으며, currencyCode를 기본 통화로 변경할 수도 있습니다.

Shopify 및 BigCommerce

Shopify 또는 BigCommerce를 사용하는 경우 아래 코드를 사용하세요.

Shopify
빅커머스

Shopify를 플랫폼으로 사용하는 경우, Shopify 제품 세부정보에서 제품 데이터를 가져오는 스크립트를 사용할 수 있습니다.

아래 코드는 제품 페이지와 장바구니 페이지에서 실행되는 함수를 포함하고 있습니다.

Hello 통합 스크립트

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>

견적 필드 

필드데이터 유형설명
itemsarray

필수

견적에 포함할 항목 목록
currencyCodestring항목 가격은 세 자리 통화 코드로 지정된 통화로 표시됩니다. 기본값: USD
includedTaxRatenumber항목에 세금이 포함된 경우 항목 세금 rate
showDecimalbool변환된 통화에서 소수점 값을 표시할지 여부를 전환합니다

항목 필드 

필드데이터 유형설명
namestring

필수

제품 이름
pricenumber

필수

단일 제품의 단가
quantityinteger장바구니에 있는 제품 수. 기본값: 1
imagestring제품 이미지의 URL
urlstring개별 제품의 URL
hsCodestring제품의 조화 코드 (HS 코드)
categorystring사이트의 제품 카테고리
countrystring이 제품이 원산지인 국가의 두 자리 ISO 코드
customizationstring제품 맞춤화 (예: 크기, 색상)
descriptionstring제품의 상세 설명
skustring제품의 UPC 또는 SKU

Zonos에 제품에 대한 더 많은 세부정보를 제공할수록 견적의 정확성이 일반적으로 향상됩니다.

Hello 사용자 정의 

깃발 위치 변경

필요한 기술: 기본 개발자 기술

기본적으로 Zonos Hello 깃발은 페이지의 오른쪽 하단에 나타납니다.

여기에서는 깃발의 위치를 변경하는 방법과 국제 고객이 보지 않기를 원하는 웹사이트의 특정 요소를 숨기는 방법에 대한 정보를 찾을 수 있습니다.

예시: 국제 고객에게 무료 배송 숨기기; 이를 통해 국내 고객 및 특정 국가에서 Zonos Hello를 숨길 수 있습니다.

위치가 비어 있으면 코드는 기본값을 사용합니다.

Hello 통합 스크립트

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

왼쪽 하단 모서리의 경우:

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

왼쪽 상단 모서리에서 플로팅 정보 대화 상자를 사용하는 경우:

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

  • floating은 페이지 중앙에 플로팅되는 Hello 정보 대화 상자를 나타냅니다.
  • attached는 깃발 위에 열리는 Hello 정보 대화 상자를 나타냅니다.
  • floating은 깃발을 top에 배치할 때 선호됩니다.

특정 콘텐츠 숨기기

필요한 기술: 기본 개발자 기술

z-intl 클래스는 현재 국내 국가를 기반으로 합니다. Hello가 국제 국가로 설정되면, z-intl 클래스는 숨겨진 클래스로 작용하여 .z-intl에 연결된 콘텐츠를 숨깁니다.

다음 CSS를 사용하여 콘텐츠를 숨깁니다. .your-content를 숨기고 싶은 플로팅 콘텐츠로 교체하세요.
.z-intl .your-content { display: none; }

이제 국내 고객에게 Hello를 숨겨 다른 대화 상자가 다시 보이도록 할 수 있습니다.

Hello 통합 스크립트

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

특정 국가에 대한 숨기기

#zonos ID와 해당 국가의 CSS 클래스로 사용되는 국가 코드를 결합하여 .z-intl { display: none; } 함수에 추가하십시오.

해당 줄은 다음과 같이 보일 것입니다:

Hello 통합 스크립트

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

스플래시 켜기/끄기

필요한 기술: 기본 개발자 기술

스플래시는 Zonos 대화 상자의 팝업 및 확대를 의미하며, 해당 국가의 특정 세금 및 세금 정책에 대한 추가 정보를 포함합니다.\

고객의 첫 방문 시 Zonos Hello 스플래시를 켜고 표시하려면:

Hello 통합 스크립트

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

고객의 첫 방문 시 Zonos Hello 스플래시를 끄고 싶다면:

Hello 통합 스크립트

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

참고: 모든 Zonos 사용자 정의는 script 태그 안에 있어야 합니다.

자주 묻는 질문 

저는 개발자가 아니며 도움이 필요합니다. 어떤 옵션이 있나요?

질문이 있으시면 지원 팀에게 문의해 주십시오. 통합을 완료할 리소스가 없고 도움이 필요하시면 전문 서비스 팀에게 문의해 주십시오.

이 페이지가 도움이 되었습니까?

질문 있으세요?

문의하세요.

Zonos을 보세요

정책 및 계약
© 2024 Zonoszonos.com
이 페이지에서:
  • Hello 레거시 설치
  • 사이트에 Hello 추가
  • Hello 사용자 정의