Page Builder チュートリアル第 2 部：ブロック

管理者 サイドバーで、Content/Elements/Blocks ​に移動します。

右上隅の「Add New Block」をクリックします。

Block Title には、Google Map と入力します。

Identifier には、google-map と入力します。

ブロックを使用できる Store View を選択します。

{width="600" modal="regular"}

右上隅の「Save」をクリックします。

下にスクロールして Page Builder コンテンツプレビュー（現在空）を表示し、「Edit with Page Builder」をクリックします。

Page Builder パネルで Media を展開し、Map プレースホルダーをステージにドラッグします。

{width="600" modal="regular"}

ストアに対してマッピングが設定されている場合 Google Maps、ストアの場所へのマッピングが表示されます。

{width="600" modal="regular"}

ストアに対して Google Maps が設定されていない場合は、プレースホルダーマップが表示されます。

{width="600" modal="regular"}

ステージの右上隅にある フルスクリーンを閉じる （ ）アイコンをクリックします。

このアイコンをクリックすると、ブロックの Content ​セクションに戻り、プレビューが表示されます。

右上隅の Save 矢印をクリックし、「Save & Close」を選択します。

Google Cloud Platform コンソールに移動します。

「プロジェクト」ドロップダウンをクリックし、API キーを追加するプロジェクトを選択または作成します。

API 資格情報を設定するには、Google Maps ドキュメントの 手順に従ってください。

API キーをクリップボードにコピーします。

Commerce Admin に戻り、Stores/Settings/Configuration ​に移動します。

General ​の下の左パネルで、「Content Management」を選択します。

Advanced Content Tools を展開します。

{width="600" modal="regular"}

Content Management Advanced Tools 設定オプションについて詳しくは、設定リファレンスガイド を参照してください。

Google Maps API Key: コピーしたキーを貼り付けます。

「Test Key」をクリックします。

キーに問題がある場合は、Google Maps Platform サイトに戻って問題を解決してください。 その後、もう一度試してください。

キーが確認されたら、「Save Config」をクリックします。

管理者 サイドバーで、Content/Elements/Pages ​に移動します。

グリッドで、最初のチュートリアルで作成した Simple Page ​を見つけ、Action の列の Edit を選択します。

「Content」セクションを展開し、コンテンツプレビュー領域 Edit with Page Builder または内側をクリックします。

Page Builder パネルの Layout ​の下で、Row ​のプレースホルダーをステージの上部にドラッグします。

{width="600" modal="regular"}

Page Builder パネルで Add Content を展開し、Block プレースホルダーを新しい行にドラッグします。

空のブロックコンテナにカーソルを合わせてツールボックスを表示し、設定 （ {width="20"}）アイコンを選択します。

{width="600" modal="regular"}

[ ブロックを編集 ] ページで、[Select Block] をクリックします。

{width="600" modal="regular"}

検索ボックスに map と入力し、Enter/Return キーを押して、作成したブロックを検索します。

{width="600" modal="regular"}

グリッドで Select をクリックして、Google Maps のブロックを選択します。

右上隅の「Save」をクリックして設定を保存し、Page Builder ワークスペースに戻ります。

ステージの右上隅にある フルスクリーンを閉じる （ ）アイコンをクリックします。

このアイコンをクリックすると、ページの「Content」セクションに戻り、プレビューが表示されます。

右上隅の Save 矢印をクリックし、「Save & Close」を選択します。

管理者 サイドバーで、Content/Elements/Dynamic Blocks ​に移動します。

{width="700" modal="regular"}

右上隅の「Add Dynamic Block」をクリックします。

{width="600" modal="regular"}

新しいダイナミック ブロックの基本設定を行います。

• Enable Dynamic Block を Yes に設定します。

• Dynamic Block Name には、Tee Shirt Promo と入力します。

• Dynamic Block Type を Content Area に設定し、「Done」をクリックします。

  動的ブロックタイプは、 ページレイアウト内でブロックを配置する場所を決定します。 ストアの動的ブロックを設定する際は、ページレイアウトと テーマの両方を考慮すると、使用可能なスペースを有効活用できます。 アクティブなコンテンツ領域の幅が固定されているストアもあれば、画面の全幅を拡張しているストアもあります。

  {width="600" modal="regular"}

• Customer Segment：ダイナミックブロックに適用する各セグメントのチェックボックスをオンにして、「完了」をクリックしてセグメントのリストを保存します。

  次の例では、登録顧客を性別で識別する 顧客セグメントが 2 つあります。 この動的ブロックは、ストアでのショッピング中にアカウントにログインした登録済みの女性のお客様にのみ表示されます。

  {width="600" modal="regular"}

行コンテナの上にマウスポインターを置いてツールボックスを表示し、設定 （ {width="20"}） アイコンを選択します。

「Appearance」で、「Full Bleed」を選択します。

Minimum Height には、400px と入力します。

「Background」セクションまでスクロールし、Select from Gallery ​をクリックして、最初のチュートリアルでアップロードした wide-banner-background.png 画像を選択することで、Background Image ​を設定します。

右上隅にある「Save」をクリックして設定を適用し、Page Builder ワークスペースに戻ります。

{width="600" modal="regular"}

Page Builder パネルで「Elements」を展開し、「テキスト」プレースホルダーを 2 番目の列にドラッグします。

{width="600" modal="regular"}

エディターに次の 3 行のテキストを入力します。

Even more ways to mix and match.

Buy 3 Luma tees and get a 4th free.

Shop Tees >

{width="600" modal="regular"}

3 行のテキストをすべて選択し、ツールバーを使用して 行の高さ を 40px に設定します。

{width="600" modal="regular"}

各行の Font Size を次のように設定します。

