Craft CMS

Wink Craft CMSプラグインは、Twigテンプレート関数とコンテンツエディター用のカスタムフィールドタイプを通じて、Winkの旅行在庫をCraft 5に統合します。編集者はエントリエディター内のドロップダウンから特定のWinkレイアウトを直接選択できます。

wink-travel/wink-craft-plugin on GitHub ソースコード、開発者セットアップガイド、貢献方法の説明。

必要条件

• Craft CMS 5.x
• PHP 8.1以上
• Composer

インストール

1. Composerでインストール：

   composer require wink2travel/craft-wink

2. コントロールパネルの設定 → プラグインでプラグインを有効化、またはCLIで：

   php craft plugin/install wink

3. コントロールパネルの設定 → Winkに移動。
4. Client IDとClient Secretを入力し、環境を選択して保存をクリック。 資格情報はApplicationsで取得できます。

Twigテンプレートでの使用

設定後、テンプレート内の任意の場所でWinkのTwig関数を呼び出せます：

{# ホテルグリッドを表示 #}
{{ winkContent('HOTEL', entry.winkLayoutId) }}

{# 目的地検索バー #}
{{ winkLookup() }}

{# 旅程ピッカーボタン #}
{{ winkSearch() }}

{# ユーザーアカウントボタン #}
{{ winkAccount() }}

winkContent()関数は、ページで初めて呼び出された際に自動的に<wink-app-loader>を挿入します。

利用可能なTwig関数

関数	出力	説明
winkContent(layout, id)	<wink-content-loader>	ホテルカード、グリッド、地図
winkLookup()	<wink-lookup>	目的地検索バー
winkSearch()	<wink-search-button>	旅程ピッカーボタン
winkAccount()	<wink-account-button>	サインイン / ユーザーアカウント
winkItinerary()	<wink-itinerary-button>	旅程ステータスボタン
winkShoppingCart()	<wink-shopping-cart-button>	カートボタン

Wink Layoutフィールドタイプ

任意のセクションにWink Layoutフィールドを追加すると、編集者はWinkアカウントの利用可能なすべてのレイアウトをドロップダウンから選択できます：

1. 設定 → フィールド → 新規フィールドに移動。
2. フィールドタイプをWink Layoutに設定。
3. フィールドをエントリータイプのフィールドレイアウトに追加。
4. 編集者はエントリエディター内で直接レイアウトを選択可能に — IDのコピー＆ペースト不要。

テンプレートでは、フィールドの値をwinkContent()に渡します：

{{ winkContent(entry.winkLayout.type, entry.winkLayout.id) }}

参考資料

• Web Componentsリファレンス
• Client IDの取得
• Wink Craft Plugin — ソースコード＆開発者ドキュメント