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

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

ブロックを新規作成

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

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

サンプルコード

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

<script>
$(function(){
    $('a[data-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="media">' +
                    '<a class="media-left" href="' + data[i].url +'">' +
                    '<img style="height:150px;" src="' + data[i].image + '" />' +
                    '</a>' + 
                    '<div class="media-body">' + 
                    '<span class="badge">' + 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><a href="#category_1" data-toggle="tab">ジェラート</a></li>
      <li><a href="#category_2" data-toggle="tab">新入荷</a></li>
      <li><a href="#category_3" data-toggle="tab">アイスサンド</a></li>
    </ul>
    <div class="tab-content">
        <ul class="media-list" id="category_1" data-category_id="1"></ul>
        <ul class="media-list" id="category_2" data-category_id="2"></ul>
        <ul class="media-list" id="category_3" data-category_id="3"></ul>
      </div>
    </div>
</div>