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

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

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

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

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

開始する前に、 手順に従って カタログイベント ウィジェットを設定し、ストアフロントに対して有効にします。

カタログイベントの設定

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

  1. 管理者 サイドバーで、Content/Elements/Widgets ​に移動します。

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

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

    • TypeCatalog Events Carousel に設定します。

    • ストアで使用される Design Theme を選択します。

  4. Continue」をクリックします。

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

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

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

      このタイトルは、管理者 からのみ表示されます。

    • Assign to Store Views:ウィジェットを表示するストア表示を選択します。

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

    • (オプション) Sort Order の場合は、数字を入力して、この項目がページの同じ部分に他の項目と共に表示される順序を決定します。 (0 = 1 番目、1 = 2 番目、3 = 3 番目など)。

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

手順 3:場所の選択

  1. レイアウトの更新」セクションで、「Add Layout Update」をクリックします。

  2. Display OnSpecified Page に設定します。

  3. PageCMS 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