カタログイベントカルーセルウィジェット

Adobe Commerce機能 {width="20"} Adobe Commerceのみの専用機能(詳細情報

カタログイベントカルーセルウィジェットには、今後のイベントのスライダーと各イベントのカウントダウンティッカーが表示されます。 カルーセルを表示するページとページレイアウトの領域を選択し、一度に表示するイベントの幅と数を制御することができます。 取得する結果は、テーマ、ページ上での表示位置、選択したオプションによって異なります。

左側のサイドバーのイベントカルーセル

手順 1:カタログカルーセルウィジェットを有効にする

開始する前に、に従ってください 指示 を設定します カタログイベント ストアフロントに対して有効になるようにウィジェット。

カタログイベントの設定

手順 2:ウィジェットの作成

  1. Admin サイドバー、に移動 Content > Elements>Widgets.

  2. 右上隅のをクリックします。 Add Widget.

  3. が含まれる Settings ​セクションで、次の操作を行います。

    • を設定 Type 対象: Catalog Events Carousel.

    • を選択します。 Design Theme それは店で使われます。

  4. クリック Continue.

    イベントカルーセルのウィジェット設定 {width="500" modal="regular"}

  5. が含まれる Storefront Properties ​セクションで、次の操作を行います。

    • の場合 Widget Title、ウィジェットのわかりやすいタイトルを入力します。

      このタイトルは、次の場所からのみ表示されます: Admin.

    • の場合 Assign to Store Views ​で、ウィジェットを表示するストア表示を選択します。

      特定のストア表示を選択することも、 All Store Views. 複数のビューを選択するには、Ctrl キー(PC)または Command キー(Mac)を押したまま、各オプションをクリックします。

    • (オプション) Sort Order ​を入力し、この項目がページの同じ部分に他のユーザーと表示される順序を決定します。 (0 =最初、 1 =秒、 3 = 3 番目、など)。

      ウィジェットのストアフロントのプロパティ {width="600" modal="regular"}

手順 3:場所の選択

  1. が含まれる レイアウトの更新 セクションで、をクリック Add Layout Update.

  2. を設定 Display On 対象: Specified Page.

  3. を設定 Page 対象: CMS Home Page.

  4. を設定 Container 次のいずれか:

    • Main Content Area
    • Sidebar Additional
    • Sidebar Main
    note note
    NOTE
    結果は、テーマやページのレイアウトによって異なります。 また、を指定する必要があります Catalog Events Carousel Default Template ​カテゴリ設定で定義します。
  5. イベントカルーセルをストアフロントの別の場所に表示する場合は、をクリックします Add Layout Update その場所に対してこれらの手順を繰り返します。

    レイアウトの更新 {width="600" modal="regular"}

  6. クリック Save and Continue Edit.

    現時点では、メッセージを無視してキャッシュを更新できます。

手順 4:オプションの設定

  1. 左パネルで、を選択します。 Widget Options.

  2. の場合 Frame Size ​で、スライダーに同時にリストするイベントの数を入力します。

    一度に 1 つのイベントのみを表示するには、次のように入力します 1.

  3. の場合 Scroll ​を選択し、クリックごとにスクロールするイベントの数を入力します。

    次のイベントまでスクロールするには、と入力します。 1.

  4. カスタム幅の場合は、ピクセル数を入力します Block Custom Width.

    次のサンプルページでは、カスタムの幅を 250 ピクセルに設定しています。

    カスタム幅ウィジェットオプション {width="400" modal="regular"}

  5. 完了したら、 Save.

  6. キャッシュを更新するように求めるプロンプトが表示されたら、ページ上部のメッセージに記載されているリンクをクリックし、指示に従います。

recommendation-more-help
2b0136b4-ef75-405f-9734-60d741f198de