DOCS

Install

/
Hello•
ホームグローバルeコマース 統合 インストール

Helloレガシーのインストール

ストアのウェブサイトにHelloをインストールする方法を学びましょう。

ShopifyBigCommerceMagentoMiva、また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 は、ページが表示されるときに、カート全体の関税および税金の見積もりを表示することもできます。

関税および税金の見積もりは、各製品ページまたはメイン製品ページに表示できます。これは、プラットフォームの設定によります。

関税および税金の見積もりを追加するには、以下に示すようなスクリプトを適用します。必要な2つのフィールドは 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 をプラットフォームとして使用している場合、商品詳細から商品データを取得するスクリプトがあります。

以下のコードには、商品ページとカートページで実行される関数があります。

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アイテムの価格は、3文字の通貨コードで指定された通貨で表示されます。デフォルト: USD
includedTaxRatenumberアイテムに税金が含まれている場合のアイテム税rate
showDecimalbool変換された通貨の小数値の表示をオンまたはオフに切り替えます

アイテムフィールド 

フィールドデータ型説明
namestring

必須

製品名
pricenumber

必須

単一製品の単価
quantityintegerカート内の製品の数。デフォルト: 1
imagestring製品画像のURL
urlstring個別製品へのURL
hsCodestring製品のハーモナイズドコード（HSコード）
categorystringサイト上の製品カテゴリー
countrystringこの製品が原産国の2文字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情報ダイアログを指します。
  • フラグをtopに配置する場合は、floatingが推奨されます。

特定のコンテンツを非表示にする

必要なスキル: 基本的な開発者スキル

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 をカスタマイズ