スマートフォンからセット詳細画面を開いた時に、セット内容のタブを初期表示にする方法

フォローする
ソーシャルキャスト
オウルキャスト

※オウルキャストは「ベーシックプラン」「プロプラン」「オウルプラン」の方がご利用になれます。

セット詳細画面を開いた時の表示は以下の様になります。

【PC版】
set1.png

【スマートフォン版】
set2.png
この時、スマホ版で「セット情報」タブが初期表示になっていますが、
「セット内容」のタブを初期表示にし、セットに含まれる動画の一覧をはじめに出したい場合、
テンプレートを修正することで可能になります。
set3.png


■修正方法

  1. 管理画面「デザイン管理」>「テンプレート」>「スマートフォン版」タブ
  2. テンプレート名「セット詳細画面」
  3. 185~206行目あたりのJavascriptの、204行目の末尾に.tab('show');を追加

■変更前

<script>
$(function(){
var firstShow = true;

$('a[data-toggle="tab"][href="#tab-contents-list"]').on('shown.bs.tab', function (e) {
if (firstShow) {
firstShow = false;
$('#result').infinitePager({
url: '/user_api/set/{{set.id}}/contents',
data: { size: 3 },
template: '#contentsTemplate',
onAppend: function($appends) {
$('.favorite', $appends).favoriteButton();
{% if auth_check() %}
$('[data-watch-progress]', $appends).watchProgress();
{% endif %}
}
});
}
})
});
</script>

■変更後

<script>
$(function(){
var firstShow = true;

$('a[data-toggle="tab"][href="#tab-contents-list"]').on('shown.bs.tab', function (e) {
if (firstShow) {
firstShow = false;
$('#result').infinitePager({
url: '/user_api/set/{{set.id}}/contents',
data: { size: 3 },
template: '#contentsTemplate',
onAppend: function($appends) {
$('.favorite', $appends).favoriteButton();
{% if auth_check() %}
$('[data-watch-progress]', $appends).watchProgress();
{% endif %}
}
});
}
}).tab('show');
});
</script>
この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています