💳

【Shopify.dev和訳】Apps/Checkout/Shipping methods/Quickstart

2021/09/12に公開

Shopify

apps

tech

この記事について

この記事は、Apps/Checkout/Shipping methods/Quickstartの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

配送スクリプトの作成 | Building a shipping script

このチュートリアルでは、基本的な配送スクリプトを作成し、それをカスタムアプリにデプロイする方法を学びます。

学ぶこと | What you'll learn

このチュートリアルを終了すると、以下のことができるようになります：

Shopify CLI を使って基本的な配送スクリプトを作成する
スクリプトを Shopify プラットフォームにデプロイし、カスタムアプリと関連付ける
Shopify ストアでスクリプトを有効にする
ストアでテスト注文を行い、スクリプトが期待通りに動作していることを確認する

次の図は、ワークフローを完成させるための手順を示しています：

必要条件 | Requirements

Shopify CLIをインストール済み。
カスタムアプリを作成済み。Shopify Scripts は現在、カスタムアプリのみをサポートしている。
ストアにカスタムアプリをインストール済み。

ステップ 1: スクリプトを作成する | Step1: Create the script

Shopify CLI を使って、以下のコマンドを実行します：

Terminal

shopify script create --extension-point=shipping_methods --name="My shipping script"

配送スクリプトの更新

配送スクリプトの src/script.ts の内容を以下のコードで置き換えてください。 shippingMethodsHandler は、顧客がチェックアウト時に配送ページに到達し、すべての配送料金が返されたときに実行されます。この関数の結果は、ソート順、削除する配送方法、または名前を変更する配送方法です。

src/script.ts

import {ShippingMethods, Configuration, CheckoutDomain as Domain} from '@shopify/scripts-checkout-apis';

export function shippingMethodsHandler(
  input: ShippingMethods.Input,
  configuration: Configuration,
): ShippingMethods.Result {

  const sortResponse = new ShippingMethods.SortResponse([]);
  const filterResponse = filterShippingMethod(input.shippingMethods);
  const renameResponse = new ShippingMethods.RenameResponse([]);

  return new ShippingMethods.Result(sortResponse, filterResponse, renameResponse);
}

function filterShippingMethod(shippingMethods: Domain.ShippingMethod[]): ShippingMethods.FilterResponse {
  var hiddenMethods = new Array<Domain.ShippingMethod>();

  if (shippingMethods.length > 0) {
    hiddenMethods.push(shippingMethods[0]);
  }

  return new ShippingMethods.FilterResponse(hiddenMethods);
}

ステップ 2: スクリプトをデプロイする | Step2: Deploy the script

スクリプトを Shopify プラットフォームにデプロイし、カスタムアプリと関連付けるには、以下のコマンドを実行します：

Terminal

shopify script push

ステップ 3: スクリプトを有効化する | Step3: Enable the script

デフォルトでは、アプリがインストールされたストアでスクリプトが使用できるようになっていますが、有効にはなっていません。チェックアウトの動作を変更するには、スクリプトを有効にする必要があります：

あなたのストアの Shopify 管理画面で、設定をクリックします。
配送と配達をクリックします。
配送料のカスタマイズセクションで、カスタマイズの作成をクリックします。
有効にするスクリプトを選択し、そのステータスをオンに更新します。
保存をクリックします。

ステップ 4: テスト注文をする | Step4: Place a test order

あなたのストアでテスト注文を行い、チェックアウトのステップに進みます。最初の配送料は、配送ステップでは表示されないはずです：

次のステップ | Next steps

マーチャントが顧客タグに基づいてチェックアウト時に顧客に提供する配送方法を非表示にすることができる shipping methods スクリプトを作成します。
Shopify Scripts のshipping methods API reference ドキュメントをお読みください。

Shopify アプリのご紹介

Discussion

ログインするとコメントできます