【カテゴリ別ランキングブロック作成プラグイン】複数のカテゴリランキングをタブで切り替えて表示させる方法

カテゴリ別ランキングブロック作成プラグインのカスタマイズ方法です。

複数のカテゴリランキングをタブで切り替えて表示できるようにしてみます。

ブロックを新規作成

まずブロックを新規作成します。

今回ブロック名を「カテゴリ別ランキングタブ表示」、ファイル名を「category_ranking_tab」とします。

サンプルコード

以下、サンプルコードです。ブロックのコード項目にコピペしてください。

<script>
$(function(){
    $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
        $($(e.relatedTarget).attr('href')).empty();

        var href = $(e.target).attr('href');
        $.ajax({
            type: 'GET',
            url: '{{ url('block_plugin_category_sales_ranking_json') }}',
            dataType: "json",
            data: {
                'category_id': $(href).data('category_id')
            },
        }).done((data, textStatus, jqXHR) => {
            for (let i = 0; i < 10; i++) {
                if(undefined === data[i]) {
                    break;
                }
                let rank = i + 1;
                let li = '<li class="d-flex">' +
                    '<a class="flex-shrink-0" href="' + data[i].url +'">' +
                    '<img style="height:150px;" src="' + data[i].image + '" />' +
                    '</a>' + 
                    '<div class="flex-grow-1">' + 
                    '<span class="badge text-bg-secondary">' + rank + '位</span> ' +  data[i].name +
                    '</div>' +
                    '</li>';
                    
                $(href).append(li);
            }
            
        }).fail((jqXHR, textStatus, errorThrown) => {
            $(href).empty();
        });
    });
    
    $('a[href="#category_1"]').tab('show');
})
</script>

<style>
#ranking_tab nav {
    margin-bottom: 10px;
}
#ranking_tab .tab-content ul {
    margin: 0;
}
</style>

<div class="container" id="ranking_tab">
    <ul class="nav nav-tabs" style="margin-bottom:10px;">
      <li class="nav-item">
          <a href="#category_1" data-bs-toggle="tab" class="nav-link active">ジェラート</a>
      </li>
      <li class="nav-item">
          <a href="#category_2" data-bs-toggle="tab" class="nav-link">新入荷</a>
      </li>
      <li class="nav-item">
          <a href="#category_3" data-bs-toggle="tab" class="nav-link">アイスサンド</a>
      </li>
    </ul>
    <div class="tab-content">
        <ul class="tab-pane active" id="category_1" data-category_id="1"></ul>
        <ul class="tab-pane" id="category_2" data-category_id="2"></ul>
        <ul class="tab-pane" id="category_3" data-category_id="3"></ul>
      </div>
    </div>
</div>

レイアウト管理でブロックを設置

作成したブロックをレイアウト管理でトップページ用レイアウトに設置してください。

以下のように表示されます。