このブロックはページ上のどこにでも配置できるので、見出しレベルではなくデフォルトの段落スタイルを使用します。 また、テキストが列でまだ正しく折り返されていないことを心配する必要はありません。

{width="600" modal="regular"}

別のブラウザータブで、ストアフロントを開き、リンクのターゲットにするページに移動します。

完全修飾 URL またはストアドメインへの参照を省略する相対 URL を使用できます。

完全な URL
:https://mystore.com/women/tops-women/tees-women.html

相対 URL
:../women/tops-women/tees-women.html

Page Builder Workspace タブとテキストエディターに戻り、3 行目で Shop Tees > テキストを選択して、エディターツールバーで 太字 （ ）を選択します。

3 行目の Shop Tees > テキストが選択されたままの状態で、エディターツールバーの リンクを挿入/編集 （ ）を選択します。

{width="600" modal="regular"}

URL：準備した相対リンクを入力します。

Target を None に設定します。

この設定の場合、ページは新しいタブを開かずに同じブラウザーウィンドウで開きます。

Title には、Shop Tees と入力します。

タイトルリンク属性は、一部のブラウザーでツールヒントとして使用されます。

リンクを保存して Page Builder ワークスペースに戻るには、「OK」をクリックします。

{width="600" modal="regular"}

ステージの右上隅にある フルスクリーンを閉じる （ ）アイコンをクリックします。

このアイコンをクリックすると、ダイナミック ブロックの Content ​セクションに戻り、プレビューが表示されます。

右上隅の「Save」をクリックします。

Tee Shirt Promo ダイナミックブロックを再度編集モードで開きます。

「 「Related Promotions」セクションを展開し、「Add Cart Price Rules」をクリックします。

{width="600" modal="regular"}

関連する買い物かご価格ルールを追加 ページで、「3 枚の T シャツを購入」のチェックボックスを選択し、4 番目の無料 価格ルールを取得して、「Add Selected」をクリックします。

{width="600" modal="regular"}

価格ルールは、「関連する買い物かご価格ルール の下の「関連するプロモーション セクションに表示されます 。 複数の価格ルールを動的ブロックに関連付けることができます。 ただし、この単純な例では、1 つだけを使用します。

{width="600" modal="regular"}

右上隅の「Save」をクリックします。

管理者 サイドバーで、Content/Elements/Pages ​に移動します。

最初のチュートリアルの演習 で作成した シンプルなページを見つけて、編集モードで開きます。

「 「Content」セクションを展開し、「Edit with Page Builder」をクリックします。

ダイナミックブロックと同じ画像の一番上の行にカーソルを合わせると、ツールボックスと 削除 （ {width="20"}）アイコンが表示されます。

ページからの行の削除を確認するには、「削 OK」をクリックします。

Page Builder パネルの Layout ​の下で、新しい​ Row ​プレースホルダーをステージの上部にドラッグします。

Page Builder パネルで Add Content を展開し、Dynamic Block プレースホルダーを新しい行にドラッグします。

{width="600" modal="regular"}

動的ブロックコンテナにカーソルを合わせてツールボックスを表示し、設定 （ {width="20"}）アイコンを選択します。

{width="600" modal="regular"}

Edit Dynamic Block ​ページで「Select Dynamic Block」をクリックします。

{width="600" modal="regular"}

作成した Tee Shirt Promo ​ダイナミック ブロックを見つけて、[Select] をクリックします。

ダイナミック ブロック情報の概要が下に表示されます。

{width="600" modal="regular"}

デフォルトの Template、Dynamic Block Block Template を受け入れます。

完了したら、「Save」をクリックして設定を保存し、Page Builder ワークスペースに戻ります。

{width="600" modal="regular"}

ステージの右上隅にある フルスクリーンを閉じる （ ）アイコンをクリックします。

このアイコンをクリックすると、ページの「Content」セクションに戻り、プレビューが表示されます。

右上隅の Save 矢印をクリックし、「Save & Close」を選択します。

管理者 サイドバーで、Content/Elements/Dynamic Blocks ​に移動します。

グリッドで Tee Shirt Promo ​のダイナミック ブロックを探し、編集モードで開きます。

「 「Content」セクションを展開し、「Edit with Page Builder」をクリックします。

列の幅を変更します。

• 2 つの列の境界線にポインタを合わせます。

• マウス ボタンを押したまま、境界を 2 つの分割分だけ左にドラッグします。

  {width="600" modal="regular"}

  最初の列は現在、幅 12 （4/12）のグリッド分割の 4 つになり、2 番目の列は幅 12 （8/12）のグリッド分割の 8 つになります。

  {width="600" modal="regular"}

テキストのカラーを変更します。

• テキストの最初の 2 行を選択します。

• エディターツールバーで Text Color を選択し、White のスウォッチをクリックします。

{width="600" modal="regular"}

ステージの右上隅にある フルスクリーンを閉じる （ ）アイコンをクリックします。

このアイコンをクリックすると、ダイナミック ブロックの Content ​セクションに戻り、プレビューが表示されます。

右上隅の「Save」をクリックします。

ストアフロントにブラウザーウィンドウを開きます。

サンプルページを表示するには、アドレスバーの URL を次のように変更します。

mystore.com/sample-page

ストアが html サフィックスを含むように設定されている場合、次のようにサフィックスを含めます。

mystore.com/sample-page.html

女性のユーザーとしてログインする：

• ホームページの右上隅にある「Sign In」をクリックします。

• サンプル Luma データがシステムにインストールされている場合は、次の資格情報を使用します。

  Email - roni_cost@example.com

  Password - roni_cost3@example.com

• 「Sign In」をクリックします。

• サンプルページに戻り、Tee Shirt プロモで作成した動的ブロックを確認します。

{width="700" modal="regular"}