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"}

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

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

Select Products By の場合は、「Condition」を選択します。

条件を追加します。

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

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

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

• 条件の Category is… の一部を完了するには、その他（…）アイコンをクリックし、選択 （ ）アイコンをクリックします。

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

• カテゴリツリーで、Women > Tops カテゴリにドリルダウンし、「Tees」チェックボックスを選択します。

  {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コードコンテナの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 でホストできます。 この例のビデオは、YouTubeの次の URL で見つかります。

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: My Product

• ​

  SKU: Tutorial

• ​

  Price: 75.00

• ​

  Quantity: 100

• Stock Status：在庫あり

• ​

  Weight: 1

• Categories：女性/トップス/T 型

右上隅の 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: My Text Editor 属性

• 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 エディターを使用します。
• 説明:Page Builder プレビューが表示されます。

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

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

• My Page Builder Attribute:Page Builder プレビューを表示します。
• テキストエディター属性：標準の WYSIWYG エディターを使用します。

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

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

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

「マイページビルダー属性」で「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 リンクをクリックし、無効なキャッシュを更新します。

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

この例では、製品は上部ナビゲーションの女性/ トップス / T 型の下にあります。

My Page Builder 属性 情報までスクロールします。

製品ページ上の属性の位置は、テーマによって決定されます。 Luma テーマでは、新しい属性は製品の説明の直後に配置されます。

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