Adobe Commerce CloudにFirework拡張機能をインストールする方法

続行する前に、設定がAdobe Commerce Cloudになっていることを確認してください。

セットアップにかかる推定時間：

• 既存のMagentoアカウントとFireworkアカウントをお持ちの場合、15〜20分
• コードベースのインストールには開発者による作業が必要です。
  • 環境でのデバッグ・テストにかかる時間は、開発チームによって異なります。
• アプリのセットアップとインストール。

商品のインポートにかかる推定時間：

• 時間は、インポートするアイテム数によって異なります。

注：これらはあくまで、以下の手順を確認したうえでの目安です。作業中に問題が発生した場合は、お気軽にサポートまでお問い合わせください。

MagentoにFireworkエクステンションをインストールする

ステップ1

Magentoマーケットプレイス(マイプロフィール - アクセスキー)に移動してアクセスキーをコピーし、Magentoプロジェクトのauth.jsonファイルに貼り付けます。

ステップ2

composer require firework/fireworkコマンドを使用して、プロジェクトにエクステンションを追加します。

次のコマンドを実行して、コードベースとデータベーススキーマをインストールしてください：php bin/magento setup:di:compile

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f
php bin/magento indexer:reindex
php bin/magento cache:clean
php bin/magento cache:flush

ステップ3

コマンドラインインターフェイスを終了し、Magentoの管理者コンソールを開きます。

Adobe Commerce Cloudのインストール

ステップ4

ストアからコンフィギュレーションに移動します。メニューにFireworkロゴの付いた新しいタブが表示されていれば、Firework拡張機能が正しくインストールされています。

注記

Webhook設定内のエンドポイントURLは変更しないでください。あらかじめ入力されており、変更すると連携が壊れてしまいます。

ストアフロントに変更を反映するには、設定・構成を行うたびにストア管理者がキャッシュをフラッシュする必要があります。

上記について何かお困りの際は、お気軽にFireworkのアカウントマネージャーまでお問い合わせください。

Fireworkエクステンションを設定する

Fireworkエクステンションのインストールが完了したら、ストアと正しく連携するよう設定されているかを確認します。これらの手順は、Magentoストアの管理者が行う必要があります。

ステップ1

「Stores」→「Integrations」に移動します。

ステップ2

「Add New Integration」をクリックします。

ステップ3

以下の必要事項を入力します。

• Name：例「Firework」
• Email：担当者のメールアドレス(どのメールアドレスでも構いません)
• Your Password：ログインパスワード
• Callback URLとIdentity Link URLは空欄のままにしてください

ステップ4

APIを選択し、以下へのアクセスを許可します。

• Cart
• Catalog
• Customers
• Marketing
• My Account

Fireworkウィジェットをページに埋め込む

パターン1：ウィジェット挿入を使用する

ステップ1

「Content」→「Pages」に移動します。

ステップ2

編集したいページで「Edit」を選択します。

ステップ3

「Edit with Page Builder」を選択します。

ステップ4

ウィジェットを埋め込みたい場所に「HTML Code」ブロックを追加します。

ステップ5

「Edit (⚙)」をクリックします。

ステップ6

「Insert Widget」を選択し、「Firework Videos」を選択します。

ステップ7

レイアウト・チャンネル・プレイリストを選択し、「Save」をクリックします。

パターン2：HTMLコードを使用する

ステップ1

Fireworkダッシュボード→プレイリスト/レイアウトからHTMLコードを取得します。

ステップ2

コンテンツセクションにHTMLコードを貼り付けて編集します。

ヒント

コーディング不要でシンプルに埋め込みたい場合はパターン1をご利用ください（カスタマイズには制限があります）。
レイアウト・サイズ・タイトルなどをカスタマイズしたい場合はパターン2をご利用ください（HTMLの知識が必要です）。

製品/カートハイドレーションを実装する

製品/カートハイドレーションを実装する場合は、次のスクリプトを追加する必要があります。

<script async type="text/javascript" src="//asset.fwcdn3.com/js/integrations/magento.js"></script>

複数のプレイリストを表示する

storyblock.jsとembed-feed.jsのロジックを含むfwn.jsのみを使用することで、スクリプトの重複を回避できます。

Fireworkと商品情報を同期する

ステップ1

Firework -> Firework Dashboardに移動します。

ステップ2

ストアを選択します。

ステップ3

「Import Products」をクリックします。

ステップ4

インポートする商品を選択します。

ステップ5

商品が「Products」タブに表示されます。

ステップ6

「Stores」→「Configuration」→「Firework」に移動し、Purchases Trackingを有効にします。