Shopify
Wink Shopify Appは、ツアーオペレーター、体験販売者、ホスピタリティ事業者が、Shopifyのストアフロント上でWinkのライブ在庫を直接表示できるようにします。製品と並べて、ランディングページやテーマの任意の場所に配置可能です。
wink-travel/wink-shopify-plugin on GitHub ソースコード、開発者セットアップガイド、貢献方法の説明。
インストール
Section titled “インストール”- Shopify App Storeにアクセスし、Wink Travelを検索します。
- Add appをクリックし、OAuthフローに従って認証を行います。
- Winkアプリの設定で、Client IDとClient Secretを入力します。 資格情報はApplicationsから取得してください。
- Verify & Saveをクリックします。接続成功のメッセージが表示されます。
App Embed Blockを有効にする
Section titled “App Embed Blockを有効にする”App Embed Blockは、Winkのスクリプトとスタイルシートをすべてのページに自動で挿入します。テーマコードを編集する必要はありません。
- Shopify管理画面で、オンラインストア → テーマ → カスタマイズに進みます。
- 左側のパネルでApp embedsをクリックします。
- Wink Travelをオンに切り替えます。
- 保存をクリックします。
ページにコンポーネントを追加する
Section titled “ページにコンポーネントを追加する”- テーマエディタで、Winkコンテンツを表示したいページまたはセクションを開きます。
- ブロックを追加をクリックし、Winkのブロックから選択します：
- Wink Content — ホテルカード、グリッド、マップ
- Wink Lookup — 目的地検索バー
- Wink Search — 旅程ピッカーボタン
- Wink Account — サインインボタン
- Wink Itinerary — 旅程ステータスボタン
- Wink Cart — ショッピングカートボタン
- Wink Contentの場合、レイアウトタイプを選択し、Wink Studioから取得したレイアウトIDを入力します。
- 保存をクリックします。
利用可能なテーマブロック
Section titled “利用可能なテーマブロック”| ブロック | 用途 |
|---|---|
| Wink Content | ホテルカード、ランキンググリッド、マップなどを表示 |
| Wink Lookup | 目的地やホテルの検索バー |
| Wink Search | 旅程ピッカーを開くアイコンボタン |
| Wink Account | サインイン／ユーザーアカウントボタン |
| Wink Itinerary | 現在の旅程を表示するボタン |
| Wink Cart | ショッピングカートの概要ボタン |