Page Builder チュートリアル パート 3: カタログ コンテンツ

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

最初の演習で作成し、2番目の演習で変更した​ シンプル ページ ​を見つけ、Action​列の​ Edit ​を選択します。

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

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

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

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

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

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

Select Products By​に対して、Conditionを選択します。

条件を追加：

• 追加 （ ）アイコンをクリックします。

• Product Attribute​で、Category​を選択します。

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

• 詳細（。…）をクリックして、条件の​ Category is… ​部分を完了します。 アイコンをクリックし、Chooser （ ）アイコンをクリックします。

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

• カテゴリーツリーで、女性/ トップス カテゴリにドリルダウンし、ティー チェックボックスを選択します。

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

• チェックマーク （ ）アイコンをクリックします。

  対応するカテゴリ IDがフィールドに表示され、条件が完了します。

Number of Products to Display​を入力します。

デフォルトでは、リストには5つの商品が表示されます。

必要に応じて、残りの設定を完了します。

必要に応じて、​ コンテンツを追加 – 製品 ページの最後にあるフィールドの説明を参照に使用します。

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

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

ステージの右上隅で、フルスクリーンを閉じる （ {width="20"}）アイコンをクリックします。

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

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

管理者 サイドバーで、Catalog > Products​に移動します。

この例で使用できる簡単な製品を見つけて、編集モードで開きます。

下にスクロールして、Content セクションの を展開します。

Description​の横にある「Edit with Page Builder」をクリックします。

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

以前にPage Builderなしで商品説明が入力された場合、現在の説明はHTML Code コンテナにHTMLとして表示されます。 Luma テーマを使用すると、製品の説明が「詳細」タブに表示されます。

Layout​の下のPage Builder パネルで、Row​をステージにドラッグし、HTML コードコンテナの下に配置します。

行が正しい位置にあるときに表示される赤いガイドラインを探します。

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

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

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

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

{width="500" modal="regular"}

Video URL​を入力します。

ビデオは、YouTubeまたはVimeoのいずれかでホストできます。 この例のビデオは、次のURLにあるYouTubeにあります。

https://www.youtube.com/watch?v=ZpFrNyD4100

{width="500" modal="regular"}

ビデオ表示の​ Maximum Width ​をピクセル単位で入力します。

このオプションを空白のままにすると、ビデオが使用可能なスペースに入力されます。

Save​をクリックして設定を保存し、Page Builder ワークスペースに戻ります。

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

ステージの右上隅で、フルスクリーンを閉じる （ {width="20"}）アイコンをクリックします。

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

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

管理者 サイドバーで、Catalog > Products​に移動します。

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

次のプロパティを持つ製品を作成します。

• ​
  属性セット: Default
• Product Name：自分の製品
• ​
  SKU: Tutorial
• ​
  Price: 75.00
• ​
  Quantity: 100
• Stock Status：在庫
• ​
  Weight: 1
• Categories：女性> トップス > ティー

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

管理者 サイドバーで、Stores > Attributes>Product​に移動します。

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

属性に​ Default Label ​を入力します。

この例では、ラベルにMy Page Builder Attributeを使用します。

Catalog Input Type for Store Owner​をPage Builderに設定します。

カスタム属性を作成する際に、アプリケーションに最も適したエディターをPage Builderまたは標準のWYSIWYG Text Editorとして指定できます。

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

Advanced Attribute Properties セクションの を展開し、次の設定を行います。

• Attribute Code: スペースの代わりにハイフンを使用して、属性コードを小文字で入力します。 この例では、my_page_builder_attributeを使用します。
• Scope: デフォルト値であるStore Viewを受け入れます。
• Default Value：属性の既定値を入力します。
• ​
  Unique Value: No
• ​
  Add to Column Options: No
• ​
  Use in Filter Options: Yes

左側の​ Attribute Information ​パネルで、Storefront Properties​を選択し、次の設定を行います。

• ​
  Use for Promo Rule Conditions: Yes
• ​
  Visible on Catalog Pages on Storefront: Yes
• ​
  Used in Product Listing: Yes

完了したら、Save Attribute​をクリックします。

前の手順を繰り返して、同じ基本プロパティを持つ2つ目の属性を作成しますが、テキストエディターの入力タイプは次のようになります。

• Default Label：自分のテキストエディター属性
• Catalog Input Type for Store Owner: テキストエディター
• ​
  属性コード: my_text_editor_attribute

管理者 サイドバーで、Stores > Attributes>Attribute Set​に移動します。

この例では、新しい属性をdefault属性セットに一時的に追加します。 この演習の最後に、属性セットから属性を削除して、カタログに影響を与えないようにします。

リストで設定されている​ Default ​属性を見つけ、ダブルクリックして編集モードで開きます。

未割り当ての属性 リストで、作成した新しい属性を見つけ、それぞれを​ Content ​の下の​ Groups ​列にドラッグします。

Groups列の属性の場所によって、ページ上のどこに表示されるかが決まります。

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

Save​をクリックして、属性セット リストに戻ります。

プロンプトが表示されたら、ページの上部にある​Cache Management リンクをクリックし、無効なキャッシュを更新します。

管理者 サイドバーで、Catalog > Products​に移動します。

製品グリッドで、My Product​を見つけて、編集モードで開きます。

下にスクロールして、Content セクションの を展開します。

セクションの上部には、製品コンテンツの2つの標準属性があります。

• 標準のWYSIWYG editorを使用する​簡単な説明。
• 説明。Page Builderのプレビューが表示されます。

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

セクションの下半分までスクロールすると、作成して割り当てた2つの属性が表示されます。

• My Page Builder属性: Page Builderのプレビューが表示されます。
• 標準のWYSIWYG エディターを使用するMy Text Editor Attribute。

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

My Text Editor Attribute エディターで、Text Editor Attribute placeholder textと入力します。

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

My Page Builder Attribute​で、Edit with Page Builder​をクリックし、説明テキストを追加します。

• Page Builder パネルで、Elements​を展開し、Text object​をステージにドラッグします。

• Page Builder attribute placeholder textと入力します。

• ステージの右上隅で、フルスクリーンを閉じる （ {width="20"}）アイコンをクリックします。

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

Description​までスクロールし、Edit with Page Builder​をクリックして、前の手順と同じ方法を使用して好きなテキストを追加します。

製品ページの右上隅にある​ Save ​矢印をクリックし、Save & Close​を選択します。

メッセージが表示されたら、ページの上部にあるメッセージの​Cache Management リンクをクリックし、無効なキャッシュを更新します。

ストアフロントのサンプル製品ページに移動します。

この例では、製品は上部ナビゲーションの女性/トップス/ティーに表示されます。

マイページビルダー属性​情報までスクロールします。

製品ページ上の属性の位置は、テーマによって決まります。 Luma テーマでは、新しい属性は製品説明のすぐ後にあります。

ストアフロントの {width="600" modal="regular"}