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 Consoleに移動します。

プロジェクト ドロップダウンをクリックし、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​をクリックします。

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

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

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

Layout​の下のPage Builder パネルで、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 ワークスペース タブとテキストエディターに戻り、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」をクリックします。

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」をクリックします。

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

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

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

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

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

Layout​の下のPage Builder パネルで、新しい​ 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つ（4/12）幅になり、2番目の列は12のグリッド分割のうち8つ（8/12）幅になります。

  {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​をクリックします。

• サンプルページに戻り、ティーシャツプロモーションで作成したダイナミックブロックを確認します。

顧客セグメントに対して {width="700" modal="regular"}