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

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

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

ブロックを新規作成

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

今回ブロック名を「カテゴリ別ランキングタブ表示」、ファイル名を「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>

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

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

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