Page Builder ウォークスルー（パート 2）：ブロック

日 Admin サイドバー、に移動 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 管理者して、に移動します 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.

日 Admin サイドバー、に移動 Content > Elements>Pages.

グリッドで、を見つけます Simple Page ​最初のチュートリアルで作成し、を選択していること​ Edit ​が含まれる​ Action 列。

を展開 この 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.

日 Admin サイドバー、に移動 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 ​セクションに移動して、Background Image ​クリックして​ Select from Gallery ​を選択し、 wide-banner-background.png 最初のチュートリアルでアップロードされた画像。

右上隅のをクリックします。 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 「ワークスペース」タブと「テキストエディター」で、 Shop Tees > 3 行目のテキストで、次のオプションを選択します 太字 （ ）を選択します。

（を使用） Shop Tees > 3 行目のテキストが選択されたままの状態で、 リンクを挿入/編集 （ ）を選択します。

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

の場合 URL ​に、作成した相対リンクを入力します。

を設定 Target 対象： None.

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

の場合 Title、と入力します Shop Tees.

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

リンクを保存して、に戻るには Page Builder ワークスペース、クリック OK.

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

ステージの右上隅にあるをクリックします 全画面表示を閉じる （ ） アイコンをクリックします。

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

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

を開きます T シャツのプロモ 編集モードのダイナミックブロックが再び表示されます。

を展開 この 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.

が含まれる Admin サイドバー、に移動 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.

が含まれる Admin サイドバー、に移動 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"}